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

<template>
    <view class="book-item" @click="handleClick">
        <!-- 书籍封面 -->
        <image class="book-cover" :src="book.cover" mode="aspectFill" />
        <!-- 书籍详情 -->
        <view class="book-info">
            <view class="book-title">{{ book.bookName || book.name }}</view>
            <view class="book-price">
                <view class="sale-price">
                    <text class="symbol">¥</text>
                    <text class="amount">{{ book.price || book.recycleMoney }}</text>
                </view>
                <text class="origin-price" v-if="book.producePrice">¥{{ book.producePrice }}</text>
            </view>
        </view>
        <!-- 选择框 -->
        <view class="checkbox-item" v-if="isEditMode" @click.stop>
            <u-checkbox v-show="isEditMode" class="checkbox-item" v-model="book.selected" :name="book.isbn"
                shape="circle" label-size="0" active-color="#38C148" @change="updateCheckbox"></u-checkbox>
        </view>
    </view>
</template>

<script>
export default {
    name: 'BookListItem',
    props: {
        book: {
            type: Object,
            required: true
        },
        isEditMode: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        updateCheckbox({ value }) {
            this.$nextTick(() => {
                this.$emit('checked', { book: this.book, checked: value })
            })
        },
        handleClick() {
            if (this.isEditMode) {
                // 编辑模式下点击整个卡片也切换选中状态
                this.book.selected = !this.book.selected;
                this.updateCheckbox({ value: this.book.selected });
                return;
            }
            this.$emit('click', this.book);
        }
    }
}
</script>

<style lang="scss" scoped>
.book-item {
    position: relative;
    width: calc((100vw - 80rpx) / 3);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10rpx;
    height: 100%;
    padding-bottom: 10rpx;

    .check-icon {
        position: absolute;
        left: 6rpx;
        top: 6rpx;
        z-index: 1;
        width: 32rpx;
        height: 32rpx;
        background: #38C148;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .book-cover {
        width: 140rpx;
        height: 197rpx;
        border-radius: 8rpx;
        margin-bottom: 8rpx;
    }

    .book-info {
        width: 100%;

        .book-title {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 8rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            margin-top: 15rpx;
        }

        .book-price {
            margin-bottom: 12rpx;
            font-family: Source Han Sans CN;
            display: flex;
            align-items: baseline;

            .sale-price {
                color: #FF5B5B;
                margin-right: 12rpx;
                display: flex;
                align-items: baseline;
                font-weight: bold;
                
                .symbol {
                    font-size: 24rpx;
                    margin-right: 2rpx;
                }
                .amount {
                    font-size: 32rpx;
                    line-height: 1;
                }
            }

            .origin-price {
                font-size: 24rpx;
                color: #999999;
                text-decoration: line-through;
            }
        }
    }

    .checkbox-item {
        position: absolute;
        right: 6rpx;
        top: 0;
        z-index: 9;

        ::v-deep .u-checkbox__label {
            margin: 0 !important;
        }
    }
}
</style>