school-manage/src/views/sys/order-manage/logisticsAddress.vue

<template>
	<div class="search">
		<div style="display: flex;">
			<div class="waiceng">
				<div class="title">订单信息</div>
				<div>订单编号：{{orderData.numberCode}}</div>
				<div>支付订单编号：{{'ORDER'+orderData.id}}</div>
			</div>
			<div class="waiceng">
				<div class="title">用户信息</div>
				<div>收货人：<span class="blue-color">{{orderData.receiverName}}</span></div>
				<div>收货电话：<span class="blue-color">{{orderData.receiverPhone}}</span></div>
				<div>收货地址：<span class="blue-color">{{orderData.receiverAddress}}</span></div>
				<div>要求送达时间：<span class="blue-color">？？2026/04/07 09:31:00</span></div>
			</div>
			<div class="waiceng">
				<div class="title">店铺信息</div>
				<div>店铺名称：<span class="blue-color">{{orderData.shopName}}</span></div>
				<div>店铺电话：<span class="blue-color">{{orderData.shopPhone}}</span></div>
				<div>配送方式： <span class="blue-color">{{orderData.deliveryType == 1?'配送':'不配送'}}</span></div>
			</div>
			<div class="waiceng">
				<div class="title">其他信息</div>
				<div>配送员：<span class="blue-color">张宝芹</span></div>
				<div>配送员电话：<span class="blue-color">15832720108</span></div>
				<div>备注：<span class="blue-color">{{orderData.remark}}</span></div>
			</div>
		</div>
		<div style="display: flex;">
			<div class="waiceng" style="width: 70%;">
				<div class="title">商品信息</div>
				<div class="box" v-for="(item,index) in orderData.goodsList" :key="index">
					<div style="flex:1;">{{item.productName}}</div>
					<div class="price"> X{{item.quantity}}</div>
					<div class="price">¥{{item.price}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">餐盒费</div>
					<div class="price">¥{{orderData.packageFee}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">配送费</div>
					<div class="price">¥{{orderData.deliveryFee}}</div>
				</div>
				<div class="zong">活动优惠：<span style="color:red;">¥0</span> 下单返佣：<span style="color:red;">¥0</span>
					合计：<span style="color:#11cd6e;">¥{{orderData.totalAmount}}</span></div>
				<div class="zong">流水金额：<span class="blue-color">¥24</span> </div>
				<div class="zong">商家预计收入：<span class="blue-color">¥20.16</span> </div>
			</div>
			<div class="waiceng" style="width: 30%;background: #eee;padding: 0;">
				<div style="background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 10px;">
					<div class="title">物流信息</div>
					<div class="text">用户提交订单时间：{{orderData.createTime | formatDateTime }}</div>
					<div class="text">用户完成支付时间：2026/04/07 09:06:41</div>
					<div class="text">商家接单时间：2026/04/07 09:06:41</div>
					<div class="text">配送员已接单：2026/04/07 09:06:44</div>
				</div>
				<div style="background: #fff;padding: 10px;border-radius: 10px;">
					<div class="title">运营订单备注</div>
					<textarea name="" id="" cols="30" rows="10" style="width: 100%;border: 1px solid #eee;"></textarea>
					<div class='btn' @tap="returnOrder">退款</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		returnOrder,
	} 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) {
				console.log('111112222', data);
				this.orderData = data
			},
			returnOrder(){
				returnOrder({
					orderId:orderData.id,
					userId:orderData.userId
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.$Message.success("取消订单成功");
					}
				});
			}
		}
	};
</script>
<style lang="less">
	.search {
		background: #eee;
	}

	.title {
		font-weight: 700;
		font-size: 15px;
	}

	.waiceng {
		background: #fff;
		border-radius: 10px;
		margin: 5px;
		padding: 10px;
	}

	.btn {
		width: 75px;
		height: 30px;
		background: #4487fe;
		font-size: 14px;
		color: #fff;
		border-radius: 7px;
		text-align: center;
		line-height: 30px;
		margin: 0 auto;
	}

	.zong {
		text-align: right;
		height: 40px;
		line-height: 40px;
	}

	.box {
		display: flex;
		border-bottom: 1px solid #eee;
		line-height: 30px;
		height: 30px px;
	}

	.text {
		font-weight: bold;
		color: #777;
	}

	.price {
		flex: 1;
		text-align: right
	}

	.blue-color {
		color: #056dae;
	}
</style>