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

<template>
    <view class="book-item" :class="{ disabled: book.status != 1 }">
        <view class="book-info">
            <view class="book-image-container">
                <image class="book-cover" :src="book.cover" mode="aspectFill" />
                <view class="no-recycle" v-if="book.status != 1">
                    <text>已收满</text>
                </view>
            </view>
            <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>

                <view class="flex flex-j-b flex-a-c">
                    <view class="book-price">预估价： ¥{{ book.recycleMoney }}</view>
                </view>
            </view>
            <view class="delete-btn">
                <text>×{{ book.num }}</text>
            </view>
        </view>

        <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
            <text>确定删除这本图书吗？</text>
        </common-dialog>
    </view>
</template>

<script>
import commonDialog from "@/components/common-dialog.vue";
export default {
    components: {
        commonDialog,
    },
    props: {
        book: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {};
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.book-item {
    background: #ffffff;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    &.disabled {
        background: #f9ccc9;
    }

    .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-image-container {
            position: relative;

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

            .no-recycle {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background-color: #ff5252;
                color: #ffffff;
                padding: 4rpx 10rpx;
                border-radius: 4rpx 4rpx 0 0;
                font-size: 24rpx;
                text-align: center;
                width: 100%;
            }
        }

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