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

        <!-- 物流基本信息 -->
        <view class="card info-card">
            <view class="info-row">
                <text class="label">承运商：</text>
                <text class="value">{{ currentPackage.carrier }}</text>
            </view>
            <view class="info-row">
                <text class="label">物流单号：</text>
                <text class="value">{{ currentPackage.trackingNo }}</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.address }}</view>
                </view>
            </view>

            <!-- 轨迹列表 -->
            <view class="timeline-item" v-for="(trace, index) in currentPackage.traces" :key="index">
                <view class="left-col">
                    <!-- 不同状态显示不同图标 -->
                    <view v-if="index === 0 && trace.status === '已签收'" class="icon-box check-icon">
                        <u-icon name="checkmark" color="#fff" size="20"></u-icon>
                    </view>
                    <view v-else-if="trace.status === '派送中'" class="icon-box delivery-icon">
                        <u-icon name="man" color="#fff" size="24"></u-icon> <!-- 使用uView图标或自定义 -->
                    </view>
                    <view v-else-if="trace.status === '运输中'" class="icon-box transport-icon">
                        <u-icon name="car" color="#fff" size="24"></u-icon>
                    </view>
                    <view v-else-if="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.traces.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.desc }}</view>
                    <view class="status-time">{{ trace.time }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentPackageIndex: 0,
            packages: [
                {
                    name: '包裹1',
                    carrier: '顺丰快递',
                    trackingNo: '1486662178863',
                    address: '四川省成都市武侯区城区锦城大道武侯区城区锦城大道武侯区城区锦城大道',
                    traces: [
                        {
                            status: '已签收',
                            desc: '您的包裹正在配送途中（快递员：蔡波，电话：18282828281）',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '派送中',
                            desc: '您的包裹正在配送途中（快递员：蔡波，电话：18285878382）',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '运输中',
                            desc: '您提交了订单，请等待第三方卖家系统确认',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '',
                            desc: '您的订单由第三方卖家捡货完成，待出库交付圆通快递包裹，运单号为：9830165317459',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '',
                            desc: '第三方卖家已经开始捡货',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '',
                            desc: '您的订单已进入第三方卖家仓库，准备出库',
                            time: '2021.03.03 21:29'
                        },
                        {
                            status: '已下单',
                            desc: '您提交了订单，请等待第三方卖家系统确认',
                            time: '2021.03.03 21:29'
                        }
                    ]
                },
                {
                    name: '包裹2',
                    carrier: '圆通速递',
                    trackingNo: 'YT1234567890',
                    address: '北京市朝阳区...',
                    traces: []
                },
                {
                    name: '包裹3',
                    carrier: '中通快递',
                    trackingNo: 'ZT0987654321',
                    address: '上海市浦东新区...',
                    traces: []
                },
                {
                    name: '包裹4',
                    carrier: '韵达快递',
                    trackingNo: 'YD1122334455',
                    address: '广东省广州市...',
                    traces: []
                }
            ]
        };
    },
    computed: {
        currentPackage() {
            return this.packages[this.currentPackageIndex] || {};
        }
    },
    methods: {
        switchPackage(index) {
            this.currentPackageIndex = index;
        },
        copyTrackingNo() {
            uni.setClipboardData({
                data: this.currentPackage.trackingNo,
                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;
            }
        }
    }
}
</style>