shuhi-app/pages/index/express/logistics-detail.vue

<template>
    <view class="container">
        <!-- 物流公司信息 -->
        <u-sticky>
            <u-alert :title="`物流公司：${logisticsInfo.company}`" type="warning"></u-alert>
        </u-sticky>

        <!-- 自定义物流轨迹时间轴 -->
        <scroll-view scroll-y class="timeline-container">
            <view v-for="(item, index) in logisticsInfo.traces" :key="index" class="timeline-item">
                <view class="timeline-icon">
                    <u-icon name="map-fill" color="#19be6b" size="16" />
                </view>
                <view class="timeline-content">
                    <text class="desc">{{ item.desc }}</text>
                    <text class="time">{{ item.time }}</text>
                </view>
                <view v-if="index < logisticsInfo.traces.length - 1" class="timeline-line"></view>
            </view>
        </scroll-view>

        <!-- 底部操作按钮 -->
        <view class="fixed-bottom">
            <reject-button size="large" @reject="handleReject" />
            <approve-button size="large" @approve="handleApprove" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import ApproveButton from './components/ApproveButton.vue';
import RejectButton from './components/RejectButton.vue';

// 物流信息数据
const logisticsInfo = ref({
    company: '京东快递',
    traces: [
        {
            desc: '货物已交付京东快递',
            time: '2024/10/16 16:00:00'
        },
        {
            desc: '接收物任务分配给快递员王艳玲，联系电话 15123695401',
            time: '2024/10/16 16:00:00'
        },
        {
            desc: '快递员发起联系客户，呼叫方式：拨打电话。',
            time: '2024/10/16 16:00:00'
        },
        {
            desc: '京东快递已收取收件',
            time: '2024/10/16 16:00:00'
        },
        {
            desc: '您的快件已由【信阳师范小蜜蜂】揽收完成',
            time: '2024/10/16 16:00:00'
        },
        // ... 更多轨迹信息
    ]
});

// 处理驳回
const handleReject = (reason) => {
    console.log('驳回原因:', reason);
    // 处理驳回逻辑
};

// 处理同意
const handleApprove = () => {
    console.log('同意操作');
    // 处理同意逻辑
};
</script>

<style lang="scss" scoped>
.timeline-container {
    flex: 1;
    padding: 12px;
    background-color: #fff;
}

.timeline-item {
    display: flex;
    position: relative;
    padding: 20rpx 0;
}

.timeline-icon {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;

    .desc {
        font-size: 14px;
        color: #333;
        display: block;
        margin-bottom: 4px;
    }

    .time {
        font-size: 12px;
        color: #999;
    }
}

.timeline-line {
    position: absolute;
    width: 2px;
	height: 100%;
    background-color: #19be6b;
    top: 32px;
    bottom: 0;
    left: 11px;
}
</style>