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

<template>
    <view class="order-item" @click="goToDetail">
        <!-- 订单头部 -->
        <view class="order-header">
            <text class="common-text-2">卖书编号：{{ order.orderNo }}</text>
            <text class="order-status" :style="{ color: statusColorMap[order.status] }">{{ statusTextMap[order.status]
                }}</text>
        </view>

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

        <!-- 订单信息 -->
        <view class="flex-a flex-j-b">
            <text class="common-text">提交时间：{{ order.submitTime }}</text>
            <text class="common-title">共{{ order.books.length }}本</text>
        </view>

        <!-- 底部按钮 -->
        <view class="order-actions mt-20" v-if="getActions(order.status).length > 0">
            <u-button v-for="(action, index) in getActions(order.status)" :key="index" :type="action.type" size="mini"
                :plain="action.plain" class="action-btn" @click.stop="handleAction(action.action)" :customStyle="customStyle">{{ action.text }}</u-button>
        </view>
    </view>
</template>

<script>
export default {
    name: 'order-item',
    props: {
        order: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            statusTextMap: {
                'pending_review': '待初审',
                'cancelled': '已取消',
                'pending_audit': '待审核',
            },
            statusColorMap: {
                'pending_review': '#FF5B5B',
                'cancelled': '#999999',
                'pending_audit': '#FF5B5B',
            },
            customStyle: {
                height: '60rpx',
                borderRadius: '10rpx',
                width: '170rpx',
                fontSize: '28rpx',
            }
        }
    },
    methods: {
        getActions(status) {
            const actionMap = {
                'pending_review': [
                    { text: '取消交易', type: 'info', plain: true, action: 'cancel' },
                    { text: '投诉上报', type: 'primary', plain: true, action: 'report' },
                    { text: '修改地址', type: 'primary', plain: false, action: 'editAddress' }
                ],
                'pending_audit': [
                    { text: '提醒审核', type: 'primary', plain: false, action: 'remind' }
                ]
            }
            return actionMap[status] || []
        },
        goToDetail() {
            uni.navigateTo({
                url: `/pages-mine/pages/order-detail?id=${this.order.orderNo}`
            })
        },
        handleAction(action) {
            this.$emit(action, this.order)
        }
    }
}
</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: 185rpx;
                border-radius: 10rpx;
                flex-shrink: 0; // 防止图片被压缩
            }
        }
    }

    .order-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12rpx;
        margin-top: 30rpx;
    }
}

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