book-hi/pages-car/components/cart-item.vue

<template>
    <view class="cart-item">
        <!-- 复选框 -->
        <view class="checkbox-box">
            <u-checkbox v-model="item.checked" shape="circle" active-color="#38C148"
                @change="onCheckChange" :disabled="!isValid"></u-checkbox>
        </view>

        <!-- 商品图片 -->
        <view class="image-wrapper">
            <image :src="item.cover" mode="aspectFill" class="book-cover"></image>
            <!-- 状态遮罩 -->
            <view class="status-mask" v-if="!isValid">
                <text>{{ statusText }}</text>
            </view>
            <!-- 库存紧张遮罩 -->
            <view class="stock-mask" v-if="isValid && item.stockWarning">
                <text>库存紧张</text>
            </view>
        </view>

        <!-- 商品信息 -->
        <view class="info-box">
            <view class="title">{{ item.title }}</view>

            <!-- 标签和品相区域 -->
            <view class="tags-quality-row">
                <!-- 品相选择 (模拟) -->
                <view class="quality-selector">
                    <text>品相：{{ item.quality || '中等' }}</text>
                    <u-icon name="arrow-down" size="20" color="#999" style="margin-left: 4rpx;"></u-icon>
                </view>

                <!-- 已降价标签 -->
                <view class="tag green-tag" v-if="item.reducedAmount > 0">
                    <text>已降¥{{ item.reducedAmount }}</text>
                </view>
                <!-- 可降价标签 -->
                <view class="tag orange-tag" v-if="item.canReduceAmount > 0" @click.stop="handleReduce">
                    <text>可降¥{{ item.canReduceAmount }}</text>
                </view>
            </view>

            <!-- 底部价格和操作 -->
            <view class="bottom-row">
                <view class="price-box">
                    <text class="symbol">¥</text>
                    <text class="amount">{{ item.price }}</text>
                </view>

                <!-- 去减钱按钮 -->
                <view class="reduce-btn" v-if="item.canReduceAmount > 0" @click.stop="handleReduce">
                    <text>去减钱</text>
                </view>

                <!-- 数量加减 -->
                <u-number-box v-model="item.num" :min="1" :max="item.stock || 99" :disabled="!isValid"
                    @change="onNumChange" :size="24"></u-number-box>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        isValid() {
            // status: 1-正常, 0-无效/无库存
            return this.item.status === 1 && this.item.stock > 0;
        },
        statusText() {
            if (this.item.stock <= 0) return '暂无库存';
            if (this.item.status !== 1) return '失效';
            return '';
        }
    },
    methods: {
        onCheckChange(val) {
            this.$emit('check', { id: this.item.id, checked: val.value });
        },
        onNumChange(val) {
            this.$emit('changeNum', { id: this.item.id, num: val.value });
        },
        handleReduce() {
            this.$emit('reduce', this.item);
        }
    }
}
</script>

<style lang="scss" scoped>
.cart-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 30rpx 20rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;

    .checkbox-box {
        width: 50rpx;
        display: flex;
        justify-content: center;
        flex-shrink: 0;

        &.disabled-checkbox {
            .circle {
                width: 34rpx;
                height: 34rpx;
                border-radius: 50%;
                background-color: #e5e5e5;
            }
        }
    }

    .image-wrapper {
        position: relative;
        width: 150rpx;
        height: 200rpx;
        border-radius: 8rpx;
        overflow: hidden;
        flex-shrink: 0;
        margin-right: 20rpx;

        .book-cover {
            width: 100%;
            height: 100%;
        }

        .status-mask {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40rpx;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            
            text {
                color: #fff;
                font-size: 20rpx;
            }
        }

        .stock-mask {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40rpx;
            background-color: #38C148; // Green background
            opacity: 0.8;
            display: flex;
            justify-content: center;
            align-items: center;
            
            text {
                color: #fff;
                font-size: 20rpx;
            }
        }
    }

    .info-box {
        flex: 1;
        height: 220rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            font-size: 28rpx;
            color: #333;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-weight: 500;
        }

        .tags-quality-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin: 20rpx 0 0 0;

            .tag {
                font-size: 22rpx;
                padding: 2rpx 8rpx;
                border-radius: 4rpx;
                margin-right: 10rpx;
                border: 1rpx solid transparent;
                margin-bottom: 6rpx;

                &.green-tag {
                    color: #38C148;
                    border-color: #38C148;
                    background-color: rgba(56, 193, 72, 0.1);
                }

                &.orange-tag {
                    color: #ff6a00;
                    border-color: #ff6a00;
                    background-color: rgba(255, 106, 0, 0.1);
                }

                &.red-text-tag {
                    background-color: #38C148;
                    color: #fff;
                    border: none;
                }
            }

            .quality-selector {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #999;
                background-color: #f5f5f5;
                padding: 4rpx 12rpx;
                border-radius: 4rpx;
                width: fit-content;
                margin-bottom: 6rpx;
                margin-right: 10rpx;
                order: -1; // Move to front
            }
        }

        .bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;

            .price-box {
                color: #e02020;
                font-weight: bold;

                .symbol {
                    font-size: 24rpx;
                }

                .amount {
                    font-size: 36rpx;
                }
            }

            .reduce-btn {
                background-color: #38C148;
                color: #fff;
                font-size: 20rpx;
                padding: 6rpx 16rpx;
                border-radius: 20rpx;
                margin-left: 10rpx;
                margin-right: auto; // Push num box to right
            }
        }
    }
}
</style>