320 lines
7.2 KiB
Vue
320 lines
7.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="orderCard" @click="onShowDetail">
|
|
<view class="orderCardHeader">
|
|
<text class="orderCardType">{{ getRescueTypeStr() }}</text>
|
|
<text class="orderCardTitle">{{ orderData.rescuePosition }}</text>
|
|
</view>
|
|
<view class="orderCardStatus">
|
|
<view class="orderCardStatusData">
|
|
<view v-if="orderData.rescueStatus == 1" class="orderCardSendOrders">
|
|
预约单
|
|
</view>
|
|
<view v-if="orderData.rescueStatus == 2" class="orderCardSendOrders">
|
|
系统正在派单中...
|
|
</view>
|
|
<template v-if="orderData.rescueStatus == 3">
|
|
<image src="@/static/icons/homeOrderCard/dhjl.png" class="orderCardDistanceIcon" mode="aspectFit"></image>
|
|
<text class="orderCardDistanceValue">{{orderData.distance / 1000 || 0}}KM</text>
|
|
|
|
<!-- #ifdef MP -->
|
|
<image src="@/static/icons/homeOrderCard/yjsj.png" class="orderCardPredictIcon"></image>
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP -->
|
|
<image src="@/static/icons/homeOrderCard/yjsj.svg" class="orderCardPredictIcon"></image>
|
|
<!-- #endif -->
|
|
<text class="orderCardPredictDate">{{orderData.needTime || 0}}分钟</text>
|
|
到达
|
|
</template>
|
|
</view>
|
|
<text v-if="statusStr" :class="{ toRescued: status == 2 || status == 3 || status == 4, inRescue: status == 5 || status == 1 }"
|
|
class="orderCardFlag">
|
|
<template>{{statusStr}}</template>
|
|
</text>
|
|
</view>
|
|
<view class="orderCardProcess">
|
|
<view v-if="orderData.rescueStatus > 2">
|
|
<text class="orderCardDriver">{{ orderData.driverName || "" }}</text>
|
|
驾驶
|
|
<text class="orderCardCarNo">{{ orderData.driverCarNum || "" }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="orderCardFooter">
|
|
<text class="orderCardDateTime">{{ orderData.rescueTime || "" }}</text>
|
|
<view class="orderCardBtnGroup">
|
|
<template v-if="hasRole('ddzx') && orderData.rescueStatus <= 2">
|
|
<view @click.stop="deleteId" class="orderCardBtnGroupItem" style="background-color: #fff;color: #317DFA">
|
|
删除订单</view>
|
|
<view @click.stop="getzhipai" class="orderCardBtnGroupItem">指派司机</view>
|
|
</template>
|
|
<template v-else-if="orderData.rescueStatus > 2">
|
|
<view @click.stop="gettel" class="orderCardBtnGroupItem">联系司机</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker :show="show" :columns="columns" @confirm="confirms" @cancel="cancels" keyName="realName"></u-picker>
|
|
<u-modal :show="showDelete" title="是否确认删除" :showCancelButton="true" @confirm="deleteOk"
|
|
@cancel="deleteCancel"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request';
|
|
import {hasRole} from "@/utils/auth";
|
|
export default {
|
|
props: {
|
|
orderData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
status: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
statusStr() {
|
|
console.log('this.status: ',this.status);
|
|
if (this.status == '1') {
|
|
return '救援中'
|
|
} else if (this.status == '2') {
|
|
return '待支付'
|
|
} else if (this.status == '3') {
|
|
return '待取车'
|
|
} else if (this.status == '4') {
|
|
return '待评价'
|
|
} else if (this.status == '5') {
|
|
return '已完成'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
columns: [],
|
|
id: '',
|
|
show: false,
|
|
showDelete: false,
|
|
}
|
|
},
|
|
methods: {
|
|
hasRole,
|
|
getRescueTypeStr(){
|
|
if(this.orderData.rescueTypeStr){
|
|
return this.orderData.rescueTypeStr
|
|
}
|
|
switch (this.orderData.rescueType){
|
|
case '1':
|
|
return '拖车'
|
|
case '2':
|
|
return '送油'
|
|
case '3':
|
|
return '搭电'
|
|
case '4':
|
|
return '换胎'
|
|
case '5':
|
|
return '扣车'
|
|
case '6':
|
|
return '事故'
|
|
case '7':
|
|
return '秩序'
|
|
default:
|
|
return ''
|
|
}
|
|
},
|
|
onShowDetail() {
|
|
uni.navigateTo({
|
|
url: '/pages/details/details?id=' + this.orderData.id
|
|
})
|
|
},
|
|
// zhi指派司机
|
|
getzhipai() {
|
|
console.log('getzhipai: ', this.getzhipai);
|
|
this.getsjlist()
|
|
this.show = true
|
|
},
|
|
// 获取司机列表
|
|
getsjlist() {
|
|
this.columns = []
|
|
// 获取司机信息
|
|
request({
|
|
url: '/app/rescueInfo/driverInMap?searchValue=',
|
|
method: 'get',
|
|
}).then((res) => {
|
|
this.columns.push(res.data)
|
|
})
|
|
},
|
|
// 指派确定
|
|
confirms(e) {
|
|
console.log(e);
|
|
let data = {
|
|
rescueId: this.orderData.id,
|
|
driverId: e.value[0].id
|
|
}
|
|
request({
|
|
url: '/system/rescueInfo/designateDriver',
|
|
method: 'post',
|
|
params: data
|
|
}).then((res) => {
|
|
console.log('确认司机', res);
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '指派成功'
|
|
})
|
|
this.$emit('refresh')
|
|
}
|
|
})
|
|
this.show = false
|
|
},
|
|
// 指派取消
|
|
cancels() {
|
|
this.show = false
|
|
},
|
|
// 删除订单
|
|
deleteId() {
|
|
this.showDelete = true
|
|
return
|
|
},
|
|
deleteOk() {
|
|
request({
|
|
url: "/app/rescueInfo/delRescueInfo?id=" + this.orderData.id,
|
|
method: 'post',
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "删除成功"
|
|
})
|
|
this.$emit('deleteOk')
|
|
}
|
|
})
|
|
this.showDelete = false
|
|
},
|
|
deleteCancel() {
|
|
console.log("取消");
|
|
this.showDelete = false
|
|
},
|
|
// 联系司机
|
|
gettel() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.orderData.driverPhoneNum //仅为示例
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.orderCard {
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 22rpx;
|
|
box-shadow: 2rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.orderCardHeader {
|
|
line-height: 1.5;
|
|
|
|
.orderCardType {
|
|
background-color: #EAF1FE;
|
|
color: #317DFA;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx 0 16rpx 0;
|
|
font-size: 24rpx;
|
|
margin-right: 12rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.orderCardTitle {
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.orderCardStatus {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.orderCardStatusData {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 4rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.orderCardDistanceIcon,
|
|
.orderCardPredictIcon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.orderCardDistanceValue {
|
|
color: #919191;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.orderCardPredictDate {
|
|
color: #317DFA;
|
|
}
|
|
|
|
.orderCardFlag {
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
line-height: 1;
|
|
border-radius: 8rpx;
|
|
|
|
&.inRescue {
|
|
background-color: #ECF8EA;
|
|
color: #2FB821;
|
|
}
|
|
|
|
&.toRescued {
|
|
background-color: #FAE9E9;
|
|
color: #D42424;
|
|
}
|
|
}
|
|
|
|
.orderCardProcess {
|
|
|
|
|
|
}
|
|
.orderCardSendOrders,
|
|
.orderCardDriver,
|
|
.orderCardCarNo {
|
|
color: #317DFA;
|
|
}
|
|
|
|
.orderCardFooter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.orderCardDateTime {
|
|
color: #919191;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.orderCardBtnGroup {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 16rpx;
|
|
}
|
|
|
|
.orderCardBtnGroupItem {
|
|
background-color: #317DFA;
|
|
color: #fff;
|
|
border: 1px solid #317DFA;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 28rpx;
|
|
}
|
|
}
|
|
</style>
|