You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
11 KiB
305 lines
11 KiB
<template>
|
|
<div class="search">
|
|
<div class='waiceng' style="margin-top: 12px;">
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单号：{{orderData.numberCode}}</div>
|
|
<div style="flex:1;padding-left:10px;">配送单生成时间：{{orderData.deliveryInfo.createTime | formatDateTime}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="title">商家信息</div>
|
|
<div class='waiceng'>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">名称：{{orderData.shopName}}</div>
|
|
<div style="flex:1;padding-left:10px;">联系方式：{{orderData.shopPhone}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址：{{orderData.shopAddress}}</div>
|
|
<div style="flex:1;padding-left:10px;">出餐时间：{{orderData.shopMakeTime | formatDateTime}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="title">用户信息</div>
|
|
<div class='waiceng'>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{orderData.receiverName}}</div>
|
|
<div style="flex:1;padding-left:10px;">联系方式：{{orderData.receiverPhone}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">地址：{{orderData.receiverAddress}}
|
|
</div>
|
|
<div style="flex:1;padding-left:10px;">预计送达时间：{{orderData.deliveryInfo.mustFinishTime | formatDateTime}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title">商品信息</div>
|
|
<div class='waiceng' style="text-align: center;">
|
|
<div class="goods-table-row">
|
|
<div class="goods-table-cell">商品名称</div>
|
|
<div class="goods-table-cell">规格</div>
|
|
<div class="goods-table-cell">数量</div>
|
|
<div class="goods-table-cell last">总价</div>
|
|
</div>
|
|
<div class="goods-table-row" v-for="(item,index) in orderData.goodsList" :key="index">
|
|
<div class="goods-table-cell">{{item.productName}}</div>
|
|
<div class="goods-table-cell specs-cell">{{item.specs}}</div>
|
|
<div class="goods-table-cell">{{item.quantity}}</div>
|
|
<div class="goods-table-cell last">¥{{item.price}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">餐盒费</div>
|
|
<div class="goods-summary-price">¥{{orderData.packageFee}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">配送费</div>
|
|
<div class="goods-summary-price">¥{{orderData.deliveryFee}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">实付金额</div>
|
|
<div class="goods-summary-price">¥{{orderData.totalAmount}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">抵用券金额</div>
|
|
<div class="goods-summary-price">
|
|
¥{{orderData.couponDiscountFee== null?0.00:orderData.couponDiscountFee}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">锦鲤免单金额</div>
|
|
<div class="goods-summary-price">¥{{orderData.freeAmount > 0? orderData.freeAmount : 0}}</div>
|
|
</div>
|
|
<div class="goods-table-row">
|
|
<div class="goods-summary-label">实付金额</div>
|
|
<div class="goods-summary-price">¥{{orderData.totalAmount}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="title">配送流程</div>
|
|
<div class='waiceng' style="text-align: center;">
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">状态</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">时间</div>
|
|
<div style="flex:1;padding-left:10px;">角色</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">用户下单</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.createTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;"></div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员接单</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.deliveryInfo.acceptTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家出餐</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.shopMakeTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.shopName}}</div>
|
|
</div>
|
|
<div class="nei1" v-if="isTransferOrder">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">商家送达中转点</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.deliveryInfo.transferArriveTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.shopName}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{isTransferOrder ? '配送员到达中转点' : '已到店'}}</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.deliveryInfo.arriveTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已取货</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.deliveryInfo.getTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送员已送达</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{orderData.deliveryInfo.finishTime | formatDateTime}}</div>
|
|
<div style="flex:1;padding-left:10px;">{{orderData.deliveryInfo.workerName}}</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">送单时长</div>
|
|
<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.acceptTime !=null?orderData.deliveryInfo.acceptTime:1,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
|
|
</div>
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单总计时</div>
|
|
<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.createTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
|
|
</div>
|
|
<div class="nei1" v-if="getTimeoutMinutes(orderData.deliveryInfo) >= 0">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">超时</div>
|
|
<div style="width: 33%;padding-left:10px;">{{getTimeoutMinutes(orderData.deliveryInfo)}}分钟</div>
|
|
</div>
|
|
</div>
|
|
<div class="title" v-if="reassignRecords.length">转单记录</div>
|
|
<div class='waiceng' style="text-align: center;" v-if="reassignRecords.length">
|
|
<div class="nei1">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">转单前配送员</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">转单后配送员</div>
|
|
<div style="flex:1;padding-left:10px;">转单时间</div>
|
|
</div>
|
|
<div class="nei1" v-for="item in reassignRecords" :key="item.id">
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{formatWorkerInfo(item.oldWorkerName, item.oldWorkerPhone, item.oldWorkerId)}}
|
|
</div>
|
|
<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">
|
|
{{formatWorkerInfo(item.newWorkerName, item.newWorkerPhone, item.newWorkerId)}}
|
|
</div>
|
|
<div style="flex:1;padding-left:10px;">{{item.reassignTime | formatDateTime}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getOrderDetail,
|
|
getDeliveryReassignRecords,
|
|
} from "@/api/index";
|
|
export default {
|
|
name: "logisticsAddress",
|
|
data() {
|
|
return {
|
|
orderData: {},
|
|
reassignRecords: [],
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
isTransferOrder() {
|
|
const deliveryInfo = this.orderData.deliveryInfo || {};
|
|
return this.orderData.transferDelivery == 1 || deliveryInfo.transferDelivery == 1;
|
|
}
|
|
},
|
|
filters: {
|
|
formatDateTime(isoString) {
|
|
if (!isoString) return ''
|
|
const date = new Date(isoString)
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
}
|
|
},
|
|
methods: {
|
|
initRecharge(data) {
|
|
this.orderDetail(data.orderId)
|
|
},
|
|
getMinutesDiff(time1, time2) {
|
|
// 将参数转换为 Date 对象，参数为 1 时取当前时间
|
|
const date1 = time1 === 1 ? new Date() : new Date(time1);
|
|
const date2 = time2 === 1 ? new Date() : new Date(time2);
|
|
|
|
// 计算毫秒差，取绝对值，转换为分钟，向上取整
|
|
const diffMs = Math.abs(date2 - date1);
|
|
const diffMinutes = Math.ceil(diffMs / (1000 * 60));
|
|
|
|
return diffMinutes;
|
|
},
|
|
getTimeoutMinutes(deliveryInfo) {
|
|
if (!deliveryInfo || !deliveryInfo.mustFinishTime) return 0;
|
|
const mustFinishTime = new Date(deliveryInfo.mustFinishTime);
|
|
const endTime = deliveryInfo.finishTime ? new Date(deliveryInfo.finishTime) : new Date();
|
|
if (isNaN(mustFinishTime.getTime()) || isNaN(endTime.getTime())) return 0;
|
|
return Math.ceil((endTime - mustFinishTime) / (1000 * 60));
|
|
},
|
|
formatWorkerInfo(name, phone, workerId) {
|
|
if (!name && !phone && !workerId) return "无（抢单大厅指派）";
|
|
if (name && phone) return `${name}（${phone}）`;
|
|
return name || phone || workerId;
|
|
},
|
|
orderDetail(id) {
|
|
getOrderDetail(id).then((res) => {
|
|
this.loading = false;
|
|
if (res.success) {
|
|
this.orderData = res.result
|
|
const deliveryId = this.orderData.deliveryInfo && this.orderData.deliveryInfo.id;
|
|
this.getReassignRecords(deliveryId);
|
|
}
|
|
});
|
|
|
|
},
|
|
getReassignRecords(deliveryId) {
|
|
this.reassignRecords = [];
|
|
if (!deliveryId) return;
|
|
getDeliveryReassignRecords({ deliveryId }).then((res) => {
|
|
if (res.success) {
|
|
this.reassignRecords = res.result || [];
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
//@import "@/styles/table-common.less";
|
|
.nei1 {
|
|
display: flex;
|
|
border: 1px solid #eee;
|
|
min-height: 30px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.nei1 > div {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.goods-table-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-height: 30px;
|
|
border: 1px solid #eee;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.goods-table-cell {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 5px 10px;
|
|
border-right: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.goods-table-cell.last {
|
|
border-right: 0;
|
|
}
|
|
|
|
.specs-cell {
|
|
white-space: normal;
|
|
}
|
|
|
|
.goods-summary-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 5px 10px;
|
|
border-right: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.goods-summary-price {
|
|
width: 25%;
|
|
min-width: 0;
|
|
padding: 5px 10px;
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|