book-hi/pages-home/components/BookListItem.vue

<template>
    <view class="book-item">
        <!-- 书籍封面 -->
        <image class="book-cover" :src="book.cover" mode="aspectFill" />
        <!-- 书籍详情 -->
        <view class="book-info">
            <view class="book-title">{{ book.bookName }}</view>
            <view class="book-price">
                <text>回收价：</text>
                <text class="price">¥{{ book.recycleMoney }}</text>
            </view>
            <view class="action-btn" :class="statusMap[book.status]" @click="handleAction">
                <u-icon name="plus" size="16" v-if="book.status == 2"></u-icon>
                <text style="margin-left:6rpx">{{ getStatusText(book.status) }}</text>
            </view>
        </view>
        <!-- 选择框 -->
        <u-checkbox v-show="isEditMode" class="checkbox-item" v-model="book.selected" :name="book.isbn" shape="circle"
            active-color="#38C148" @change="updateCheckbox"></u-checkbox>
    </view>
</template>

<script>
export default {
    name: 'BookListItem',
    props: {
        book: {
            type: Object,
            required: true
        },
        isEditMode: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            statusMap: {
                1: "added",
                2: 'pending',
                3: 'disabled'
            }
        }
    },
    methods: {
        getStatusText(status) {
            //  1-已加入卖书清单 2-未加入 3-暂不回收
            let key = this.statusMap[status]
            const statusKey = {
                pending: '加入卖书清单',
                added: '已加入卖书清单',
                disabled: '暂不回收'
            }
            return statusKey[key] || key
        },
        updateCheckbox({ value }) {
            this.$nextTick(() => {
                this.$emit('checked', { book: this.book, checked: value })
            })
        },
        handleAction() {
            this.$emit('action', 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;

    .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;
        }

        .book-price {
            font-size: 22rpx;
            margin-bottom: 12rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;

            text {
                color: #999999;

                &.price {
                    color: #FF5B5B;
                }
            }
        }

        .action-btn {
            width: 100%;
            padding: 8rpx 0;
            font-size: 22rpx;
            border-radius: 8rpx;
            text-align: center;
            gap: 4rpx;

            &.pending {
                background: #38C148;
                color: #FFFFFF;
            }

            &.added {
                background: #ffffff;
                color: #38C148;
                border: 1px solid #38C148;
            }

            &.disabled {
                background: #F5F5F5;
                color: #999999;
            }
        }
    }

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

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