book-hi/pages-mine/components/order-return-item.vue

<template>
    <view class="order-return-item" @click="goToDetail">
        <!-- 订单头部 -->
        <view class="order-header">
            <text class="common-text-2 font-30">卖书编号：{{ order.orderId }}</text>
            <text class="order-status" style="color: #FF000C" v-if="showAction">{{ statusTextMap[order.status]
                }}</text>

            <template v-else>
                <text class="order-status" style="color: #FF000C" v-if="!order.restTime">已超时</text>
                <view class="time-container" style="min-width: 220rpx;" v-else>
                    <u-count-down class="time" :timestamp="order.restTime" separator="zh" separator-size="28"
                        separator-color="#FF0000" color="#FF0000" bg-color="transparent" :show-seconds="false"
                        :show-days="false"></u-count-down>
                    <text class="order-status" style="color: #FF000C">超时</text>
                </view>
            </template>
        </view>

        <!-- 书籍列表 - 改为横向滚动 -->
        <scroll-view scroll-x class="book-scroll" :show-scrollbar="false" enhanced>
            <view class="book-list">
                <image v-for="(book, index) in order.detailCoverList" :key="index" :src="book" class="book-cover"
                    mode="aspectFill" />
            </view>
        </scroll-view>

        <!-- 订单信息 -->
        <view class="flex-a flex-j-b mb-20">
            <text class="common-text">提交时间：{{ order.orderTime || '-' }}</text>
            <text class="common-title">共{{ order.canRefundNum || order.totalNum }}本</text>
        </view>

        <!-- 底部按钮 -->
        <order-return-actions :order="order" :status="order.status" @action="handleAction" v-if="showAction" />
    </view>
</template>

<script>
import OrderReturnActions from '@/pages-mine/components/order-return-actions.vue'
export default {
    name: 'order-return-item',
    components: {
        OrderReturnActions
    },
    props: {
        order: {
            type: Object,
            required: true
        },
        showAction: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // 0-创建(待付款) 1-已付款 2-已推送 3-已发货 4-已签收 5-已完成 6-已取消 7-超时取消
            statusTextMap: {
                '0': '待付款',
                '1': '待发货',
                '2': '已推送',
                '3': '已发货',
                '4': '已签收',
                "5": '已完成',
                "6": '已取消',
                "7": '超时取消',
            }
        }
    },
    methods: {
        goToDetail() {
            if (this.showAction) {
                uni.navigateTo({
                    url: `/pages-mine/pages/return-detail?orderId=${this.order.orderId}`
                })
            } else {
                if (this.order.restTime) {
                    uni.navigateTo({
                        url: `/pages-mine/pages/apply?orderId=${this.order.orderId}`
                    })
                } else {
                    uni.showToast({
                        title: '已超时',
                        icon: 'none'
                    })
                }
            }
        },
        handleAction(data) {
            this.$emit('action', data)
        }
    }
}
</script>

<style lang="scss" scoped>
.order-return-item {
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-status {
            font-size: 28rpx;
        }
    }

    // 修改图片滚动区域样式
    .book-scroll {
        width: 100%;
        white-space: nowrap;
        margin: 30rpx 0 20rpx 0;

        .book-list {
            display: inline-flex;
            padding-right: 20rpx; // 为最后一张图片添加右边距
            gap: 20rpx;

            .book-cover {
                width: 132rpx;
                height: 132rpx;
                border-radius: 10rpx;
                flex-shrink: 0; // 防止图片被压缩
            }
        }
    }
}

// 隐藏滚动条
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}
</style>