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

<template>
    <view class="book-item">
        <view class="book-info">
            <image class="book-cover" :src="book.cover" mode="aspectFill" />
            <view class="book-detail">
                <view class="top-info">
                    <view class="book-title">{{ book.bookName }}</view>
                    <view class="book-tags">
                        <text class="tzs tag-text" v-if="book.suit == 1">套装书</text>
                        <text class="kmdb tag-text" v-if="book.maxNum > 1">可卖多本</text>
                    </view>

                    <view class="flex flex-j-b flex-a-c mt-20">
                        <view class="book-price">预估价： ¥{{ book.expectMoney }}</view>
                    </view>
                </view>
                <view v-if="isReturn" class="book-price">退回信息</view>
                <template v-else>
                    <view class="book-price" v-if="book.auditCommentList && book.auditCommentList.length">审核信息</view>
                    <view v-else class="book-price">暂无审核信息</view>
                </template>
            </view>
            <view class="delete-btn">
                <text>×{{ book.auditCommentList.length }}</text>
            </view>
        </view>
        <view class="mt-10" style="padding-left: 150rpx;">
            <view class="audit-info" v-if="isReturn">
                <view class="audit-item" v-for="(audit, index) in book.auditCommentList" :key="index">
                    <view class="audit-reason" v-if="audit.com">
                        原因：{{ audit.com }}
                    </view>
                </view>
            </view>
            <template v-else>
                <view class="audit-info" v-if="book.auditCommentList && book.auditCommentList.length">
                    <view class="audit-item" v-for="(audit, index) in book.auditCommentList" :key="index">
                        <view class="flex-a w100">
                            <view class="flex-a flex-1">
                                <view class="common-text-2 mr-16">第{{ index + 1 }}本</view>
                                <view class="audit-status" :class="audit.sts == 1 ? 'status-good' : 'status-bad'">
                                    {{ audit.com }}
                                </view>
                            </view>
                            <view class="audit-price">
                                <u-checkbox shape="circle" :name="book.isbn + '-' + index" 
                                    v-model="checkboxValue[index]"
                                    @change="(e) => handleSelect(e, { index, isbn: book.isbn })"></u-checkbox>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
import commonDialog from '@/components/common-dialog.vue';
export default {
    components: {
        commonDialog
    },
    props: {
        book: {
            type: Object,
            required: true
        },
        isReturn: {
            type: Boolean,
            default: false
        },
        modelValue: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            checkboxValue: {}
        }
    },
    watch: {
        'book.auditCommentList': {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    newVal.forEach((audit, index) => {
                        this.$set(this.checkboxValue, index, audit.isSelected || false);
                    });
                }
            }
        }
    },
    methods: {
        handleSelect(e, { index, isbn }) {
            // 更新本地状态
            this.$set(this.checkboxValue, index, e.value);
            // 触发父组件更新
            this.$emit('select', { checked: e.value, index, isbn });
        }
    }
}
</script>

<style lang="scss" scoped>
.book-item {
    background: #FFFFFF;
    margin-bottom: 30rpx;
    border-radius: 10rpx;

    .tag-text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
    }

    .tzs {
        width: 91rpx;
        height: 30rpx;
        background: linear-gradient(263deg, #98E05F, #0DE3AC);
        border-radius: 2rpx;
        padding: 4rpx 10rpx;
        margin-right: 10rpx;
    }

    .kmdb {
        width: 117rpx;
        height: 30rpx;
        background: linear-gradient(263deg, #F7CB6B, #FBA980);
        border-radius: 2rpx;
        padding: 4rpx 10rpx;
        margin-right: 10rpx;
    }

    .book-info {
        display: flex;
        position: relative;

        .book-cover {
            width: 140rpx;
            height: 196rpx;
            border-radius: 8rpx;
        }

        .book-detail {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            :v-deep .u-number-input {
                background: #F9F9F9 !important;
                border-radius: 6rpx;
            }

            .book-title {
                max-width: 400rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 1.4;
                margin-bottom: 20rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-family: Source Han Sans CN;
                font-weight: 400;
            }

            .book-price {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
            }
        }

        .delete-btn {
            position: absolute;
            right: 0;
            top: -10rpx;
            padding: 10rpx;
        }
    }

    .audit-info {
        min-height: 60rpx;
        background: #FAFAFA;
        border-radius: 10rpx;
        padding: 12rpx 20rpx;
        box-sizing: border-box;

        .audit-item {
            margin-bottom: 6rpx;
            font-size: 24rpx;
            line-height: 42rpx;
        }

        .audit-status {
            margin-right: 20rpx;

            &.status-good {
                color: #67C23A;
            }

            &.status-bad {
                color: #F56C6C;
            }
        }

        .audit-price {
            color: #F56C6C;
        }

        .audit-reason {
            font-size: 26rpx;
            color: #999;
            font-weight: 400;
            font-family: PingFang SC;
            margin-top: 6rpx;
        }
    }
}
</style>