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="book-title">
                    <view class="book-name">{{ book.bookName }}</view>
                    <view class="book-price-labels">
                        <view class="book-upsell has-upsell" v-if="book.currUpsellMoney > 0">已涨价{{ book.currUpsellMoney }}元</view>
                        <view class="book-upsell enable-upsell" v-if="!book.currUpsellMoney && book.upsellMoney">
                            可涨价{{ book.upsellMoney }}元
                            <image src="/static/img/activity/up.png" mode="aspectFill" style="width: 16rpx; height: 16rpx;margin-left: 6rpx;" />
                        </view>
                    </view>
                </view>

                <view class="flex flex-j-b flex-a-c mb-10">
                    <view class="top-info">
                        <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>

                    <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 class="flex flex-a-c" style="align-items: center;">
                    <view class="book-price"
                        >回收价
                        <text style="font-weight: 600; color: #db0702; margin-left: 8rpx">
                            ¥{{ recycleMoney }}</text
                        ></view
                    >
                    <view class="price-action" style="margin-left: 20rpx;">
                        <button class="up-price-btn" @tap="handleUpsell" v-if="book.canInvite === 1">去加价</button>
                        <view class="countdown-wrap" v-if="book.restTime > 0">
                            <text>加价剩余</text>
                            <u-count-down
                                :timestamp="book.restTime"
                                format="HH:mm:ss"
                                autoStart
                                color="#db0702"
                                font-size="24rpx"
                                separator-color="#db0702"
                                @finish="onCountdownFinish"
                            ></u-count-down>
                        </view>
                    </view>
                </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);
                    }
                });
        },
        handleUpsell() {
            this.$emit("upsell", this.book);
        },
        onCountdownFinish() {
            this.$emit("countdown-finish", 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;
                margin-bottom: 10rpx;
                display: flex;
                align-items: center;
            }
            
            .book-name {
                font-size: 28rpx;
                color: #333;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-family: Source Han Sans CN;
                font-weight: bold;
                word-break: break-all;
                margin-right: 10rpx;
            }

            .book-price-labels {
                display: flex;
                margin-top: -2rpx;
                flex-shrink: 0;
            }

            .book-price {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
            }
            
            .price-action {
                display: flex;
                align-items: center;
                
                .up-price-btn {
                    background-color: #38c148;
                    color: #ffffff;
                    font-size: 24rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    padding: 0 20rpx;
                    border-radius: 24rpx;
                }
                
                .countdown-wrap {
                    display: flex;
                    align-items: center;
                    font-size: 24rpx !important;
                    color: #db0702;
                    
                    text {
                        margin-right: 10rpx;
                    }
                    
                    :v-deep .u-count-down {
                        .u-count-down__text {
                            color: #db0702;
                            font-size: 20rpx;
                        }
                    }
                }
            }
        }

        .book-upsell {
            font-size: 22rpx;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
            display: inline-flex;
            align-items: center;

            &.has-upsell {
                color: #276f1e;
                background-color: #a8dda2;
            }
            
            &.enable-upsell {
                color: #ff0e11;
                background-color: #ffe9eb;
            }

            .u-image {
                margin-left: 4rpx;
            }
        }

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