fixed

v3/logisticsPage/logisticsPage.vue

@@ -4,24 +4,35 @@
 		<view class="logistics-header">
 			<view class="logistics-info">
 				<view class="company-info">
-					<text class="company-name">{{ logisticsData.logisticsCompanyName || '快递公司' }}</text>
-					<text class="express-code">{{ logisticsData.expressCode || '暂无运单号' }}</text>
+					<text class="company-name">{{ currentLogistics.logisticsCompanyName || '快递公司' }}</text>
+					<text class="express-code">{{ currentLogistics.expressCode || '暂无运单号' }}</text>
 				</view>
-				<view class="status-info" v-if="logisticsData.statusDesc">
-					<text class="status-desc">{{ logisticsData.statusDesc }}</text>
+				<view class="status-info">
+					<text class="status-desc">{{ currentLogistics.parcelStatusDesc || currentLogistics.statusDesc || '暂无状态' }}</text>
 				</view>
 			</view>
 		</view>
 
+		<!-- 多个包裹切换（如果有多个） -->
+		<view class="parcel-tabs" v-if="logisticsList.length > 1">
+			<view class="tab-item" 
+				v-for="(item, index) in logisticsList" 
+				:key="index"
+				:class="{ 'active': activeParcelIndex === index }"
+				@tap="switchParcel(index)">
+				{{ item.logisticsCompanyName }} - {{ item.expressCode }}
+			</view>
+		</view>
+
 		<!-- 物流时间轴 -->
-		<view class="logistics-timeline" v-if="logisticsData.processDetailList && logisticsData.processDetailList.length > 0">
-			<view class="timeline-item" v-for="(item, index) in logisticsData.processDetailList" :key="index">
+		<view class="logistics-timeline" v-if="currentLogistics.processDetailList && currentLogistics.processDetailList.length > 0">
+			<view class="timeline-item" v-for="(item, index) in currentLogistics.processDetailList" :key="index">
 				<!-- 时间轴点和线 -->
 				<view class="timeline-line">
 					<view class="timeline-dot" :class="{ 'active': index === 0 }">
 						<view class="dot-inner" v-if="index === 0"></view>
 					</view>
-					<view class="timeline-line-vertical" v-if="index < logisticsData.processDetailList.length - 1"></view>
+					<view class="timeline-line-vertical" v-if="index < currentLogistics.processDetailList.length - 1"></view>
 				</view>
 				
 				<!-- 物流信息内容 -->
@@ -51,8 +62,18 @@
 	export default {
 		data() {
 			return {
-				// 物流数据
-				logisticsData: {
+				// 物流数据列表（支持多个包裹）
+				logisticsList: [],
+				// 当前激活的包裹索引
+				activeParcelIndex: 0,
+				// 加载状态
+				loading: true
+			}
+		},
+		computed: {
+			// 当前显示的物流信息
+			currentLogistics() {
+				return this.logisticsList[this.activeParcelIndex] || {
 					logisticsCompanyName: '',
 					logisticsCompanyCode: '',
 					expressCode: '',
@@ -60,9 +81,7 @@
 					parcelStatusDesc: '',
 					lastUpdateTime: '',
 					processDetailList: []
-				},
-				// 加载状态
-				loading: true
+				};
 			}
 		},
 		onLoad(options) {
@@ -80,23 +99,38 @@
 						order_no: this.orderId
 					});
 					
-					if (res && res.data) {
-						// 假设接口返回的数据结构为 { ok, data: { processDetailList, ... } }
-						// 调整为页面需要的数据结构
-						this.logisticsData = {
+					if (res && res.ok && res.data) {
+						// 支持多个物流包裹的情况
+						if (Array.isArray(res.data)) {
+							// 确保每个包裹的数据结构完整
+							this.logisticsList = res.data.map(item => ({
+								logisticsCompanyName: item.logisticsCompanyName || '',
+								logisticsCompanyCode: item.logisticsCompanyCode || '',
+								expressCode: item.expressCode || '',
+								statusDesc: item.statusDesc || '',
+								parcelStatusDesc: item.parcelStatusDesc || '',
+								lastUpdateTime: item.lastUpdateTime || '',
+								processDetailList: item.processDetailList || []
+							}));
+						} else {
+							// 单个包裹的情况，转为数组格式
+							this.logisticsList = [{
 								logisticsCompanyName: res.data.logisticsCompanyName || '',
 								logisticsCompanyCode: res.data.logisticsCompanyCode || '',
 								expressCode: res.data.expressCode || '',
-							statusDesc: res.data.statusDesc || res.data.parcelStatusDesc || '',
+								statusDesc: res.data.statusDesc || '',
 								parcelStatusDesc: res.data.parcelStatusDesc || '',
 								lastUpdateTime: res.data.lastUpdateTime || '',
 								processDetailList: res.data.processDetailList || []
-						};
+							}];
+						}
 					} else {
 						console.error('物流数据获取失败');
+						this.logisticsList = [];
 					}
 				} catch (error) {
 					console.error('获取物流信息异常:', error);
+					this.logisticsList = [];
 				} finally {
 					this.loading = false;
 				}
@@ -105,9 +139,8 @@
 			formatTime(timeStr) {
 				if (!timeStr) return '';
 				
-				// 假设时间格式为 yyyy-MM-dd HH:mm:ss
-				// 需要转换为 MM.dd HH:mm 格式
-				const date = new Date(timeStr);
+				// 支持时间戳格式
+				const date = typeof timeStr === 'number' ? new Date(timeStr) : new Date(timeStr);
 				if (isNaN(date.getTime())) return timeStr;
 				
 				const month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -116,6 +149,12 @@
 				const minutes = date.getMinutes().toString().padStart(2, '0');
 				
 				return `${month}.${day} ${hours}:${minutes}`;
+			},
+			// 切换包裹
+			switchParcel(index) {
+				if (index >= 0 && index < this.logisticsList.length) {
+					this.activeParcelIndex = index;
+				}
 			}
 		}
 	}
@@ -165,6 +204,37 @@
 			color: #666666;
 		}
 
+		/* 包裹切换标签样式 */
+		.parcel-tabs {
+			background-color: #ffffff;
+			margin-top: 20rpx;
+			padding: 20rpx 30rpx;
+			display: flex;
+			overflow-x: auto;
+			white-space: nowrap;
+			border-bottom: 1rpx solid #e5e5e5;
+		}
+
+		.parcel-tabs::-webkit-scrollbar {
+			display: none;
+		}
+
+		.tab-item {
+			padding: 10rpx 20rpx;
+			margin-right: 20rpx;
+			border-radius: 16rpx;
+			background-color: #f5f5f5;
+			font-size: 26rpx;
+			color: #666666;
+			flex-shrink: 0;
+		}
+
+		.tab-item.active {
+			background-color: #fff0e6;
+			color: #ff6600;
+			font-weight: 500;
+		}
+
 		/* 物流时间轴样式 */
 		.logistics-timeline {
 			margin-top: 20rpx;
@@ -265,4 +335,4 @@
 		.bottom-space {
 			height: 40rpx;
 		}
-</style>
+	</style>