518 lines
14 KiB
Vue
518 lines
14 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
title="案件详情"
|
||
left-arrow
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="goPrePage"
|
||
/>
|
||
</div>
|
||
<div class="listWrap">
|
||
<div class="mapWrap">
|
||
<div>DDA2304142407036</div>
|
||
<div class="map">
|
||
<div class="title">
|
||
<div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
|
||
<div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
|
||
</div>
|
||
<div class="mapContainer" id="container"></div>
|
||
</div>
|
||
<div class="wiadgeWrap">
|
||
<div class="lineWrap">
|
||
<div class="left">
|
||
<img class="commonImg" :src="detailInfo.bridgeAbUrl">
|
||
<span class="free">AB(出发段)路桥费</span>
|
||
<span>{{detailInfo.bridgeAmountAb}}公里</span>
|
||
</div>
|
||
<div class="right">
|
||
<span>{{detailInfo.settleMileageAb}}</span>
|
||
<span>元</span>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="lineWrap">
|
||
<div class="left">
|
||
<img class="commonImg" :src="detailInfo.bridgeBcUrl">
|
||
<span class="free">BC(出发段)路桥费</span>
|
||
<span>{{detailInfo.bridgeAmountBc}}公里</span>
|
||
</div>
|
||
<div class="right">
|
||
<span>{{detailInfo.settleMileageBc}}</span>
|
||
<span>元</span>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="lineWrap">
|
||
<div class="left">
|
||
<img class="commonImg" :src="detailInfo.bridgeCaUrl">
|
||
<span class="free">CA(出发段)路桥费</span>
|
||
<span>{{detailInfo.bridgeAmountCa}}公里</span>
|
||
</div>
|
||
<div class="right">
|
||
<span>{{detailInfo.settleMileageCa}}</span>
|
||
<span>元</span>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="totalFree">
|
||
<span>总金额</span>
|
||
<span>{{ detailInfo.settleMileageAb+detailInfo.settleMileageBc+detailInfo.settleMileageCa }}</span>
|
||
<span>元</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="aduit">
|
||
<div :class="{itemWrap : true,aduitResult: detailInfo.secondAudit}">
|
||
<div>
|
||
<span class="star">*</span>
|
||
<span>{{detailInfo.secondAudit ? '二次审核结果' : '审核结果'}}</span>
|
||
</div>
|
||
<div class="isJoin">
|
||
<van-radio-group v-model="states" @change="isUse" class="joinWrap">
|
||
<van-radio :name="1" style="margin-right: 26px" class="item">
|
||
通过
|
||
<img
|
||
slot="icon"
|
||
slot-scope="props"
|
||
:src="props.checked ? activeIcon : inactiveIcon"
|
||
>
|
||
</van-radio>
|
||
<van-radio :name="2" class="item">
|
||
{{detailInfo.secondAudit? '报销失败' : '不通过'}}
|
||
<img
|
||
slot="icon"
|
||
slot-scope="props"
|
||
:src="props.checked ? activeIcon : inactiveIcon"
|
||
>
|
||
</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="itemWrap" v-show="states == 2">
|
||
<div>
|
||
<div>
|
||
<span class="star">*</span>
|
||
<span>不通过原因</span>
|
||
</div>
|
||
</div>
|
||
<select id="mySelect" class="mySelect" v-model="other" >
|
||
<option value="缺失凭证照片">缺失凭证照片</option>
|
||
<option value="申请金额与凭证不一致">申请金额与凭证不一致</option>
|
||
<option value="非正常产生路桥费">非正常产生路桥费</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div v-show="other == '其他'">
|
||
<div>其他原因</div>
|
||
<textarea v-model="otherReason" class="multipleTxt" placeholder="描述"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins";
|
||
import {reimburseOrderDetail,reimburseOrderAudit} from "@/api/reimbursementBatch"
|
||
import minePosition from "@/assets/realApoint.png";
|
||
import vehiclePosition from "@/assets/realBpoint.png";
|
||
import desitationPosition from "@/assets/realCpoint.png";
|
||
export default {
|
||
name: "caseDetail",
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
states:'',
|
||
activeIcon: require('@/assets/check.png'),
|
||
inactiveIcon: require('@/assets/uncheck.png'),
|
||
otherReason:'',
|
||
other:'',
|
||
firstSubmit:2,
|
||
id:'',
|
||
detailInfo:{},
|
||
noClick:true,
|
||
state:'',//审核状态
|
||
map: '',
|
||
abPath:[],
|
||
bcPath:[],
|
||
activeIndex:'',
|
||
}
|
||
},
|
||
created() {
|
||
this.id = this.$route.params.id;
|
||
this.activeIndex=this.$route.params.index;
|
||
},
|
||
async mounted(){
|
||
await this.getOrderDetail()
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
});
|
||
},
|
||
methods:{
|
||
goPrePage(){
|
||
this.$router.push({
|
||
name: 'caseAuditList', // 目标路由的名称
|
||
params: {
|
||
id:this.id,
|
||
activeIndex:this.activeIndex,
|
||
}
|
||
});
|
||
},
|
||
initMap() {
|
||
this.map = new AMap.Map('container',{
|
||
zoom:14,//级别(缩放比例 3-20 )
|
||
center: [this.detailInfo.apointLongtitude,this.detailInfo.apointLatitude],//中心点坐标
|
||
viewMode:'2D',//使用3D视图
|
||
})
|
||
this.map.on('complete', () => {
|
||
this.mapMarkers();
|
||
});
|
||
},
|
||
mapMarkers(){
|
||
let ABpolyline=''
|
||
let BCpolyline=''
|
||
if(this.abPath && this.abPath.length>0){
|
||
ABpolyline = new AMap.Polyline({
|
||
path: [...this.abPath],
|
||
strokeColor: '#005DC7', // 路径线颜色
|
||
strokeWeight: 5 ,// 路径线宽度
|
||
showDir: true // 显示箭头
|
||
});
|
||
this.map.add(ABpolyline);
|
||
}
|
||
if(this.bcPath && this.bcPath.length>0){
|
||
BCpolyline = new AMap.Polyline({
|
||
path: [...this.bcPath],
|
||
strokeColor: '#005DC7 ', // 路径线颜色
|
||
strokeWeight: 5 ,// 路径线宽度
|
||
showDir: true // 显示箭头
|
||
});
|
||
this.map.add(BCpolyline);
|
||
}
|
||
// 车辆位置，a点
|
||
let marker = new AMap.Marker({
|
||
position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude],
|
||
icon: new AMap.Icon({
|
||
image: minePosition, // 图片的相对路径
|
||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||
}),
|
||
});
|
||
this.setLabel(marker,this.detailInfo.apointAddress)
|
||
this.map.add(marker);
|
||
// 事发地，b点
|
||
let marker1 = new AMap.Marker({
|
||
position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
|
||
icon: new AMap.Icon({
|
||
image: vehiclePosition, // 图片的相对路径
|
||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||
})
|
||
});
|
||
this.setLabel(marker1,this.detailInfo.bpointAddress)
|
||
this.map.add(marker1);
|
||
let marker2=''
|
||
if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
|
||
marker2 = new AMap.Marker({
|
||
position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
|
||
icon: new AMap.Icon({
|
||
image: desitationPosition, // 图片的相对路径
|
||
size: new AMap.Size(28, 28), // 图标的尺寸
|
||
imageSize: new AMap.Size(28, 28) // 图片的实际尺寸
|
||
})
|
||
});
|
||
this.setLabel(marker2,this.detailInfo.cpointAddress)
|
||
this.map.add(marker2);
|
||
}
|
||
if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
|
||
this.map.setFitView([marker,marker1,marker2])
|
||
}else{
|
||
this.map.setFitView([marker,marker1])
|
||
}
|
||
},
|
||
setLabel(markerPoint,address){
|
||
markerPoint.setLabel({
|
||
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
||
content: address, //设置文本标注内容
|
||
direction: 'top'
|
||
});
|
||
},
|
||
async submitHandle(){
|
||
if(!this.states){
|
||
this.$toast('审核结果必选')
|
||
return
|
||
}
|
||
if(this.states == 1 && !this.other){
|
||
this.$toast('审核不通过原因必填')
|
||
return
|
||
}
|
||
if(this.other == '其他' && !this.otherReason){
|
||
this.$toast('审核不通过原因是其他时审核原因必填')
|
||
return
|
||
}
|
||
let res = await reimburseOrderAudit({
|
||
id:this.id,
|
||
state:this.state,
|
||
auditRemark:this.other=='其他' ? this.other+ '/' + this.otherReason : this.other,
|
||
})
|
||
console.log("ressssss",res)
|
||
},
|
||
isUse(e){
|
||
this.states=e
|
||
if(this.states == 1){
|
||
this.state=2
|
||
}else if(this.states == 2){
|
||
if(this.detailInfo.secondAudit){
|
||
this.state=4
|
||
}else{
|
||
this.state=3
|
||
}
|
||
}
|
||
},
|
||
async getOrderDetail(){
|
||
let res=await reimburseOrderDetail({
|
||
id:this.id
|
||
})
|
||
this.detailInfo=res.data
|
||
if(this.detailInfo.gpsTrackQOsAB && this.detailInfo.gpsTrackQOsAB .length > 0){
|
||
this.detailInfo?.gpsTrackQOsAB.forEach((item)=>{
|
||
this.abPath.push([item.lon,item.lat])
|
||
})
|
||
}
|
||
if(this.detailInfo.gpsTrackQOsBC && this.detailInfo.gpsTrackQOsBC .length > 0){
|
||
this.detailInfo?.gpsTrackQOsBC.forEach((item)=>{
|
||
this.bcPath.push([item.lon,item.lat])
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
.wrap{
|
||
@include wh(100%,100%);
|
||
box-sizing: border-box;
|
||
}
|
||
.navBar{
|
||
margin-bottom: 46px;
|
||
}
|
||
::v-deep .van-nav-bar__content{
|
||
background-color: #354683 !important;
|
||
}
|
||
.listWrap{
|
||
width: 100%;
|
||
height: calc(100% - 46px);
|
||
overflow-y: auto;
|
||
background-color: #F4F5F7;
|
||
box-sizing: border-box;
|
||
padding: 10px 8px;
|
||
position: relative;
|
||
.mapWrap{
|
||
@include wh(100%,407px);
|
||
background-color: #FFFFFF;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
box-sizing: border-box;
|
||
padding: 9px 8px 0;
|
||
.map{
|
||
@include wh(100%,204px);
|
||
border-radius: 4px;
|
||
border: 1px solid #F0F0F0;
|
||
margin-top: 7px;
|
||
margin-bottom: 13px;
|
||
.title{
|
||
@include wh(100%,31px);
|
||
line-height: 31px;
|
||
background: #F9FCFF;
|
||
border-radius: 0px 0px 6px 6px;
|
||
display: flex;
|
||
div{
|
||
width: 50%;
|
||
margin-left: 17px;
|
||
font-size: 12px;
|
||
span:first-child{
|
||
display: inline-block;
|
||
color: #555A68;
|
||
margin-right: 3px;
|
||
}
|
||
span:last-child{
|
||
color: #3A3A3A;
|
||
}
|
||
}
|
||
}
|
||
.mapContainer{
|
||
@include wh(100%,173px)
|
||
}
|
||
}
|
||
}
|
||
.wiadgeWrap{
|
||
box-sizing: border-box;
|
||
padding: 0 6px;
|
||
.lineWrap{
|
||
@include flexBetCen();
|
||
line-height: 32px;
|
||
.left{
|
||
@include flexCenter();
|
||
img{
|
||
@include wh( 48px,31px);
|
||
}
|
||
.free{
|
||
margin: 0 11px;
|
||
@include fontWeightSize(bold,13px);
|
||
@include colorOpa(#000000,0.9);
|
||
}
|
||
span:last-child{
|
||
font-size: 12px;
|
||
color: #555A68;
|
||
}
|
||
}
|
||
.right{
|
||
span:first-child{
|
||
@include fontWeightSize(bold,18px);
|
||
@include colorOpa(#000000,0.75);
|
||
}
|
||
span:last-child{
|
||
@include fontWeightSize(bold,10px);
|
||
@include colorOpa(#000000,0.8);
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
.line{
|
||
width: 100%;
|
||
border-bottom: 1px solid #E9E9EA;
|
||
opacity: 0.6;
|
||
margin-top: 2px;
|
||
}
|
||
.totalFree{
|
||
width: 100%;
|
||
line-height: 42px;
|
||
@include flexCenter();
|
||
justify-content: flex-end;
|
||
span:first-child{
|
||
@include fontWeightSize(bold,13px);
|
||
@include colorOpa(#000000,0.9);
|
||
}
|
||
span:nth-child(2){
|
||
@include fontWeightSize(600,22px);
|
||
color: #FF5D2E;
|
||
margin: 0 3px 0 9px;
|
||
}
|
||
span:last-child{
|
||
@include fontWeightSize(bold,10px);
|
||
@include colorOpa(#000000,0.8);
|
||
}
|
||
}
|
||
}
|
||
.aduit{
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
//height: 201px;
|
||
line-height: 37px;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
box-sizing: border-box;
|
||
padding: 17px 21px 19px 16px;
|
||
@include flexBetween();
|
||
.itemWrap{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.star{
|
||
color: #FF0808;
|
||
@include fontWeightSize(bold,13px);
|
||
}
|
||
.multipleTxt{
|
||
@include wh(100%,87px);
|
||
background: #FAFAFA;
|
||
@include sizingPadRadius(8px,8px,3px);
|
||
border: 1px solid #E6E6E6;
|
||
backdrop-filter: blur(10px);
|
||
margin-top: 3px;
|
||
}
|
||
.aduitResult:after{
|
||
content: '该案件为二次提交，审核不通过后司机无法再次申请报销。';
|
||
color: red;
|
||
position: absolute;
|
||
line-height: 70px;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
.submitBtn{
|
||
//position: absolute;
|
||
//bottom: 30px;
|
||
margin:20px 0 10px 6%;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
@include bgFontColor(#FFFFFF,#354D93);
|
||
@include fontWeightSize(bold,15px);
|
||
@include whLin(88%,48px);
|
||
}
|
||
}
|
||
.greColor{
|
||
color:#38AD00 ;
|
||
font-weight: 500;
|
||
}
|
||
.redColor{
|
||
color:#FF5D2E ;
|
||
font-weight: 500;
|
||
}
|
||
.commonImg{
|
||
@include widHeiMar(13px,13px,4px);
|
||
}
|
||
.rightArrImg{
|
||
@include wh(6px,9px);
|
||
margin-left: 6px;
|
||
}
|
||
.yelColor{
|
||
color: #E69B0B;
|
||
font-weight: 600;
|
||
}
|
||
.greColor{
|
||
color: #56B628;
|
||
font-weight: 600;
|
||
}
|
||
.oraColor{
|
||
color: #FF5D2E;
|
||
font-weight: 600;
|
||
}
|
||
.garyColor{
|
||
color: #9C9C9C;
|
||
font-weight: 600;
|
||
}
|
||
.isJoin{
|
||
display: flex;
|
||
.joinWrap, .item{
|
||
@include flexCenter;
|
||
}
|
||
img{
|
||
@include widHeiMar(16px,16px,6px)
|
||
}
|
||
}
|
||
::v-deep .amap-copyright{
|
||
display: none !important;
|
||
}
|
||
::v-deep .amap-logo{
|
||
display: none !important;
|
||
}
|
||
::v-deep .amap-marker-label{
|
||
border: none;
|
||
padding: 0 8px;
|
||
@include all-height(25px);
|
||
@include fontWeightSize(12px,400);
|
||
color: #3A3A3A;
|
||
@include bgcolorOpa(#FFFFFF,0.98);
|
||
box-shadow: 0px 1px 4px 0px rgba(164,162,162,0.69);
|
||
border-radius: 17px;
|
||
}
|
||
</style>
|