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">
                <u-image width="160rpx" height="160rpx" :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"
                        >回收价
                        <text style="font-weight: 600; color: #ff0000; margin-left: 8rpx">
                            ¥{{ recycleMoney }}</text
                        ></view
                    >
                    <u-number-box
                        class="number-box"
                        bg-color="#38c148"
                        color="#ffffff"
                        v-model="book.num"
                        :min="1"
                        :max="book.maxNum || 40"
                        @blur="onQuantityChange"
                        @minus="addReduceNum(-1)"
                        @plus="addReduceNum(1)"
                        :disabled="book.status != 1"
                    ></u-number-box>
                </view>
            </view>
            <view class="delete-btn" @tap="onDelete">
                <u-icon name="close" size="26" color="#999"></u-icon>
            </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 {};
    },
    computed: {
        recycleMoney() {
            return (this.book.recyclePrice * (this.book.num || 1)).toFixed(2);
        },
    },
    methods: {
        onDelete() {
            this.$refs.deleteDialog.openPopup();
        },
        confirmDelete() {
            this.$emit("delete", this.book);
        },
        // /api/token/order/addReduceNum
        addReduceNum(changeNum) {
            uni.$u.http
                .post("/token/order/addReduceNum", {
                    orderId: this.book.orderId,
                    isbn: this.book.isbn,
                    changeNum,
                })
                .then((res) => {
                    if (res.data == 1) {
                        this.$emit("quantity-change", this.book);
                    }
                });
        },
        onQuantityChange(data) {
            uni.$u.http
                .post("/token/order/changeNum", {
                    orderId: this.book.orderId,
                    isbn: this.book.isbn,
                    afterNum: data.value,
                })
                .then((res) => {
                    if (res.data == 1) {
                        this.$emit("quantity-change", this.book);
                    }
                });
        },
    },
};
</script>

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

    .book-info {
        display: flex;
        align-items: center;
        position: relative;

        .book-image-container {
            position: relative;
            
            .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-cover {
            width: 140rpx;
            height: 196rpx;
            border-radius: 8rpx;
        }

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

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