Files
delivery-uniapp/pages/order/handoverRecord.vue

155 lines
3.1 KiB
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.title }}</text>
</template>
<template #desc>
<text class="step-desc">{{ item.time }}</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>
</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';
const records = ref([]);
const orderId = ref(null);
onLoad((options = {}) => {
orderId.value = options.id || options.orderId || null;
fetchRecords();
});
async function fetchRecords() {
try {
if (sheep && typeof sheep.request === 'function') {
const res = await sheep.request({
url: '/order/transferRecords',
method: 'GET',
data: {
id: orderId.value
}
});
records.value = (res && res.data) ? res.data.records || res.data : res.records || res;
} else {
// mock 数据
records.value = [{
title: '已接单',
time: '2026-01-15 10:02',
operator: '系统',
note: '订单自动接单'
},
{
title: '到店取货',
time: '2026-01-15 10:12',
operator: '骑手 张三',
note: '已取货'
},
{
title: '转单给同城骑手',
time: '2026-01-15 10:20',
operator: '客服 小李',
note: '因配送区域调整'
}
];
}
} 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-top: 6rpx;
}
.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>