book-hi/pages-car/pages/logistics-detail.vue

<template>
    <view class="logistics-page">
        <!-- 顶部包裹切换 -->
        <scroll-view scroll-x class="package-tabs" :scroll-into-view="'tab-' + currentPackageIndex" v-if="packages.length > 0">
            <view class="tab-list">
                <view class="tab-item" v-for="(item, index) in packages" :key="index" :id="'tab-' + index"
                    :class="{ active: currentPackageIndex === index }" @click="switchPackage(index)">
                    {{ item.name }}
                </view>
            </view>
        </scroll-view>

        <template v-if="packages.length > 0">
            <!-- 物流基本信息 -->
            <view class="card info-card">
                <view class="info-row">
                    <text class="label">承运商：</text>
                    <text class="value">{{ currentPackage.expressName }}</text>
                </view>
                <view class="info-row">
                    <text class="label">物流单号：</text>
                    <text class="value">{{ currentPackage.waybillCode }}</text>
                    <view class="copy-btn" @click="copyTrackingNo">复制</view>
                </view>
            </view>

            <!-- 物流轨迹 -->
            <view class="card timeline-card">
                <!-- 收货地址 -->
                <view class="timeline-item address-item">
                    <view class="left-col">
                        <view class="icon-box address-icon">收</view>
                        <view class="line"></view>
                    </view>
                    <view class="right-col">
                        <view class="status-title">收货地址：{{ currentPackage.receiveAddress }}</view>
                    </view>
                </view>

                <!-- 轨迹列表 -->
                <view class="timeline-item" v-for="(trace, index) in currentPackage.trackingVoList" :key="index">
                    <view class="left-col">
                        <!-- 不同状态显示不同图标 -->
                        <view v-if="index === 0 && ['已签收', '签收'].includes(trace.status)" class="icon-box check-icon">
                            <u-icon name="checkmark" color="#fff" size="20"></u-icon>
                        </view>
                        <view v-else-if="['派送中', '派件'].includes(trace.status)" class="icon-box delivery-icon">
                            <u-icon name="man" color="#fff" size="24"></u-icon>
                        </view>
                        <view v-else-if="['运输中', '在途'].includes(trace.status)" class="icon-box transport-icon">
                            <u-icon name="car" color="#fff" size="24"></u-icon>
                        </view>
                        <view v-else-if="['已下单', '揽收'].includes(trace.status)" class="icon-box order-icon">
                            <u-icon name="order" color="#fff" size="24"></u-icon>
                        </view>
                        <view v-else class="dot"></view>

                        <view class="line" v-if="index !== currentPackage.trackingVoList.length - 1"></view>
                    </view>

                    <view class="right-col" :class="{ 'is-first': index === 0 }">
                        <view class="status-title">{{ trace.status }}</view>
                        <view class="status-desc">{{ trace.context }}</view>
                        <view class="status-time">{{ trace.ftime }}</view>
                    </view>
                </view>
            </view>
        </template>
        
        <!-- 空状态 -->
        <view class="empty-state" v-else-if="!loading">
            <view class="flex-d flex-a-c empty-box">
                <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png"
                    style="width: 100%; height: 260rpx" mode="heightFix"></image>
                <view class="common-title">暂无物流信息</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            loading: true,
            currentPackageIndex: 0,
            packages: [], // Changed to empty array, will be populated by API
            orderId: '',
            refundOrderId: ''
        };
    },
    onLoad(options) {
        if (options.orderId) {
            this.orderId = options.orderId;
            this.getLogisticsData();
        } else if (options.refundOrderId) {
            this.refundOrderId = options.refundOrderId;
            this.getLogisticsData();
        }
    },
    computed: {
        currentPackage() {
            return this.packages[this.currentPackageIndex] || {};
        }
    },
    methods: {
        getLogisticsData() {
            this.loading = true;
            uni.showLoading({
                title: '加载中'
            });
            const params = {};
            if (this.orderId) params.orderId = this.orderId;
            if (this.refundOrderId) params.refundOrderId = this.refundOrderId;

            this.$u.api.getOrderTrackingAjax(params).then(res => {
                uni.hideLoading();
                this.loading = false;
                if (res.code == 200) {
                    const data = res.data || [];
                    
                    // 直接使用后端返回的字段
                    this.packages = data.map((item, index) => ({
                        name: `包裹${index + 1}`,
                        ...item
                    }));
                } else {
                    this.$u.toast(res.msg || '获取物流信息失败');
                }
            }).catch(() => {
                uni.hideLoading();
                this.loading = false;
                this.$u.toast('网络请求失败');
            });
        },
        switchPackage(index) {
            this.currentPackageIndex = index;
        },
        copyTrackingNo() {
            if (!this.currentPackage.waybillCode) return;
            uni.setClipboardData({
                data: this.currentPackage.waybillCode,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none'
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.logistics-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    padding-bottom: 40rpx;
}

.package-tabs {
    white-space: nowrap;
    margin-bottom: 20rpx;

    .tab-list {
        display: flex;
        padding: 10rpx 0;
    }

    .tab-item {
        display: inline-block;
        padding: 12rpx 36rpx;
        background-color: #ccc; // Default gray
        color: #fff;
        font-size: 28rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        transition: all 0.3s;

        &.active {
            background-color: #38C148; // Theme green
            font-weight: bold;
        }

        &:last-child {
            margin-right: 0;
        }
    }
}

.card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.info-card {
    .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        font-size: 30rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .label {
            color: #333;
            width: 160rpx;
            font-weight: 500;
        }

        .value {
            color: #333;
            font-weight: 500;
        }

        .copy-btn {
            font-size: 24rpx;
            color: $app-theme-color;
            background-color: #edf7e8;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            margin-left: 20rpx;
        }
    }
}

.timeline-card {
    padding: 30rpx 20rpx;
}

.timeline-item {
    display: flex;
    position: relative;

    .left-col {
        width: 80rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 10rpx;
        position: relative;

        .line {
            width: 2rpx;
            background-color: #eee;
            flex: 1;
            min-height: 40rpx;
            margin-top: 10rpx;
            margin-bottom: -10rpx; // Connect to next
        }

        .icon-box {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            z-index: 1;

            &.address-icon {
                background-color: #ff5b5b;
                color: #fff;
            }

            &.check-icon {
                background-color: #ff5b5b;
            }

            &.delivery-icon,
            &.transport-icon,
            &.order-icon {
                background-color: #ccc;
            }
        }

        .dot {
            width: 16rpx;
            height: 16rpx;
            background-color: #eee;
            border-radius: 50%;
            margin-top: 12rpx;
            z-index: 1;
        }
    }

    .right-col {
        flex: 1;
        padding-bottom: 40rpx;

        &.is-first {
            .status-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .status-desc {
                color: #333;
            }
        }

        .status-title {
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 10rpx;
            line-height: 1.4;
        }

        .status-desc {
            font-size: 26rpx;
            color: #999;
            line-height: 1.5;
            margin-bottom: 10rpx;
        }

        .status-time {
            font-size: 24rpx;
            color: #999;
        }
    }

    &.address-item {
        .right-col {
            padding-bottom: 30rpx;

            .status-title {
                font-weight: bold;
                margin-bottom: 0;
            }
        }
    }
}

.empty-state {
    padding-top: 100rpx;
    display: flex;
    justify-content: center;

    .empty-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .common-title {
            font-size: 30rpx;
            color: #999;
            margin-top: 30rpx;
        }
    }
}
</style>