book-hi/pages-mine/components/order-timeline.vue

<template>
    <view class="timeline-section">
        <view class="time-info" @click="toggleExpand" v-if="!isExpanded">
            <text>下拉查看更多</text>
            <u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="24" color="#333333"></u-icon>
        </view>

        <view class="time-info-expanded" v-else  @click="toggleExpand">
            <u-icon name="arrow-up" size="36" color="#333333"></u-icon>
        </view>

        <view class="timeline-content" :class="{ 'collapsed': !isExpanded }">
            <view class="timeline-list">
                <view class="timeline-item" v-for="(item, index) in timelineData" :key="index">
                    <view class="timeline-dot"></view>
                    <view class="timeline-info">
                        <view class="status">{{ item.status }}</view>
                        <view class="time" v-if="item.time">{{ item.time }}</view>
                        <view class="desc" v-if="item.desc">{{ item.desc }}</view>
                        <!-- 快递单号 -->
                        <view class="express-no" v-if="item.expressNo">
                            <text>{{ item.expressNo }}</text>
                            <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
                            @click.stop="copyExpressNo(item.expressNo)"></image>
                        </view>
                        <!-- 物流信息 -->
                        <view class="express-info" v-if="item.expressInfo">
                            {{ item.expressInfo }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'order-timeline',
    data() {
        return {
            isExpanded: false,
            timelineData: [
                {
                    status: '已到款',
                    time: '2024-10-25 12:00:15',
                    desc: '品相审核不通过的书籍可以在审核后48小时之内申请退回，逾期不予退回。(寄单不含快递费可以免费申请退回，后续订单不含快递费需要支付运费退回。)'
                },
                {
                    status: '审核成功',
                    time: '2024-10-25 12:00:15'
                },
                {
                    status: '待审核',
                    desc: '毕业季订单繁忙，预计订单包裹签收15天完成书籍审核并支付书款，请您耐心等待~'
                },
                {
                    status: '快递取件',
                    expressNo: 'SF313996799456',
                    expressInfo: '暂无物流信息'
                },
                {
                    status: '待取件',
                    desc: '书籍平台已为您安排【顺丰标快】，请您注意查看三方来电'
                },
                {
                    status: '初审成功',
                    time: '2024-10-25 12:00:15'
                },
                {
                    status: '待初审',
                    desc: '取件时间：2024-10-28 09:00-10:00\n预约取件时间前20分钟内将完成订单审核，请您留意初审结果。如初审通过请您准备好快件，并等待订单信息。感谢您的配合。'
                },
                {
                    status: '回收订单提交',
                    time: '2024-10-25 12:00:15'
                }
            ]
        }
    },
    computed: {
        currentStatus() {
            return this.timelineData[0]?.status || ''
        }
    },
    methods: {
        toggleExpand() {
            this.isExpanded = !this.isExpanded
        },
        copyExpressNo(no) {
            uni.setClipboardData({
                data: no,
                success: () => {
                    uni.$u.toast('复制成功')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.timeline-section {
    position: relative;

    .time-info {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333333;
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        z-index: 9;

        .u-icon {
            margin-left: 4rpx;
        }
    }
    .time-info-expanded {
        position: absolute;
        bottom: 40rpx;
        right: 40rpx;
        z-index: 9;
    }

    .timeline-content {
        position: relative;
        padding: 30rpx;

        &.collapsed {
            max-height: 180rpx;
            overflow: hidden;

            &::after {
                content: '';
                position: absolute;
                left: -30rpx;
                right: 0;
                bottom: 0;
                height: 80rpx;
                width: calc(100% + 60rpx);
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
                pointer-events: none;
            }
        }

        .timeline-list {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 6rpx;
                top: 0;
                bottom: 0;
                width: 2rpx;
                height: calc(100% - 60rpx);
                background: #38C148;
            }

            .timeline-item {
                display: flex;
                position: relative;
                padding-bottom: 40rpx;

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

                .timeline-dot {
                    width: 14rpx;
                    height: 14rpx;
                    border-radius: 50%;
                    background: #38C148;
                    margin-right: 20rpx;
                    flex-shrink: 0;
                    z-index: 1;
                }

                .timeline-info {
                    flex: 1;
                    margin-top: -10rpx;

                    .status {
                        font-size: 28rpx;
                        color: #38C148;
                        margin-bottom: 8rpx;
                    }

                    .time,
                    .desc {
                        font-family: PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #999999;
                        line-height: 36rpx;
                        white-space: pre-wrap;
                    }

                    .express-no {
                        display: flex;
                        align-items: center;
                        font-size: 26rpx;
                        color: #666;
                        margin: 8rpx 0;

                        .u-icon {
                            margin-left: 10rpx;
                        }
                    }

                    .express-info {
                        font-size: 24rpx;
                        color: #999;
                        padding: 20rpx;
                        background: #dcdcdc;
                        border-radius: 8rpx;
                    }
                }
            }
        }
    }
}
</style>