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

<template>
    <view class="container">
        <!-- 物流公司信息 -->
        <u-sticky>
            <u-alert :title="`物流公司：京东快递`" type="warning"></u-alert>
        </u-sticky>

        <!-- 自定义物流轨迹时间轴 -->
        <scroll-view scroll-y class="timeline-container">
            <view v-for="(item, index) in logisticsInfo" :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="title">{{ item.title }}</text>
                    <text class="desc">{{ item.description }}</text>
                    <text class="time">{{ item.time }}</text>
                </view>
                <view v-if="index < logisticsInfo.length - 1" class="timeline-line"></view>
            </view>
        </scroll-view>

        <!-- 底部操作按钮 -->
        <view class="fixed-bottom" v-if="checkStatus==1">
            <reject-button size="large" @reject="(reason) => handleButtonClick(3, reason)" />
            <approve-button size="large" @approve="handleButtonClick(2)" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import ApproveButton from './components/ApproveButton.vue';
import RejectButton from './components/RejectButton.vue';

// 物流信息数据
const logisticsInfo = ref([]);

//获取物流详情  /app/orderinfo/getOrderExpressList
function getLogisticsDetail(orderId) {
    uni.$u.http.get(`/app/orderinfo/getOrderExpressList?orderId=${orderId}`).then(res => {
        if (res.code == 200) {
            logisticsInfo.value = res.data
        }
    })
}

// 操作按钮
function handleButtonClick(status, reason) {
    uni.$u.http.post('/app/orderexception/update', {
        id: id.value,
        checkStatus: status,
        refusalReason: reason
    }).then(res => {
        if (res.code == 200) {
            checkStatus.value = status
            uni.$u.toast('操作成功');
            emit('refresh');
        } else {
            uni.$u.toast(res.msg);
        }
    })
}

const checkStatus = ref(0)
const id = ref(0)
onLoad((e) => {
    checkStatus.value = e.status
    id.value = e.id
    getLogisticsDetail(e.orderId)
})
</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;

    .title {
        font-weight: bold;
        font-size: 14px;
    }

    .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>