lanan-app/components/orderCard/OrderCardRevoke.vue
2025-09-25 15:45:12 +08:00

1516 lines
36 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="orderCard" @click="onShowDetail">
<!-- <view class="orderCardHeader">
<text class="orderCardType">{{ getRescueTypeStr() }}</text>
<text class="orderCardTitle">{{ orderData.rescuePosition }}</text>
</view> -->
<view class="orderInfoContainer">
<view class="infoRow" style="margin-top: 20rpx;">
<text class="infoLabel" style="color: black; font-weight: bold; font-size: 32rpx;">撤销信息</text>
</view>
<view class="infoRow">
<text class="infoLabel">撤销人:</text>
<text class="infoValue">{{ orderData.revokeUserName || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">撤销时间:</text>
<text class="infoValue">{{ formatTimestamp(orderData.revokeTime) || '暂无数据' }}</text>
</view>
</view>
<view class="divider"></view>
<view class="orderInfoContainer" v-if="activeTab === 0 || isExpanded">
<view class="infoRow" style="margin-top: 20rpx;">
<text class="infoLabel" style="color: black; font-weight: bold; font-size: 32rpx;">司机信息</text>
</view>
<view class="infoRow">
<text class="infoLabel">司机姓名:</text>
<text class="infoValue">{{ orderData.driverName || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">司机手机号:</text>
<text class="infoValue">{{ orderData.driverPhoneNum || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">救援车辆:</text>
<text class="infoValue">{{ orderData.driverCarNum || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">救援类型:</text>
<text class="infoValue">{{ orderData.rescueTypeStr || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">开始时间:</text>
<text class="infoValue">{{ formatTimestamp(orderData.rescueStartTime) || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">完成时间:</text>
<text class="infoValue">{{ formatTimestamp(orderData.rescueEndTime) || '暂无数据' }}</text>
</view>
<!-- <view class="timeInfoRow"> -->
<view class="infoRow">
<text class="infoLabel">耗时:</text>
<text
class="infoValue">{{ calculateDuration(orderData.rescueStartTime, orderData.rescueEndTime) }}</text>
</view>
</view>
<view class="orderInfoContainer" v-if="activeTab === 1 || isExpanded">
<view class="infoRow" style="margin-top: 20rpx;">
<text class="infoLabel" style="color: black; font-weight: bold; font-size: 32rpx;">业务信息</text>
</view>
<view class="infoRow">
<text class="infoLabel">渠道:</text>
<text class="infoValue">{{ orderData.channel || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">来源:</text>
<text class="infoValue">{{ orderData.source || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障车经办人:</text>
<text class="infoValue">{{ orderData.connectionName || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">经办人电话:</text>
<text class="infoValue">{{ orderData.connectionPhone || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">调度:</text>
<text class="infoValue">{{ orderData.secondDispatchName || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">当前状态</text>
<text class="infoValue">{{ orderData.rescueStatusStr || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">收款状态:</text>
<text class="infoValue">{{ orderData.orderStatusStr || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">收款人:</text>
<text class="infoValue">{{ orderData.orderSigningRealName || '暂无数据' }}</text>
</view>
</view>
<view class="orderInfoContainer" v-if="activeTab === 2 || isExpanded">
<view class="infoRow" style="margin-top: 20rpx;">
<text class="infoLabel" style="color: black; font-weight: bold; font-size: 32rpx;">客户信息</text>
</view>
<view class="infoRow">
<text class="infoLabel">车牌号:</text>
<text class="infoValue">{{ orderData.licenseNum || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障车经办人:</text>
<text class="infoValue">{{ orderData.connectionName || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">联系电话:</text>
<text class="infoValue">{{ orderData.connectionPhone || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">品牌:</text>
<text class="infoValue">{{ orderData.carBrand || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">规格:</text>
<text class="infoValue">{{ orderData.carTypeStr || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">是否为新能源:</text>
<text
class="infoValue">{{ orderData.ifNewEnergy === '1' ? '是' : orderData.ifNewEnergy === '0' ? '否' : '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障类型:</text>
<text class="infoValue">{{ orderData.faultType || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障现象:</text>
<text class="infoValue">{{ orderData.phenomenon || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障现象备注:</text>
<text class="infoValue">{{ orderData.faultPhenomenon || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">故障地点:</text>
<text class="infoValue">{{ orderData.rescuePosition || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">救援需求:</text>
<text class="infoValue">{{ orderData.rescueNeeds || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">预估下车地点:</text>
<text class="infoValue">{{ orderData.estimateDownCar || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">预估费用:</text>
<text class="infoValue">{{ orderData.estimateMoney || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">实际下车地点:</text>
<text class="infoValue">{{ orderData.estimateDownCar || '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">公里数:</text>
<text
class="infoValue">{{ orderData.startScale && orderData.endScale ? (orderData.endScale - orderData.startScale) : '暂无数据' }}</text>
</view>
<view class="infoRow">
<text class="infoLabel">实际费用:</text>
<text
class="infoValue">{{ orderData.setMoney != null ? (orderData.setMoney / 100) : '暂无数据' }}</text>
</view>
</view>
<view class="orderCardFooter">
<text class="orderCardDateTime">{{ orderData.rescueTime || orderData.createTime || "" }}</text>
<view class="orderCardBtnGroup">
<template v-if="orderData.driverPhoneNum != null">
<view @click.stop="gettel" class="orderCardBtnGroupItem">联系司机</view>
</template>
<template v-if="showDispatchButton || checkPermi(['rescue_dispatch_process_btn'])">
<view @click.stop="viewDispatchDetails" class="orderCardDispatchItem">调度流程</view>
</template>
</view>
</view>
<view class="expand-control" @click.stop="toggleExpand">
<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}全部信息</text>
<u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#317DFA" size="16"></u-icon>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request';
import {
getTenantId,
hasRole,
hasRoleNew
} from "@/utils/auth";
import {
getDictDataById
} from "@/utils/utils";
import {
checkPermi,
checkRole
} from "@/utils/permission";
export default {
props: {
orderData: {
type: Object,
default: () => {
return {}
}
},
activeTab: Number,
status: {
type: [String, Number],
default: ''
},
brandList: {
type: Array,
default: () => []
},
staffList: {
type: Array,
default: () => []
},
},
computed: {
showDispatchButton() {
// 满足以下任一条件即可显示
return (
this.userinfo.id == this.orderData.secondDispatchId ||
this.hasRoleNew('jiuyuan') ||
(this.hasRoleNew('ddzx') && this.orderData.dispatchLevel == 2)
)
}
},
data() {
return {
columns: [],
firstColumns: [],
secondColumns: [],
// secondDriverColumns: [],
id: '',
show: false,
firstShow: false,
secondShow: false,
showDelete: false,
showRevoke: false,
toRepairShow: false,
pinpaiShow: false,
fuwuShow: false,
formData: {
brandAndModel: []
},
sectionRoadName: '未知',
isExpanded: false,
showDispatcherOptionsSheet: false, // 控制选项弹窗显示
// 标记是否是二级调度员直接指派
isSecondDispatcherDirect: false,
dispatcherActions: [ // 指派选项
{
name: '二级调度',
value: 'second'
},
{
name: '司机',
value: 'driver'
}
],
userinfo: {},
// 新增确认订单完成相关数据
showConfirmComplete: false,
completeRemark: '',
showAgreeHangAccount: false, // 控制同意挂账弹窗显示
showConfirmHangAccount: false, // 控制确认挂账信息弹窗显示
showLookAgreeHangAccount: false,
showLookConfirmHangAccount: false,
assignLoading: false, // 指派按钮加载状态
}
},
created() {
// this.fetchSectionRoadName();
// this.getFirstDispatcher()
// this.getSecondDispatcher()
this.userinfo = uni.getStorageSync('userInfo')
console.log('userinfo', this.userinfo)
},
watch: {
activeTab(newVal) {
console.log('选项卡切换了:', newVal);
}
},
methods: {
hasRole,
hasRoleNew,
checkPermi,
checkRole,
toggleExpand() {
this.isExpanded = !this.isExpanded;
},
onPinpaiConfirm(e) {
console.log(e)
this.formData.brandName = e.value[0].brandName
this.formData.brandAndModel[0] = e.value[0].id
this.pinpaiShow = false
},
onFuwuConfirm(e) {
this.formData.adviserName = e.value[0].name
this.formData.adviserId = e.value[0].id
this.formData.userId = e.value[0].userId
this.fuwuShow = false
},
showRepair() {
if (this.orderData.connectionName) {
this.formData.name = this.orderData.connectionName
}
if (this.orderData.connectionPhone) {
this.formData.phone = this.orderData.connectionPhone
}
this.toRepairShow = true
},
toRepair() {
let data = JSON.parse(JSON.stringify(this.formData))
data.id = this.orderData.id
console.log(data, 'data');
request({
url: '/app/rescueInfo/toRepair',
method: 'post',
params: data
}).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '操作成功'
})
this.toRepairShow = false
this.$emit('refresh')
}
})
},
onShowDetail() {
uni.navigateTo({
url: '/pages/details/details?id=' + this.orderData.id
})
},
getzhipai() {
console.log('getzhipai: ', this.getzhipai);
if (hasRole('second_dispatcher')) {
this.getSecondDriverlist()
} else {
this.getsjlist()
}
this.show = true
},
getSecondList() {
this.getSecondDispatcher()
this.secondShow = true
},
dispatcherSelect() {
this.firstShow = true
},
// 显示指派选项弹窗
showDispatcherOptions() {
// 如果是二级调度员,直接指派司机
if (hasRoleNew('second_dispatcher')) {
this.isSecondDispatcherDirect = true; // 标记为二级调度员直接指派
this.getzhipai(); // 直接显示司机选择
} else {
this.isSecondDispatcherDirect = false; // 标记为正常流程
this.showDispatcherOptionsSheet = true;
console.log('hasRole', hasRole('ddzx'))
}
},
// 处理指派选项选择
onDispatcherOptionSelect(e) {
if (e.value === 'second') {
// 显示二级调度
this.getSecondList()
} else if (e.value === 'driver') {
// 显示司机
this.getzhipai()
}
this.showDispatcherOptionsSheet = false;
},
getsjlist() {
this.columns = []
request({
url: '/app/rescueInfo/driverInMap?searchValue=',
method: 'get',
}).then((res) => {
this.columns.push(res.data)
})
},
getSecondDriverlist() {
this.columns = []
request({
url: '/app/rescueInfo/secondDriverInMap?searchValue=',
method: 'get',
}).then((res) => {
this.columns.push(res.data)
})
},
getFirstDispatcher() {
this.firstColumns = []
const tenantId = getTenantId()
request({
url: `/company/staff/staffListByRoleCode?tenantId=${tenantId}&code=ddzx`,
method: 'get',
}).then((res) => {
this.firstColumns.push(res.data)
console.log('firstRes', res)
})
},
getSecondDispatcher() {
this.secondColumns = []
const tenantId = getTenantId()
request({
url: `/company/staff/staffListByRoleCode?tenantId=${tenantId}&code=second_dispatcher`,
method: 'get',
}).then((res) => {
this.secondColumns.push(res.data)
console.log('secondRes', res)
})
},
/* 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
}, */
async confirms(e) {
console.log(e);
// 开始加载
this.assignLoading = true;
try {
// 先执行指派司机接口
let data = {
rescueId: this.orderData.id,
driverId: e.value[0].id
}
const assignResult = await request({
url: '/system/rescueInfo/designateDriver',
method: 'post',
params: data
});
console.log('确认司机', assignResult);
if (assignResult.code == 200) {
// 如果角色为ddzx再执行编辑接口
if (hasRole('ddzx')) {
let editData = {
...this.orderData,
secondDispatchId: this.userinfo.id,
secondDispatchName: this.userinfo.nickname
}
const editResult = await request({
url: '/app/rescueInfo/edit',
method: 'post',
data: editData
});
console.log('ddzx更新二级调度信息', editResult);
if (editResult.code == 200) {
// 使用返回的msg信息如果没有则使用默认提示
uni.showToast({
title: assignResult.msg || '指派成功'
})
this.$emit('refresh')
} else {
// 显示错误信息
uni.showToast({
title: editResult.msg || '指派失败',
icon: 'none'
});
}
} else {
// 非ddzx角色直接显示成功使用返回的msg信息
uni.showToast({
title: assignResult.msg || '指派成功'
})
this.$emit('refresh')
}
} else {
// 显示错误信息
uni.showToast({
title: assignResult.msg || '指派失败',
icon: 'none'
});
}
} catch (error) {
console.error('指派操作失败', error);
uni.showToast({
title: assignResult.msg || '指派失败,请重试',
icon: 'none'
});
} finally {
// 无论成功失败,都关闭加载状态
this.assignLoading = false;
this.show = false;
}
},
/* secondConfirms(e) {
let data = {
...this.orderData,
secondDispatchId: e.value[0].id,
secondDispatchName: e.value[0].nickname
}
request({
url: '/app/rescueInfo/edit',
method: 'post',
data: data
}).then((res) => {
console.log('确认司机', res);
if (res.code == 200) {
uni.showToast({
title: '指派成功'
})
this.$emit('refresh')
}
})
this.secondShow = false
}, */
async secondConfirms(e) {
this.assignLoading = true;
try {
let data = {
...this.orderData,
secondDispatchId: e.value[0].id,
secondDispatchName: e.value[0].nickname
}
const res = await request({
url: '/app/rescueInfo/edit',
method: 'post',
data: data
});
console.log('确认二级调度', res);
if (res.code == 200) {
uni.showToast({
title: res.msg || '指派成功'
})
this.$emit('refresh')
} else {
// 显示错误信息
uni.showToast({
title: res.msg || '指派失败',
icon: 'none'
});
}
} catch (error) {
console.error('指派失败', error);
uni.showToast({
title: res.msg || '指派失败,请重试',
icon: 'none'
});
} finally {
this.assignLoading = false;
this.secondShow = false;
}
},
cancels() {
this.assignLoading = false; // 重置加载状态
this.show = false;
// 只有正常流程(非二级调度员直接指派)才重新打开指派类型选择
if (!this.isSecondDispatcherDirect) {
this.showDispatcherOptions();
} else {
// 二级调度员直接指派时,直接关闭,不重新打开选择框
this.isSecondDispatcherDirect = false; // 重置状态
}
},
secondCancels() {
this.assignLoading = false; // 重置加载状态
this.secondShow = false
this.showDispatcherOptions();
},
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
},
revokeId() {
this.showRevoke = true
return
},
revokeOk() {
request({
url: "/app/rescueInfo/revokeRescueInfo?id=" + this.orderData.id,
method: 'put'
}).then(res => {
if (res.code == 200) {
uni.showToast({
title: "撤销成功"
})
this.$emit('revokeOk')
}
})
this.showRevoke = false
},
revokeCancel() {
console.log("取消");
this.showRevoke = false
},
gettel() {
uni.makePhoneCall({
phoneNumber: this.orderData.driverPhoneNum
});
},
viewDispatchDetails() {
uni.navigateTo({
url: '/pages/details/dispatchDetails?id=' + this.orderData.id
});
},
// 显示确认订单完成弹窗
showConfirmModal() {
this.completeRemark = '';
this.showConfirmComplete = true;
},
// 取消确认
cancelComplete() {
this.completeRemark = '';
this.showConfirmComplete = false;
},
// 确认订单完成
async confirmComplete() {
console.log('this.orderData', this.orderData)
if (this.orderData.feeType == 2 && !this.orderData.secondDispatchId && !this.orderData
.secondDispatchName) {
uni.showToast({
title: '请先确认挂账信息',
icon: 'none'
});
return;
}
let saveData = {
rescueInfoId: this.orderData.id,
title: '调度 · 确认订单已完成',
remark: this.completeRemark,
autoRemark: '确认人: ' + this.userinfo.nickname
}
let rescueData = {
id: this.orderData.id,
feeType: this.orderData.feeType,
carType: this.orderData.carType,
isWeiXiu: this.orderData.isWeiXiu,
rescueType: this.orderData.rescueType,
isAppointment: this.orderData.isAppointment,
isKouChe: this.orderData.isKouChe,
rescuePosition: this.orderData.rescuePosition,
rescueStatus: '5',
}
try {
// 等待两个API调用完成
const [saveResult, rescueResult] = await Promise.all([
this.saveConfirmMsg(saveData),
this.rescueInfoEdit(rescueData)
]);
if (saveResult && rescueResult) {
uni.showToast({
title: '订单完成确认成功',
icon: 'success'
});
this.$emit('refresh');
} else {
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
}
} catch (error) {
console.error('确认订单完成失败:', error);
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
} finally {
this.completeRemark = '';
this.showConfirmComplete = false;
}
},
/* confirmComplete() {
console.log('this.orderData', this.orderData)
let saveData = {
rescueInfoId: this.orderData.id,
title: '调度 · 确认订单已完成',
remark: this.completeRemark,
autoRemark: '确认人: ' + this.userinfo.nickname
}
this.saveConfirmMsg(saveData)
let rescueData = {
id: this.orderData.id,
feeType: this.orderData.feeType,
carType: this.orderData.carType,
isWeiXiu: this.orderData.isWeiXiu,
rescueType: this.orderData.rescueType,
isAppointment: this.orderData.isAppointment,
isKouChe: this.orderData.isKouChe,
rescuePosition: this.orderData.rescuePosition,
rescueStatus: '5',
}
this.rescueInfoEdit(rescueData)
this.completeRemark = '';
this.showConfirmComplete = false;
}, */
// 更新救援信息
rescueInfoEdit(rescueData) {
return new Promise((resolve, reject) => {
request({
url: '/app/rescueInfo/edit',
method: 'post',
data: rescueData
}).then((res) => {
console.log(res);
if (res.code == 200) {
resolve(true);
} else {
resolve(false);
}
}).catch((error) => {
console.error('rescueInfoEdit error:', error);
reject(error);
});
});
},
/* rescueInfoEdit(rescueData) {
request({
url: '/app/rescueInfo/edit',
method: 'post',
data: rescueData
}).then((res) => {
console.log(res);
if (res.code == 200) {
uni.showToast({
title: '修改成功',
icon: 'none'
})
this.show = false
this.getrescueDetail(this.detailsData.id)
}
})
}, */
// 更新订单信息
orderInfoEdit(orderData) {
return new Promise((resolve, reject) => {
request({
url: '/rescue/orderInfo/edit',
method: 'post',
data: orderData
}).then((res) => {
console.log(res);
if (res.code == 200) {
resolve(true);
} else {
resolve(false);
}
}).catch((error) => {
console.error('orderInfoEdit error:', error);
reject(error);
});
});
},
/* orderInfoEdit(orderData) {
request({
url: '/rescue/orderInfo/edit',
method: 'post',
data: orderData
}).then((res) => {
console.log(res);
})
}, */
// 存储节点信息
saveConfirmMsg(saveData) {
return new Promise((resolve, reject) => {
request({
url: '/app/driver/uploadDetailByDriver',
method: 'post',
data: saveData
}).then((res) => {
console.log(res);
if (res.code == 200) {
resolve(true);
} else {
resolve(false);
}
}).catch((error) => {
console.error('saveConfirmMsg error:', error);
reject(error);
});
});
},
/* saveConfirmMsg(saveData) {
request({
url: '/app/driver/uploadDetailByDriver',
method: 'post',
data: saveData
}).then((res) => {
console.log(res);
})
}, */
// 显示同意挂账弹窗
showAgreeModal() {
this.showAgreeHangAccount = true;
},
// 同意挂账
async agreeHangAccount() {
console.log('同意挂账', this.orderData.id);
let rescueData = {
id: this.orderData.id,
feeType: '2',
carType: this.orderData.carType,
isWeiXiu: this.orderData.isWeiXiu,
rescueType: this.orderData.rescueType,
isAppointment: this.orderData.isAppointment,
isKouChe: this.orderData.isKouChe,
rescuePosition: this.orderData.rescuePosition,
rescueStatus: this.orderData.rescueStatus,
}
let orderData = {
id: this.orderData.orderId,
payType: 'qd'
}
try {
// 等待两个API调用完成
const [rescueResult, orderResult] = await Promise.all([
this.rescueInfoEdit(rescueData),
this.orderInfoEdit(orderData)
]);
if (rescueResult && orderResult) {
uni.showToast({
title: '同意挂账成功',
icon: 'success'
});
this.$emit('refresh');
} else {
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
}
} catch (error) {
console.error('同意挂账失败:', error);
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
} finally {
this.showAgreeHangAccount = false;
}
},
/* agreeHangAccount() {
console.log('同意挂账', this.orderData.id);
let rescueData = {
id: this.orderData.id,
feeType: '2',
carType: this.orderData.carType,
isWeiXiu: this.orderData.isWeiXiu,
rescueType: this.orderData.rescueType,
isAppointment: this.orderData.isAppointment,
isKouChe: this.orderData.isKouChe,
rescuePosition: this.orderData.rescuePosition,
rescueStatus: this.orderData.rescueStatus,
}
this.rescueInfoEdit(rescueData)
let orderData = {
id: this.orderData.orderId,
payType: 'qd'
}
this.orderInfoEdit(orderData)
this.showAgreeHangAccount = false;
}, */
// 取消同意挂账
cancelAgreeHangAccount() {
this.showAgreeHangAccount = false;
},
// 显示确认挂账信息弹窗
showConfirmHangAccountModal() {
this.showConfirmHangAccount = true;
},
// 取消查看同意挂账
cancelLookAgreeHangAccount() {
this.showLookAgreeHangAccount = false;
},
// 显示查看确认挂账信息弹窗
showLookConfirmHangAccountModal() {
this.showLookConfirmHangAccount = true;
},
// 确认挂账信息
async confirmHangAccountReceived() {
console.log('确认挂账信息', this.orderData.id);
let orderData = {
id: this.orderData.orderId,
orderSigningChargeId: this.userinfo.id,
orderSigningChargeName: this.userinfo.nickname,
orderSigningRemark: this.completeRemark,
}
try {
const result = await this.orderInfoEdit(orderData);
if (result) {
uni.showToast({
title: '确认挂账信息成功',
icon: 'success'
});
this.$emit('refresh');
} else {
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
}
} catch (error) {
console.error('确认挂账信息失败:', error);
uni.showToast({
title: '操作失败,请重试',
icon: 'none'
});
} finally {
this.showConfirmHangAccount = false;
this.completeRemark = '';
}
},
/* confirmHangAccountReceived() {
console.log('确认挂账信息', this.orderData.id);
let orderData = {
id: this.orderData.orderId,
orderSigningChargeId: this.userinfo.id,
orderSigningChargeName: this.userinfo.nickname,
orderSigningRemark: this.completeRemark,
}
this.orderInfoEdit(orderData)
this.showConfirmHangAccount = false;
this.completeRemark = ''
}, */
// 取消确认挂账
cancelConfirmHangAccount() {
this.showConfirmHangAccount = false;
this.completeRemark = '';
},
// 取消确认挂账
cancelLookConfirmHangAccount() {
this.showLookConfirmHangAccount = false;
},
// 判断是否为数字ID
isNumeric(value) {
return /^\d+$/.test(value);
},
// 格式化时间戳
formatTimestamp(timestamp) {
if (!timestamp) return null;
const date = new Date(timestamp);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
},
// 计算耗时
calculateDuration(startTime, endTime) {
if (!startTime) return '暂无数据';
if (!endTime) return '暂无数据'
const start = new Date(startTime);
const end = endTime ? new Date(endTime) : new Date();
// 计算时间差(毫秒)
const diffMs = end - start;
// 如果结束时间小于开始时间,返回未知
if (diffMs < 0) return '时间数据异常';
// 转换为小时、分钟
const hours = Math.floor(diffMs / (1000 * 60 * 60));
const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
if (hours > 0) {
return `${hours}小时${minutes}分钟`;
} else {
return `${minutes}分钟`;
}
},
// 获取渠道名称
/* async fetchSectionRoadName() {
const rawValue = this.orderData.sectionRoad;
if (!rawValue) {
this.sectionRoadName = '暂无数据';
return;
}
// 如果是数字,按 ID 查询字典
if (this.isNumeric(rawValue)) {
console.log('rawValue', rawValue)
try {
const dictData = await getDictDataById(rawValue);
this.sectionRoadName = dictData.label || rawValue;
} catch (error) {
console.error("字典查询失败,使用原始值:", error);
this.sectionRoadName = rawValue;
}
} else {
// 非数字,直接使用文字
this.sectionRoadName = rawValue;
}
}, */
}
}
</script>
<style lang="scss" scoped>
.orderCard {
background-color: #fff;
padding: 32rpx;
border-radius: 16rpx;
display: flex;
flex-direction: column;
row-gap: 22rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
margin-bottom: 24rpx;
position: relative;
}
.orderInfoContainer {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.infoRow {
display: flex;
font-size: 30rpx;
line-height: 1.5;
}
.infoLabel {
color: #666;
width: 250rpx;
}
.infoValue {
color: #333;
flex: 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;
}
}
.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: 10rpx 20rpx;
border-radius: 6rpx;
font-size: 26rpx;
}
.orderCardDispatchItem {
padding: 10rpx 20rpx;
background-color: #67c23a;
color: #fff;
border: 1px solid #67c23a;
border-radius: 6rpx;
font-size: 26rpx;
}
.orderCardBtnRevork {
/* display: flex;
justify-content: center;
align-items: center; */
background-color: red;
color: #fff;
border: 1px solid red;
padding: 10rpx 20rpx;
border-radius: 28rpx;
// width: 160rpx;
}
}
/* 司机信息部分样式 */
.driverInfoHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.driverName {
font-size: 32rpx;
// font-weight: bold;
color: black;
}
.driverPhone {
font-size: 28rpx;
color: black;
}
}
.driverCarInfo {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
border-top: 4rpx dashed #e2e5ea;
padding-top: 12rpx;
.carNumber {
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.rescueType {
// background-color: #EAF1FE;
color: black;
padding: 8rpx 16rpx;
border-radius: 16rpx;
font-size: 28rpx;
}
}
.timeInfoContainer {
display: flex;
flex-direction: column;
gap: 12rpx;
.timeInfoRow {
display: flex;
justify-content: space-between;
font-size: 26rpx;
.timeLabel {
color: #666;
}
.timeValue {
color: #333;
}
}
}
// 展开控制按钮样式
.expand-control {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
padding: 16rpx;
border-top: 1rpx solid #eee;
color: #317DFA;
.expand-text {
font-size: 28rpx;
margin-right: 10rpx;
}
}
/* 确认订单完成按钮样式 */
.confirm-order-btn-container {
display: flex;
justify-content: center;
}
.confirm-order-btn {
background-color: #317DFA;
color: #fff;
padding: 16rpx 32rpx;
border-radius: 28rpx;
font-size: 28rpx;
text-align: center;
width: 100%;
box-shadow: 0 4rpx 8rpx rgba(49, 125, 250, 0.3);
}
.confirm-order-btn:active {
background-color: #2563c8;
}
/* 弹窗内容样式 */
.confirm-modal-content {
padding: 20rpx;
width: 100%;
}
.modal-label {
display: flex;
width: 100%;
justify-content: start;
margin-bottom: 20rpx;
font-size: 28rpx;
color: #333;
}
.remark-input {
margin-top: 10rpx;
}
//、、、、、、、、、、、、、、、、、、、、、、
.confirm-order-btn-container-gz {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
gap: 20rpx;
.confirm-order-btn-gz {
flex: 1;
background-color: #317DFA;
color: #fff;
padding: 16rpx 32rpx;
border-radius: 28rpx;
font-size: 28rpx;
text-align: center;
}
.confirm-hang-account-gz {
background-color: #19be6b;
}
.confirm-hang-account-ygz {
background-color: #b5bbbf;
}
.confirm-order-btn-gz:active {
background-color: #2563c8;
}
.confirm-hang-account-gz:active {
background-color: #18b566;
}
}
// 弹窗内容样式
.modal-content {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.modal-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.amount-display {
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 40rpx;
width: 100%;
.amount-label {
font-size: 30rpx;
color: #333;
}
.amount-value {
font-size: 36rpx;
font-weight: bold;
color: #fa3534;
}
.amount-value-two {
font-size: 36rpx;
color: #000000;
}
}
.hang-account-buttons {
display: flex;
justify-content: space-between;
width: 100%;
gap: 20rpx;
.hang-account-btn {
flex: 1;
padding: 20rpx 0;
border-radius: 12rpx;
text-align: center;
font-size: 28rpx;
&.received {
background-color: #19be6b;
color: #fff;
}
&.not-received {
background-color: #ff9900;
color: #fff;
}
&.cancel {
background-color: #f2f2f2;
color: #333;
}
}
}
// 按钮组容器
.button-group-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20rpx;
margin-top: 20rpx;
flex-wrap: wrap;
}
// 挂账按钮组
.hang-account-btn-group {
display: flex;
flex: 1;
min-width: 0;
.hang-account-btn {
flex: 1;
padding: 16rpx 24rpx;
border-radius: 28rpx;
font-size: 28rpx;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// 不同状态下的样式
&.agree {
background-color: #317DFA;
color: #fff;
box-shadow: 0 4rpx 8rpx rgba(49, 125, 250, 0.3);
}
&.confirm {
background-color: #19be6b;
color: #fff;
box-shadow: 0 4rpx 8rpx rgba(25, 190, 107, 0.3);
}
&.confirmed {
background-color: #b5bbbf;
color: #fff;
cursor: default;
}
// 活动状态
&:active:not(.confirmed) {
opacity: 0.8;
transform: translateY(2rpx);
}
}
}
// 完成订单按钮
.complete-order-btn {
flex-shrink: 0;
flex: 1;
.complete-btn {
background-color: #317DFA;
color: #fff;
padding: 16rpx 32rpx;
border-radius: 28rpx;
font-size: 28rpx;
text-align: center;
white-space: nowrap;
box-shadow: 0 4rpx 8rpx rgba(49, 125, 250, 0.3);
&:active {
background-color: #2563c8;
transform: translateY(2rpx);
}
}
}
.orderCardBtnGroupItem {
&.loading {
opacity: 0.7;
pointer-events: none; // 防止重复点击
}
}
// 确保加载指示器居中
.uni-load-more {
display: flex;
justify-content: center;
align-items: center;
:deep(.uni-load-more__content) {
margin: 0;
}
}
.divider {
height: 2px;
background-color: #e0e0e0;
margin: 16rpx 0 0 0;
width: 100%;
}
</style>