vist_go_uniApp/packageOrder/pages/logistics/index.vue

<template>
	<view class="">
		<!-- 物流头部信息 -->
		<view class="logistics-header">
			<view>
				<view class="company-info mar-b-16">
					<u-icon name="car" size="25" color="#8b8b8b" class="logistics-header-icon"></u-icon>
					<text class="label">物流公司：</text>
					<text class="value">{{ order.expressCompany  ||'-'}}</text>
				</view>
				<view class="tracking-info mar-b-16">
					<u-icon name="order" size="25" color="#8b8b8b" class="logistics-header-icon"></u-icon>
					<text class="label">单号：</text>
					<text class="value">{{ order.expressCode  ||'-'}}</text>
					<text class="copy-btn" v-if="order.expressCode" @tap="copyContent">复制</text>
				</view>
				<view class="company-info mar-b-16 ">
					<u-icon name="coupon" size="25" color="#8b8b8b" class="logistics-header-icon"></u-icon>

					<text class="label">发货备注：</text>
					<text class="value">{{ order.deliveryRemark ||'-'}}</text>
				</view>
			</view>
		</view>


		<!-- 物流轨迹列表 -->
		<view class="logistics-trace" :key="stepsKey">
			<template v-if="logisticsList && logisticsList.length">
				<uni-steps :options="logisticsList" direction="column" :active="0"></uni-steps>
			</template>
			<template v-else>
				<view class="no-data">暂无物流信息</view>
			</template>
		</view>

	</view>
</template>

<script>
	import {
		queryExpress,
		orderDetail
	} from '@/config/api.js'

	export default {
		data() {
			return {
				stepsKey: 0,
				logisticsCompany: '',
				logisticsNumber: '',
				logisticsList: [],
				order: {},
				stats: null,
				orderId: "",
			};
		},
		methods: {
			copyContent() {
				uni.setClipboardData({
					data: this.logisticsNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			async getLogisticsInfo() {
				try {
					const params = {
						number: this.order.expressCode
					};

					// 如果是顺丰快递，使用lastFour字段
					if (this.order.expressCompany === '顺丰快递' && this.order.lastFour) {
						params.mobile = this.order.lastFour;
					}

					const res = await queryExpress(params);
					if (res.code === 200) {
						const data = JSON.parse(res.data).data;
						console.log("res", res)
						this.logisticsCompany = data.expressCompanyName;
						// 转换物流轨迹数据格式为uview-plus steps所需格式
						if (data.logisticsTraceDetails && Array.isArray(data.logisticsTraceDetails)) {
							this.logisticsList = data.logisticsTraceDetails.reverse().map(item => ({
								title: item.desc || '',
								desc: item.time ? this.formatTimestamp(item.time) : ''
							}));
							this.stepsKey++
						} else {
							this.logisticsList = [];
						}
					} else {
						this.logisticsList = [];
						uni.showToast({
							title: '获取物流信息失败',
							icon: 'none'
						});
					}
				} catch (e) {
					this.logisticsList = [];
					uni.showToast({
						title: '获取物流信息失败',
						icon: 'none'
					});
				}
			},
			formatTimestamp(timestamp) {
				const date = new Date(Number(timestamp));
				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');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			previewImage(current, urls) {
				uni.previewImage({
					current,
					urls
				});
			},
			async getDeliveryStats() {
				try {
					const res = await deliveryStats({
						workOrderId: this.order.id
					});
					if (res.code === 200) {
						this.stats = res.data;
					} else {
						uni.showToast({
							title: '获取发货统计信息失败',
							icon: 'none'
						});
					}
				} catch (e) {
					uni.showToast({
						title: '获取发货统计信息失败',
						icon: 'none'
					});
				}
			},
			goToDeliverRecord() {
				uni.navigateTo({
					url: `/pagesA/production/deliver-record?workOrderId=${this.order.id}`
				});
			},
			async getOrderDetail() {
				try {
					const res = await orderDetail({
						id: this.orderId
					})
					if (res.success && res.data) {
						this.order = res.data.order
						this.orderListVos = res.data.orderListVos || []
						this.getLogisticsInfo();
					}
				} catch (e) {
					this.$u.toast('获取订单详情失败')
				}
			},
		},
		onLoad(op) {
			this.orderId = op.id;
			this.getOrderDetail()
		}
	};
</script>

<style scoped>
	.contact-section {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-around;

		.contact-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;

			text {
				font-size: 24rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
	}

	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.logistics-header {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.company-info,
	.tracking-info {
		display: flex;
		align-items: center;
	}

	.label {
		color: #666;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.copy-btn {
		background: #229fff;
		color: #fff;
		border-radius: 20rpx;
		padding: 6rpx 22rpx;
		font-size: 26rpx;
		margin-left: 8rpx;
		box-shadow: 0 2rpx 6rpx rgba(34, 159, 255, 0.08);
		cursor: pointer;
		transition: background 0.2s;
	}

	.copy-btn:active {
		background-color: #e5e5e5;
	}

	.logistics-trace {
		min-height: calc(100vh - 20rpx - 32rpx - 20rpx - 20rpx);
		/* 减去容器内边距、头部内边距、头部底部外边距和自身内边距 */
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.steps-item {
		padding: 20rpx 0;
	}

	.steps-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.steps-time {
		font-size: 24rpx;
		color: #999;
	}

	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	.goods-photos {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.photo-section {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.photo-section:last-child {
		margin-bottom: 0;
	}

	.photo-section .section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.photo-section .photo-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 20rpx;
		overflow-x: auto;
		padding-bottom: 10rpx;
	}

	.photo-section .photo-grid .photo-item {
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.delivery-stats {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.stats-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.stats-content {
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
	}

	.stats-label {
		color: #666;
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}

	.stats-value {
		color: #229fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.record-btn {
		display: flex;
		align-items: center;
		background: #ecf5ff;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		cursor: pointer;
	}

	.record-btn text {
		color: #229fff;
		font-size: 26rpx;
		margin-left: 8rpx;
	}
</style>