shuhi-app/pages/order/recycle/detail.vue

<template>
    <view class="common-page"  style="padding: 0;padding-bottom: 130rpx;">
        <InfoCard :detail="detail" type="recycle" />

        <TrackForm @submit="onSubmitTrack" class="mt-20" />

        <TrackRecord :records="records" class="mt-20" />

        <view class="fixed-bottom">
            <u-button type="warning" size="large" @click="onClaim">一键理赔</u-button>
            <u-button type="primary" size="large" @click="onFinish">完成</u-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import InfoCard from '@/pages/order/components/info-card.vue'
import TrackForm from '@/pages/order/components/track-form.vue'
import TrackRecord from '@/pages/order/components/track-record.vue'

const detail = ref({})
const records = ref([])

const getDetail = async (code) => {
    try {
        const res = await uni.$u.http.get('/app/workorder/detail', { params: { type: 'recycle', waybillCode: code } })
        if (res?.code === 200 && res?.data) {
            detail.value = res.data
            return
        }
    } catch (e) {}
    detail.value = {
        waybillCode: code || 'YT54454654564',
        orderId: '5622225',
        taskTypeName: '书单不符',
        taskTypeExt: '快速理赔',
        orderStatusName: '已到货-待到货审核',
        taskDetail: '书单不符',
        createUser: 'zzz',
        createTime: '2026-05-11 15:00:00',
        imageUrl: '/static/img/book.png',
        taskStatusName: '待处理'
    }
    records.value = [
        { time: '2025-02-11 16:00:00', user: 'aaa', statusText: '完成' }
    ]
}

const onSubmitTrack = (payload) => {
    records.value.unshift({
        time: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
        user: '我',
        content: payload.content,
        statusText: payload.content ? payload.content : '更新'
    })
}

const onClaim = () => {
    uni.$u.toast('已触发一键理赔')
}

const onFinish = () => {
    uni.$u.toast('任务已完成')
}

onLoad((options) => {
    getDetail(options.waybillCode)
})
</script>

<style lang="scss" scoped>
.mt-20 {
    margin-top: 20rpx;
}
</style>