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">{{ item.statusName }}</view>
                        <view class="time" v-if="item.createTime">{{ item.createTime }}</view>
                        <view class="desc" v-if="item.description">
                            {{ item.description }}

                            <image
                                v-if="item.status == 5"
                                src="../static/copy.png"
                                style="width: 42rpx; height: 42rpx; margin-left: 20rpx; position: relative; top: 6rpx"
                                @click.stop="copyExpressNo(item.description)"
                            ></image>
                        </view>
                        <!-- 快递单号 -->
                        <view class="express-no" v-if="isNoTracking(item)"> 暂无物流信息 </view>
                        <!-- 物流信息 -->
                        <view class="express-info" v-if="isTracking(item)">
                            <view class="timeline-list">
                                <view class="timeline-item" v-for="(track, index) in trackingVoList" :key="index">
                                    <view class="timeline-dot"></view>
                                    <view class="timeline-info">
                                        <view class="status">{{ track.title || track.status }}</view>
                                        <view class="time" v-if="track.time || track.ftime">{{
                                            track.time || track.ftime
                                        }}</view>
                                        <view class="desc" v-if="track.description || track.context">
                                            {{ track.description || track.context }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "order-timeline",
    props: {
        logVoList: {
            type: Array,
            default: () => [],
        },
        isReturn: {
            type: Boolean,
            default: false,
        },
        trackingVoList: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        isNoTracking() {
            return (item) => {
                return (item.status == 5 || (item.status == 3 && this.isReturn)) && this.trackingVoList.length == 0;
            };
        },
        isTracking() {
            return (item) => {
                return (item.status == 5 || (item.status == 3 && this.isReturn)) && this.trackingVoList.length > 0;
            };
        },
    },
    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) 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: #888888;
                        margin: 8rpx 0;
                        width: 100%;
                        height: 88rpx;
                        line-height: 88rpx;
                        background: #cdcdcd;
                        border-radius: 10rpx;
                        padding-left: 30rpx;

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

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