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

<template>
    <view class="order-item" @click="goToDetail">
        <!-- 订单头部 -->
        <view class="order-header">
            <text class="common-text-2 font-30">卖书编号：{{ order.orderId }}</text>


            <text v-if="order.cancelStatus == 1 || order.status == -1" class="order-status" style="color: #FF000C">已取消</text>
            <text v-else class="order-status" style="color: #FF000C">{{ statusText }}</text>
        </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" v-if="order.orderTime">提交时间：{{ order.orderTime || '-' }}</text>
            <text class="common-title">共{{ order.totalNum || order.canRefundNum }}本</text>
        </view>

        <!-- 底部按钮 -->
        <order-actions :order="order" :status="order.status" @action="handleAction" @success="handleSuccess" />
    </view>
</template>

<script>
import OrderActions from '@/pages-mine/components/order-actions.vue'
export default {
    name: 'order-item',
    components: {
        OrderActions
    },
    props: {
        order: {
            type: Object,
            required: true
        },
        isReturn: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        statusText() {
            console.log(this.order.status, 'status')
            return this.statusTextMap[this.order.status]
        }
    },
    data() {
        return {
            statusTextMap: {
                '0': '待提交',
                '1': '已删除',
                '2': '待初审',
                '3': '待取件',
                "4": '初审未通过',
                "5": '已揽件',
                "6": '已签收',
                "7": '物流签收',
                '8': '待审核',
                '9': '审核中',
                '10': '待到款',
                '11': '已完成',
            }
        }
    },
    methods: {
        goToDetail() {
            if (this.isReturn) {
                uni.navigateTo({
                    url: `/pages-mine/pages/apply?orderId=${this.order.orderId}`
                })
            } else {
                uni.navigateTo({
                    url: `/pages-mine/pages/order-detail?orderId=${this.order.orderId}`
                })
            }
        },
        handleAction(data) {
            this.$emit('action', data)
        },
        handleSuccess() {
            console.log('handleSuccess')
            this.$emit('success')
        }
    }
}
</script>

<style lang="scss" scoped>
.order-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>