school-manage/src/views/app/business/logistics/logisticsAddress.vue

<template>
	<div class="search">
		<div class='waiceng' style="margin-top: 20px;">
			<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.id}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">订单编号：{{orderData.id}}</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="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;border-right:1px solid #eee;">数量</div>
				<div style="flex:1;padding-left:10px;">总价</div>
			</div>
			<div class="nei1" v-for="(item,index) in orderData.goodsList" :key="index">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.productName}}</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.specs}}</div>
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">{{item.quantity}}</div>
				<div style="flex:1;padding-left:10px;">¥{{item.price}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">餐盒费</div>
				<div style="width:25%;padding-left:10px;">¥{{orderData.packageFee}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">配送费</div>
				<div style="width:25%;padding-left:10px;">¥{{orderData.deliveryFee}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">总计</div>
				<div style="width:25%;padding-left:10px;">¥{{orderData.totalAmount}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">抵用券金额</div>
				<div style="width:25%;padding-left:10px;">
					¥{{orderData.couponDiscountFee== null?0.00:orderData.couponDiscountFee}}</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">活动优惠金额</div>
				<div style="width:25%;padding-left:10px;">¥0.00</div>
			</div>
			<div class="nei1">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">实付金额</div>
				<div style="width:25%;padding-left:10px;">¥{{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.shopMakeTime | 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;">配送员接单</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.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">
				<div style="flex:1;padding-left:10px;border-right:1px solid #eee;">超时</div>
				<div style="width: 33%;padding-left:10px;">{{getMinutesDiff(orderData.deliveryInfo.mustFinishTime,orderData.deliveryInfo.finishTime != null?orderData.deliveryInfo.finishTime:1)}}分钟</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getOrderDetail,
	} from "@/api/index";
	export default {
		name: "logisticsAddress",
		data() {
			return {
				orderData: {},

			};
		},
		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;
			},
			orderDetail(id) {
				getOrderDetail(id).then((res) => {
					this.loading = false;
					if (res.success) {
						this.orderData = res.result
					}
				});

			}
		}
	};
</script>
<style lang="less">
	//@import "@/styles/table-common.less";
	.nei1 {
		display: flex;
		border: 1px solid #eee;
		height: 30px;
		line-height: 30px;
	}

	.title {
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: 700;
	}
</style>