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

<template>
    <view class="cart-item" @click="goToDetail">
        <!-- 复选框扩大点击区域 -->
        <view class="checkbox-box" @click.stop="toggleCheck">
            <u-checkbox v-model="item.checked" shape="circle" active-color="#38C148" @change="onCheckChange"
                :disabled="!isValid" style="width:100%; pointer-events: none;"></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.stockStatus === 2">
                <text>库存紧张</text>
            </view>
        </view>

        <!-- 商品信息 -->
        <view class="info-box">
            <view class="title" style="font-weight:500">{{ item.bookName }}</view>

            <!-- 标签和品相区域 -->
            <view class="tags-quality-row">
                <!-- 品相选择 -->
                <view class="quality-selector" @click.stop="handleSelectCondition">
                    <text>品相：{{ conditionName }}</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.currReduceMoney > 0">
                    <text>已降¥{{ item.currReduceMoney }}</text>
                    <image src="../static/down.jpg"
                        style="width: 20rpx; height: 20rpx; margin-left: 4rpx;position: relative;top: 4rpx;"></image>
                </view>
                <!-- 可降价标签 -->
                <view class="tag green-tag" v-if="canReduce" @click.stop="handleReduce">
                    <text>可降¥{{ item.reduceMoney }}</text>
                    <image src="../static/down.jpg"
                        style="width: 20rpx; height: 20rpx; margin-left: 4rpx;position: relative;top: 4rpx;"></image>
                </view>

                <!-- 倒计时 -->
                <view class="countdown-wrap" v-if="item.restTime > 0">
                    <text>减价即将结束</text>
                    <u-count-down :timestamp="item.restTime" format="HH:mm:ss" autoStart color="#db0702" font-size="24"
                        separator-color="#db0702" separator-size="24" @finish="onCountdownFinish"></u-count-down>
                </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.canInvite == 1 && canReduce" @click.stop="handleReduce">
                    <text>去减钱</text>
                </view>

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

<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
        };
    },
    computed: {
        conditionName() {
            // 如果是数字，映射；如果是字符串，直接显示
            return this.$conditionMap[this.item.conditionType] || '-';
        },
        isValid() {
            // stockStatus: 1-有库存 2-库存紧张 3-暂无库存
            return this.item.stockStatus !== 3 && this.item.availableStock > 0;
        },
        statusText() {
            if (this.item.stockStatus === 3 || this.item.availableStock <= 0) return '暂无库存';
            // 如果后端定义了其他状态，你可能需要处理它们
            return '';
        },
        canReduce() {
            // 逻辑：如果成功减价次数少于允许的最大次数，且 reduceMoney > 0
            // 或者简单地如果 reduceMoney > 0 且我们还没有达到限制？
            // 假设 reduceMoney 是单价减少额。
            return (this.item.reduceNum < this.item.maxReduceNum) && (this.item.reduceMoney > 0);
        }
    },
    methods: {
        toggleCheck() {
            if (!this.isValid) return;
            const newChecked = !this.item.checked;
            this.item.checked = newChecked;
            this.$emit('check', { id: this.item.id, checked: newChecked });
        },
        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);
        },
        handleSelectCondition() {
            this.$emit('selectCondition', this.item);
        },
        onCountdownFinish() {
            this.$emit('countdown-finish', this.item);
        },
        goToDetail() {
            const isbn = this.item.isbn || this.item.bookIsbn || this.item.id;
            if (isbn) {
                uni.navigateTo({
                    url: `/pages-sell/pages/detail?isbn=${isbn}`
                });
            }
        }
    }
};
</script>

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

    .checkbox-box {
        width: 80rpx;
        height: 100%;
        min-height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-right: -20rpx;
        position: relative;
        z-index: 10;

        &.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; // 绿色背景
            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;

        ::v-deep .u-countdown-colon {
            font-size: 24rpx !important;
        }

        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .title {
                flex: 1;
                font-size: 28rpx;
                color: #333;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-weight: 600;
                margin-right: 10rpx;
            }
        }

        .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: 4rpx 8rpx;
                border-radius: 4rpx;
                margin-right: 10rpx;
                border: 1rpx solid transparent;
                margin-bottom: 6rpx;

                &.green-tag {
                    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; // 移到前面
            }

            .countdown-wrap {
                display: flex;
                align-items: center;
                font-size: 24rpx !important;
                color: #db0702;
                margin-left: 6rpx;
                margin-top: 6rpx;

                text {
                    margin-right: 6rpx;
                }
            }
        }

        .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: 24rpx;
                padding: 6rpx 16rpx;
                border-radius: 26rpx;
                margin-left: 10rpx;
                margin-right: auto; // 将数字框推到右边
            }
        }
    }
}
</style>