apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#5914 添加报备页面，地图页面

Browse Source
This commit is contained in:
周林芳
2025-06-06 09:38:55 +08:00
parent 5552b48ec4
commit 899ea612f4
27 changed files with 794 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

402
src/views/report/reportIndex.vue Normal file
View File

@ -0,0 +1,402 @@
<template>
<div class="main_wrap">
<div class="top_bg">
<div class="title">报备中心</div>
</div>
<div class="service_wrap">
<service-item></service-item>
</div>
<div class="chat_list">
<div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
<!--ai对话框 s -->
<div class="ai_chat">
<div class="ai_left">
<img class="report_ai" src="@/assets/report/report_ai.png" alt="">
</div>
<div class="ai_right">
<div class="ai_title">张师傅你好，请选择报备内容</div>
<ul>
<li @click="addReportShow = true">“联系不上客户”</li>
<li>“联系不上客户”</li>
<li>“联系不上客户”</li>
<li>“联系不上客户”</li>
<li>“联系不上客户”</li>
</ul>
</div>
</div>
<!--ai对话框 e -->
<div class="tip_wrap">5月29日 10:48</div>
<!--客服对话框 s -->
<div class="customer_item mb20">
<div class="customer_left">
<img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
</div>
<div class="common_right customer_cls">
<div class="customer_status">客服已处理</div>
<div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
</div>
</div>
<!--客服对话框 e -->
<div class="tip_wrap">5月29日 10:48</div>
<!--服务人员对话框 s -->
<div class="server_item mb20">
<div class="common_right service_cls">
<div class="service_status">客服已处理</div>
<div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
</div>
<div class="customer_left">
<img class="profile_photo ml" src="@/assets/report/report_driver.png" alt="">
</div>
</div>
<!--服务人员对话框 e -->
<div class="tip_wrap">5月29日 10:48</div>
<!--服务人员对话框 s -->
<div class="server_item mb20">
<div class="common_right service_cls">
<div class="service_status">客服已处理</div>
<div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
</div>
<div class="customer_left">
<img class="profile_photo ml" src="@/assets/report/report_dispatch.png" alt="">
</div>
</div>
<!--服务人员对话框 e -->
</div>
<report-list-item />
<van-popup ref="addReportModal" v-model="addReportShow" duration="0" round position="bottom">
<div class="dialog_wrap">
<img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
<div class="report_content">
<!--预约时间报备 s -->
<div class="report_title">
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
<span>预约时间</span>
</div>
<div class="report_time_content" @click="showDatetime = true">
<div class="report_time_left">
<img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
<span>{{appointTime || '请选择时间'}}</span>
</div>
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
</div>
<!--预约时间报备 e -->
<!--修改地址报备 s -->
<div class="report_title">
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
<span>修改事发地</span>
</div>
<div class="report_time_content" @click="goPage('addressMap')">
<div class="report_time_left">
<img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
<span>{{address || '请选择地址'}}</span>
</div>
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
</div>
<!--修改地址报备 e -->
<div class="report_title">
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
<span>补充报备内容</span>
</div>
<div class="report_common_content">
<van-field
v-model="remark"
class="report_textarea"
placeholder="点击这里输入补充报备内容" />
</div>
</div>
<div class="report_btn">
提交报备
</div>
</div>
</van-popup>
<van-popup v-model="showDatetime" round position="bottom">
<van-datetime-picker
class="dataTime"
v-if="showDatetime"
v-model="appointTime"
type="datetime"
@confirm="onConfirm"
@cancel="showDatetime = false"
/>
</van-popup>
</div>
</template>
<script>
import { myMixins} from "@/utils/myMixins";
import {timeFormat} from "@/utils/common";
import reportListItem from '@/views/report/components/report-list-item'
import serviceItem from "@/views/report/components/service-item"
export default {
name: "reportIndex",
components: { serviceItem, reportListItem },
mixins: [myMixins],
data() {
return {
addReportShow: false,
remark: '',
showDatetime: false,
appointTime: '',
address: '',
lat: '',
lng: '',
adCode: '',
}
},
activated() {
let addressSession = sessionStorage.getItem('reportAddress');
if(addressSession) {
let _obj = JSON.parse(addressSession)
this.address = _obj.startPoiAddress;
this.lat = _obj.startLat;
this.lng = _obj.startLng;
this.adCode = _obj.adCode;
}
},
methods: {
onConfirm(data) {
this.appointTime = timeFormat(new Date(data))
this.showDatetime = false;
}
}
}
</script>
<style lang="scss" scoped>
#app {
background: #F9FCFF !important;
}
.main_wrap {
width: 100%;
height: 100%;
background: #F9FCFF !important;
display: flex;
flex-direction: column;
}
.top_bg {
width: 100%;
height: 162px;
background: #334885;
.title {
color: #fff;
text-align: center;
padding-top: 52px;
font-size: 17px;
line-height: 24px;
}
}
.service_wrap {
margin-top: -75px;
margin-bottom: 20px;
}
.chat_list {
flex: 1;
overflow: auto;
.top_tip_wrap {
color: #7C8698;
text-align: center;
font-size: 13px;
}
.tip_wrap {
color: #7C8698;
text-align: center;
font-size: 13px;
margin-bottom: 10px;
}
.ai_chat {
padding: 25px 10px 20px;
display: flex;
.ai_left {
.report_ai {
width: 44px;
height: 44px;
margin-right: 12px;
}
}
.ai_right {
.ai_title {
color: #203152;
font-size: 15px;
font-weight: 600;
margin-bottom: 15px;
}
li {
font-size: 13px;
color: #267EF0;
line-height: 18px;
margin-bottom: 15px;
font-weight: bold;
}
li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #5680FA;
border-radius: 50%; /* 圆形 */
margin-right: 10px;
}
}
}
}
/*客服人员，服务人员对话弹框样式 s*/
.profile_photo {
width: 44px;
height: 44px;
}
.mr {
margin-right: 10px;
}
.ml {
margin-left: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.customer_item {
display: flex;
padding-left: 10px;
padding-right: 64px;
.customer_left {
}
}
.common_right {
padding: 11px 13px;
flex: 1;
.customer_status::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #5680FA;
border-radius: 50%; /* 圆形 */
margin-right: 10px;
}
.customer_status {
font-size: 14px;
color: #267EF0;
line-height: 20px;
font-weight: bold;
}
.service_status {
font-size: 14px;
color: #F07926;
line-height: 20px;
font-weight: bold;
}
.service_status::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #F07926;
border-radius: 50%; /* 圆形 */
margin-right: 10px;
}
}
.customer_cls {
border-radius: 0px 6px 6px 6px;
background: #E3F0FF;
}
.service_cls {
background: #FAEBD8;
border-radius: 0px 6px 6px 6px;
}
.server_item {
display: flex;
padding-right: 10px;
padding-left: 64px;
}
.response_con {
font-size: 13px;
color: #242A37;
line-height: 18px;
font-weight: bold;
margin-top: 5px;
}
/*客服人员，服务人员对话弹框样式 e*/
.dialog_wrap {
.add_report_bg {
width: 100%;
height: 76px;
}
.report_content {
width: calc(100% - 12px);
margin: -30px auto 0;
padding-right: 14px;
padding-left: 20px;
box-sizing: border-box;
background: #fff;
position: relative;
padding-top: 25px;
border-radius: 10px;
.report_title {
font-size: 16px;
font-weight: 600;
color: #267EF0;
line-height: 22px;
margin-bottom: 10px;
.dot {
width: 7px;
height: 6px;
margin-right: 12px;
}
}
.report_time_content {
padding: 13px;
background: #F2F7FF;
border-radius: 6px;
border: 1px solid #E2EAF6;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.report_time_left {
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.9);
display: flex;
align-items: flex-start;
}
.add_report_time {
width: 18px;
height: 18px;
margin-right: 8px;
}
.report_arrow {
width: 8px;
height: 12px;
margin-left: 5px;
}
}
.report_common_content {
margin-bottom: 27px;
.report_textarea {
width: 100%;
box-sizing: border-box;
background: #F8FAFC;
border-radius: 6px;
min-height: 95px;
border: 1px solid #E2EAF6;
}
}
}
.report_btn {
width: calc(100% - 80px);
height: 46px;
line-height: 46px;
background: #005DD5;
border-radius: 23px;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
text-align: center;
margin: 0 auto 40px;
}
}
</style>