delivery-uniapp/pages/order/handoverRecord.vue

<template>
	<s-layout title="交接记录" class="set-userinfo-wrap">
		<view class="transfer-page">
			<scroll-view class="body" scroll-y>
				<u-steps direction="column" :current="currentIndex" class="steps-wrap">
					<!-- <u-steps-item v-for="(item, idx) in records" :key="idx">
						<template #title>
							<text class="step-title">{{ item.operator }}</text>
						</template>
						<template #desc>
							<text class="step-desc">{{ item.operator }}</text>
						</template>
						<template #content>
							<view class="step-content">
								<text class="op-name">{{ item.operator }}</text>
								<text class="op-note" v-if="item.note"> · {{ item.note }}</text>
							</view>
						</template>
					</u-steps-item> -->
					<template v-for="(item, idx) in records" :key="idx">
						<up-steps-item :desc="item.time">
							<template #title>
								<view>
									<view class="step-title">{{ item.title }}</view>
									<view>
										<text class="step-desc">{{ item.operator }}</text>
										<text class="op-note" v-if="item.note"> · {{ item.note }}</text>
									</view>
								</view>
							</template>
						</up-steps-item>
					</template>
				</u-steps>
				<view v-if="records.length === 0" class="empty">暂无交接记录</view>
			</scroll-view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import DeliveryOrderApi from '@/sheep/api/member/deliveryOrder';

	const records = ref([]);
	const orderId = ref(null);

	onLoad((options = {}) => {
		orderId.value = options.id || options.orderId || null;
		fetchRecords();
	});

	function formatTime(timestamp) {
		if (!timestamp) return '';
		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}`;
	}

	async function fetchRecords() {
		try {
			const res = await DeliveryOrderApi.getHandoverRecord(orderId.value);
			if (res.code === 0 && res.data) {
				console.log('交接记录原始数据:', res.data);
				const rawRecords = res.data || [];
				// 转换接口数据为页面所需格式
				const transformedRecords = rawRecords.map(item => {
					// 根据 deliveryStatus 生成标题
					let title = '状态更新';
					switch (item.deliveryStatus) {
						case 1: title = '待接单'; break;
						case 2: title = '骑手待到店'; break;
						case 3: title = '待取货'; break;
						case 4: title = '待送达交接点'; break;
						case 5: title = '送达交接点待分配'; break;
						case 6: title = '待送达顾客'; break;
						case 7: title = '已完成'; break;
						case 0: title = '已取消'; break;
						case -1: title = '配送异常'; break;
					}
					
					return {
						title: title,
						time: formatTime(item.createTime),
						operator: item.deliverymanName ? `${item.deliverymanName} ${item.deliverymanPhoneLastFour ? ('尾号' + item.deliverymanPhoneLastFour) : ''}` : '系统',
						note: '' // 接口暂无备注字段
					};
				});
				console.log('交接记录转换后:', transformedRecords);
				records.value = transformedRecords;
			} else {
				sheep.$helper.toast(res.msg || '获取交接记录失败');
				records.value = [];
			}
		} catch (e) {
			console.error('fetchRecords error', e);
			sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('获取交接记录失败');
			records.value = [];
		}
	}

	const currentIndex = computed(() => Math.max(0, records.value.length - 1));

	function goBack() {
		uni.navigateBack();
	}
</script>

<style scoped>
	.transfer-page {
		background: #fff;
		/* min-height: 100vh; */
	}

	.header {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.body {
		padding: 20rpx;
		/* background: #f7f7f7; */
		/* min-height: calc(100vh - 88rpx); */
		box-sizing: border-box;
	}

	.steps-wrap {
		width: 100%;
	}

	.step-title {
		font-weight: 700;
		font-size: 32rpx;
		color: #333;
		display: block;
	}

	.step-desc {
		font-size: 26rpx;
		color: #999;
		display: block;
		margin: 15rpx 0;
	}

	.step-content {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666;
		display: flex;
		gap: 8rpx;
		align-items: center;
		flex-wrap: wrap;
	}

	.op-name {
		font-weight: 600;
		color: #333;
	}

	.op-note {
		color: #666;
	}

	.empty {
		text-align: center;
		color: #999;
		padding: 60rpx 0;
	}
</style>