task#5914 添加报备页面,地图页面
@ -26,10 +26,11 @@
|
||||
<van-number-keyboard safe-area-inset-bottom />
|
||||
<script type="text/javascript">
|
||||
window._AMapSecurityConfig = {
|
||||
serviceHost: 'https://api.sinoassist.com/_AMapService',
|
||||
// serviceHost: 'https://api.sinoassist.com/_AMapService',
|
||||
securityJsCode:'91ab1ebc492d5479a68b11527bd73dc9',
|
||||
}
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.Polyline"></script>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Geolocation,AMap.Geocoder,AMap.Marker,AMap.Driving"></script>
|
||||
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
|
||||
<script>
|
||||
// VConsole 默认会挂载到 `window.VConsole` 上
|
||||
|
BIN
src/assets/report/add_report_address.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/report/add_report_arrow.png
Normal file
After Width: | Height: | Size: 589 B |
BIN
src/assets/report/add_report_bg.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/report/add_report_close.png
Normal file
After Width: | Height: | Size: 1022 B |
BIN
src/assets/report/add_report_dot.png
Normal file
After Width: | Height: | Size: 355 B |
BIN
src/assets/report/add_report_time.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/report/destMarker.png
Normal file
After Width: | Height: | Size: 7.3 KiB |
BIN
src/assets/report/report_address.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
src/assets/report/report_ai.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/report/report_cancel.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/report/report_customer.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/report/report_delay.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/report/report_dispatch.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/report/report_driver.png
Normal file
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/report/report_fee.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/report/report_line.png
Normal file
After Width: | Height: | Size: 300 B |
BIN
src/assets/report/report_logo.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/report/report_other.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/report/report_unconnect.png
Normal file
After Width: | Height: | Size: 4.0 KiB |
@ -4,6 +4,7 @@ Vue.use(VueRouter);
|
||||
import kpiRouter from './kpi-router'
|
||||
import invoiceRouter from "@/router/invoice-router";
|
||||
import secondHandRouter from "@/router/second-hand-router";
|
||||
import reportRouter from "@/router/report-router"
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@ -277,6 +278,7 @@ const routes = [
|
||||
...kpiRouter,
|
||||
...invoiceRouter,
|
||||
...secondHandRouter,
|
||||
...reportRouter
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
21
src/router/report-router.js
Normal file
@ -0,0 +1,21 @@
|
||||
const reportRouter = [
|
||||
{
|
||||
path: '/reportIndex',
|
||||
name: 'reportIndex',
|
||||
component: () => import('@/views/report/reportIndex'),
|
||||
meta:{
|
||||
title: '道路救援',
|
||||
cache: true,
|
||||
modalState: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/addressMap',
|
||||
name: 'addressMap',
|
||||
component: () => import('@/views/report/addressMap'),
|
||||
meta:{
|
||||
title: '道路救援',
|
||||
}
|
||||
},
|
||||
]
|
||||
export default reportRouter
|
@ -36,6 +36,7 @@ export function getAddress(mapContext, lnglat) {
|
||||
} else {
|
||||
console.log(result)
|
||||
alert(JSON.stringify(result))
|
||||
reject(result)
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -90,6 +91,7 @@ export function getRoad( mapContext, startLng, startLat, endLng, endLat ) {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function drawRoute(route, map) {
|
||||
let path = parseRouteToPath(route)
|
||||
|
||||
@ -106,3 +108,4 @@ function drawRoute(route, map) {
|
||||
|
||||
map.add(routeLine);
|
||||
}
|
||||
*/
|
||||
|
206
src/views/report/addressMap.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="address_wrap">
|
||||
<div class="map_wrap" id="mapId">
|
||||
</div>
|
||||
<div class="button_wrap">
|
||||
<div class="cancel_btn" @click="cancelHandler">取消</div>
|
||||
<div class="confirm_btn" @click="successHandler">完成</div>
|
||||
</div>
|
||||
<div class="search_wrap">
|
||||
<div class="section">
|
||||
<input type="text" v-model="keyword" @change="searchHandler" placeholder="请输入地址" />
|
||||
</div>
|
||||
<div class="server_list" v-if="keyword">
|
||||
<div class="text_box" v-for="(item, index) in addressList" :key="index" @click="chooseHandler(item, index)" :class="{'active': index == activeIndex}">
|
||||
<div class="address_name">{{ item.name }}</div>
|
||||
<div class="address_detail">{{ ( item.district || '' ) + ( item.address || '' ) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchFun } from '@/utils/map'
|
||||
export default {
|
||||
name: "addressMap",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
addressList: [],
|
||||
activeIndex: '',
|
||||
map: '',
|
||||
marker: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyword() {
|
||||
this.searchHandler()
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
sessionStorage.setItem('reportAddress', '')
|
||||
await this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() { // 初始化地图
|
||||
this.map = new AMap.Map('mapId', {
|
||||
viewMode: '2D', // 默认使用 2D 模式
|
||||
zoom:11, //初始化地图层级
|
||||
})
|
||||
},
|
||||
async searchHandler() {
|
||||
this.activeIndex = null
|
||||
if( this.keyword ) {
|
||||
this.addressList = await searchFun(this.map, '', this.keyword)
|
||||
this.addressList = this.addressList.filter(item => !!item.location)
|
||||
} else {
|
||||
this.addressList = []
|
||||
}
|
||||
},
|
||||
chooseHandler(item, index) {
|
||||
this.activeIndex = index;
|
||||
this.addMarker()
|
||||
},
|
||||
addMarker() {
|
||||
if( this.marker ) {
|
||||
this.map.remove(this.marker)
|
||||
}
|
||||
let content = '<div class="dest-position"></div>';
|
||||
let activeObj = this.addressList[this.activeIndex];
|
||||
this.marker = new AMap.Marker({
|
||||
position: new AMap.LngLat( activeObj.location.lng, activeObj.location.lat ),
|
||||
content: content,
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
this.map.add(this.marker)
|
||||
this.map.setCenter([activeObj.location.lng, activeObj.location.lat])
|
||||
},
|
||||
successHandler() {
|
||||
if( this.activeIndex == null ) {
|
||||
this.$toast('请选择具体地址')
|
||||
return
|
||||
}
|
||||
let activeObj = this.addressList[this.activeIndex];
|
||||
let _tempObj = {
|
||||
startPoiAddress: activeObj?.district + activeObj?.address + activeObj?.name,
|
||||
startLat: activeObj?.location?.lat,
|
||||
startLng: activeObj?.location?.lng,
|
||||
adCode: activeObj?.adcode,
|
||||
}
|
||||
sessionStorage.setItem('reportAddress', JSON.stringify(_tempObj))
|
||||
setTimeout(() => {
|
||||
this.$router.go(-1)
|
||||
}, 1)
|
||||
},
|
||||
// 取消 返回上一页
|
||||
cancelHandler() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.dest-position {
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("~@/assets/report/destMarker.png");
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.address_wrap {
|
||||
height: 100%;
|
||||
}
|
||||
.map_wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60%;
|
||||
z-index: -1;
|
||||
}
|
||||
.button_wrap {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
zoom: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
.cancel_btn {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
background: #F37877;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
float: left;
|
||||
}
|
||||
.confirm_btn {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
background: rgba(5,193,98,1);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.search_wrap {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
.section {
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
padding-top: 10px;
|
||||
input {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border: none;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
background: #e2e0e0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.server_list {
|
||||
overflow-y: auto;
|
||||
padding-top: 30px;
|
||||
.text_box {
|
||||
margin: 10px 25px;
|
||||
padding-top: 10px;
|
||||
.address_name {
|
||||
font-size: 14px !important;
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
.address_detail {
|
||||
margin-top: 3px;
|
||||
color: #c3c3c3 !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
.address_name {
|
||||
color: green !important;
|
||||
}
|
||||
.address_detail {
|
||||
color: green !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
61
src/views/report/components/report-list-item.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="bottom_wrap">
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_delay.png" alt="">
|
||||
<div class="report_title">救援延误</div>
|
||||
</div>
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_unconnect.png" alt="">
|
||||
<div class="report_title">客户失联</div>
|
||||
</div>
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_cancel.png" alt="">
|
||||
<div class="report_title">客户取消</div>
|
||||
</div>
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_address.png" alt="">
|
||||
<div class="report_title">地址变更</div>
|
||||
</div>
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_fee.png" alt="">
|
||||
<div class="report_title">费用报备</div>
|
||||
</div>
|
||||
<div class="report_item">
|
||||
<img class="report_icon" src="@/assets/report/report_other.png" alt="">
|
||||
<div class="report_title">其他报备</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "report-list-item"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bottom_wrap {
|
||||
width: 100%;
|
||||
/*position: fixed;*/
|
||||
bottom: 0;
|
||||
padding: 0 34px 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2);
|
||||
.report_item {
|
||||
width: 25%;
|
||||
margin-top: 20px;
|
||||
.report_icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
.report_title {
|
||||
color: rgba(53, 53, 53, 0.67);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
96
src/views/report/components/service-item.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="service_title">
|
||||
<span class="name">故障平板拖车</span>
|
||||
<span class="status">调度成功,等待发车备份</span>
|
||||
</div>
|
||||
<!-- <img class="report_line" src="@/assets/report/report_line.png" alt="">-->
|
||||
<div class="service_content">
|
||||
<div class="content_left">
|
||||
<img class="report_logo" src="@/assets/report/report_logo.png" alt="">
|
||||
</div>
|
||||
<div class="content_right">
|
||||
<div class="order_code">单号:ZD20240878990</div>
|
||||
<div class="company">单位:上海安昌汽车救援有限公司</div>
|
||||
<div class="driver_info">
|
||||
<span class="driver_name">张师傅</span>
|
||||
<span>13666665577</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "service-item"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
width: calc(100% - 20px);
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 9px 0px rgba(53,73,93,0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E6E6E6;
|
||||
backdrop-filter: blur(5.602678571428572px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.service_title {
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
padding-left: 22px;
|
||||
padding-right: 14px;
|
||||
background: #F9FDFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.status {
|
||||
font-size: 13px;
|
||||
color: #F19028;
|
||||
}
|
||||
}
|
||||
.service_content {
|
||||
padding: 11px 16px 18px;
|
||||
display: flex;
|
||||
.content_left {
|
||||
.report_logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
.content_right {
|
||||
.order_code {
|
||||
color: #323643;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.company {
|
||||
color: #323643;
|
||||
font-size: 13px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.driver_info {
|
||||
color: rgba(50, 54, 67, 0.65);
|
||||
font-size: 12px;
|
||||
margin-bottom: 3px;
|
||||
.driver_name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.report_line {
|
||||
|
||||
}
|
||||
</style>
|
402
src/views/report/reportIndex.vue
Normal 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>
|