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 logVoList" :key="index">
                    <view class="timeline-dot"></view>
                    <view class="timeline-info">
                        <view class="status" v-if="!isReturn">{{ statusTextMap[item.status] }}</view>
                        <view class="status" v-else>{{ statusTextMap2[item.status] }}</view>
                        <view class="time" v-if="item.createTime">{{ item.createTime }}</view>
                        <view class="desc" v-if="item.description">{{ item.description }}</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',
    props: {
        logVoList: {
            type: Array,
            default: () => []
        },
        isReturn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isExpanded: false,
            statusTextMap: {
                '0': '待提交',
                '1': '已删除',
                '2': '待初审',
                '3': '待取件',
                "4": '初审未通过',
                "5": '已揽件',
                "6": '已签收',
                "7": '物流签收',
                '8': '待审核',
                '9': '审核中',
                '10': '待到款',
                '11': '已完成',
            },

            statusTextMap2: {
                '0': '待付款',
                '1': '待发货',
                '2': '已推送',
                '3': '已发货',
                '4': '已签收',
                "5": '已完成',
                "6": '已取消',
                "7": '超时取消',
            }
        }
    },
   
    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>