317 lines
10 KiB
Vue
317 lines
10 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="baseInfo common">
|
||
<div class="title">基本信息:</div>
|
||
<div class="line"></div>
|
||
<div class="infoWrap fontColor">
|
||
<div class="leftTitle">
|
||
<div class="leftItem">工单编号:</div>
|
||
<div class="leftItem">合同:</div>
|
||
<div class="leftItem">结算方式:</div>
|
||
<div class="leftItem">客户姓名:</div>
|
||
<div class="leftItem">客户电话:</div>
|
||
<div class="leftItem">车牌号:</div>
|
||
<div class="leftItem">车型品牌:</div>
|
||
</div>
|
||
<div class="rightContent">
|
||
<div class="rightItem" style="display: flex;align-items: center;">
|
||
<span id="copyText">{{orderDetailInfo.orderCode}}</span>
|
||
<img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
|
||
</div>
|
||
<div class="rightItem">{{ orderDetailInfo.contractName }}</div>
|
||
<div class="rightItem">{{ orderDetailInfo.contractSettleType?.label }}</div>
|
||
<div class="rightItem">{{ orderDetailInfo.userName }}</div>
|
||
<div class="rightItem">{{ orderDetailInfo.userPhone }}</div>
|
||
<div class="rightItem">{{ orderDetailInfo.plateNumber }}</div>
|
||
<!-- <div class="rightItem" >理想智动LXA6500SHEVM理想智动LXA6500SHEVM</div>-->
|
||
<div class="rightItem" >{{orderDetailInfo.model}}{{ orderDetailInfo.brand }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="serviceInfo common">
|
||
<div class="title">服务信息:</div>
|
||
<div class="line"></div>
|
||
<div class="infoContent">
|
||
<div class="item">
|
||
<span class="leftTitle fontColor">服务类型:</span><span class="rightContent">{{ orderDetailInfo.taskServiceName }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">{{ orderDetailInfo.positionEnvironment?.label }}</span>
|
||
</div>
|
||
<div class="item" style="align-items: baseline">
|
||
<span class="leftTitle fontColor">事发地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.vehiclePointAddress }}</span>
|
||
</div>
|
||
<div class="item" style="align-items: baseline">
|
||
<span class="leftTitle fontColor">事发地补充:</span><span class="rightContent vehicleRemark" >{{orderDetailInfo.vehiclePointRemark}}
|
||
</span>
|
||
</div>
|
||
<div v-show="orderDetailInfo.taskFlowId === 2" class="item" style="align-items: baseline" >
|
||
<span class="leftTitle fontColor">目的地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.destinationAddress }}</span>
|
||
</div>
|
||
<div v-show="orderDetailInfo.taskFlowId === 2" class="item" style="align-items: baseline">
|
||
<span class="leftTitle fontColor">目的地补充:</span><span class="rightContent vehicleRemark">{{orderDetailInfo.destinationRemark}}</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="leftTitle fontColor">工单状态:</span><span class="rightContent orderStatus">{{ orderDetailInfo.taskOrderStatusString }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">{{ orderDetailInfo.taskVehicleName }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}
|
||
<span v-if="queryType == 5" class="driverPoiBtn" @click="noMultipleClicks(showMap)">查看司机位置</span>
|
||
</span>
|
||
</div>
|
||
<div class="item" v-if="queryType == 9 || queryType ==11 || queryType ==12">
|
||
<span class="leftTitle fontColor">工单照片:</span><span class="rightContent">
|
||
<span class="driverPoiBtn" @click="checkPhoto">查看照片</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map" v-show="showPopup" id="container">
|
||
<img @click="showPopup = false" src="@/assets/delKey.png" class="mapImg">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {myMixins} from '@/utils/myMixins'
|
||
import {getOrderDetail,showVehiclePositionInfo} from "@/api/order"
|
||
import minePosition from '@/assets/minePosition.png';
|
||
import vehiclePosition from '@/assets/vehiclePosition.png';
|
||
import desitationPosition from '@/assets/desitationPosition.png'
|
||
export default {
|
||
name: "workOrderDetail",
|
||
mixins:[myMixins],
|
||
data(){
|
||
return{
|
||
userOrderId:'',
|
||
queryType:'',
|
||
orderCode:'',
|
||
taskOrderId:'',
|
||
orderDetailInfo:{},
|
||
showPopup: false,
|
||
map: '',
|
||
driverPoiInfo:{},
|
||
noClick:true,
|
||
}
|
||
},
|
||
async mounted() {
|
||
// 获取当前 URL
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
// 获取指定参数的值
|
||
this.queryType=urlParams.get('queryType');
|
||
this.userOrderId = urlParams.get('userOrderId');
|
||
this.orderCode=urlParams.get('orderCode');
|
||
this.taskOrderId=urlParams.get('taskOrderId') ? urlParams.get('taskOrderId') : '';
|
||
await this.getDetail();
|
||
if(this.queryType == 5){
|
||
await this.getDriverPoi();
|
||
}
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
});
|
||
|
||
},
|
||
methods:{
|
||
async getDetail(){
|
||
let result=await getOrderDetail({
|
||
queryType:this.queryType,
|
||
userOrderId:this.userOrderId,
|
||
orderCode:this.orderCode,
|
||
taskOrderId:this.taskOrderId ? this.taskOrderId : ''
|
||
})
|
||
// if(result.code === 200){
|
||
this.orderDetailInfo=result.data;
|
||
// }
|
||
},
|
||
showMap() {
|
||
this.showPopup = true;
|
||
this.mapMarkers();
|
||
},
|
||
checkPhoto(){
|
||
let isAllowImage = this.queryType == 9 ? 0 : 1
|
||
let data = {
|
||
"action": "orderPhoto",
|
||
"params": {
|
||
"userOrderId": this.userOrderId,
|
||
"orderCode": this.orderCode,
|
||
"taskOrderId": this.taskOrderId,
|
||
"isAllowImage":isAllowImage,
|
||
}
|
||
}
|
||
var u = navigator.userAgent;
|
||
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
if(isiOS){
|
||
window.webkit.messageHandlers.nativeObject.postMessage(data);
|
||
}else {
|
||
window.android.sendMessage("orderPhoto,"+this.userOrderId+","+this.orderCode+","+this.taskOrderId+","+isAllowImage);
|
||
}
|
||
},
|
||
initMap() {
|
||
this.map = new AMap.Map('container',{
|
||
zoom:14,//级别(缩放比例 3-20 )
|
||
center: [this.driverPoiInfo.vehiclePositionLongtitude,this.driverPoiInfo.vehiclePositionLatitude],//中心点坐标
|
||
viewMode:'2D',//使用3D视图
|
||
})
|
||
this.map.on('complete', () => {
|
||
console.log("地图加载完成")
|
||
this.mapMarkers();
|
||
});
|
||
},
|
||
mapMarkers(){
|
||
// 车辆位置，a点
|
||
let marker = new AMap.Marker({
|
||
position: [this.driverPoiInfo?.vehiclePositionLongtitude,this.driverPoiInfo?.vehiclePositionLatitude],
|
||
icon: new AMap.Icon({
|
||
image: minePosition, // 图片的相对路径
|
||
size: new AMap.Size(22, 32), // 图标的尺寸
|
||
imageSize: new AMap.Size(22, 32) // 图片的实际尺寸
|
||
}),
|
||
});
|
||
this.map.add(marker);
|
||
// 事发地，b点
|
||
let marker1 = new AMap.Marker({
|
||
position: [this.driverPoiInfo?.vehiclePointLongitude,this.driverPoiInfo?.vehiclePointLatitude],
|
||
icon: new AMap.Icon({
|
||
image: vehiclePosition, // 图片的相对路径
|
||
size: new AMap.Size(26, 28), // 图标的尺寸
|
||
imageSize: new AMap.Size(26, 28) // 图片的实际尺寸
|
||
})
|
||
});
|
||
this.map.add(marker1);
|
||
let marker2 = new AMap.Marker({
|
||
position: [this.driverPoiInfo?.destinationLongitude,this.driverPoiInfo?.destinationLatitude],
|
||
icon: new AMap.Icon({
|
||
image: desitationPosition, // 图片的相对路径
|
||
size: new AMap.Size(28, 28), // 图标的尺寸
|
||
imageSize: new AMap.Size(28, 28) // 图片的实际尺寸
|
||
})
|
||
});
|
||
this.map.add(marker2);
|
||
this.map.setFitView([marker,marker1,marker2])
|
||
},
|
||
async getDriverPoi(){
|
||
let res=await showVehiclePositionInfo({
|
||
userOrderId:this.userOrderId,
|
||
taskOrderId:this.taskOrderId
|
||
})
|
||
// 2704382，24145
|
||
this.driverPoiInfo = res.data
|
||
console.log("driverPoiInfo",this.driverPoiInfo)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
.wrap{
|
||
@include wh(100%,100%);
|
||
background-color: #F4F5F7;
|
||
overflow-y: auto;
|
||
}
|
||
::v-deep .amap-copyright{
|
||
display: none !important;
|
||
}
|
||
::v-deep .amap-logo{
|
||
display: none !important;
|
||
}
|
||
.map{
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
@include wh(95%,350px);
|
||
.mapImg{
|
||
background-color: #FFFFFF;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
@include wh(25px,25px);
|
||
z-index: 1111111;
|
||
}
|
||
}
|
||
|
||
.common{
|
||
background: #FFFFFF;
|
||
@include radiusSizing(6px);
|
||
padding: 11px 17px 15px 24px;
|
||
}
|
||
.fontColor{
|
||
@include fontWeightSize(400,12px);
|
||
color: #000000;
|
||
line-height: 24px;
|
||
}
|
||
.baseInfo{
|
||
@include wh(100%,260px);
|
||
margin-bottom: 12px;
|
||
.infoWrap{
|
||
display: flex;
|
||
.leftTitle{
|
||
margin-left: 5px;
|
||
margin-right: 6px;
|
||
@include wh(60px,189px);
|
||
opacity: .5;
|
||
}
|
||
.rightContent{
|
||
height: 189px;
|
||
width: calc(100% - 60px);
|
||
}
|
||
}
|
||
}
|
||
.serviceInfo{
|
||
//@include wh(100%,356px);
|
||
width: 100%;
|
||
margin-bottom: 30px;
|
||
.item{
|
||
@include flexCenter;
|
||
}
|
||
.infoContent{
|
||
.leftTitle{
|
||
display: block;
|
||
width: 72px;
|
||
opacity: .5;
|
||
}
|
||
.rightContent{
|
||
width: calc(100% - 90px);
|
||
@include fontWeightSize(bold,12px);
|
||
.driverPoiBtn{
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
@include bgFontColor(#FFFFFF,#354D93);
|
||
opacity: .7;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
margin-left: 6px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.vehicleRemark{
|
||
@include fontWeightSize(400,11px);
|
||
@include colorOpa(#121212,0.55);
|
||
line-height: 14px;
|
||
flex: 1;
|
||
}
|
||
.orderStatus{
|
||
color: #E69B0B;
|
||
}
|
||
}
|
||
}
|
||
.title{
|
||
@include fontWeightSize(bold,14px);
|
||
@include colorOpa(#323643,0.6);
|
||
line-height: 20px;
|
||
}
|
||
.line{
|
||
@include wh(100%,2px);
|
||
opacity: 0.16;
|
||
border-bottom: 1px solid;
|
||
margin: 7px 0;
|
||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||
}
|
||
</style> |