book-hi/pages-car/components/buy-book-item.vue

<template>
    <view class="book-item">
        <view class="book-info">
            <view class="book-image-container">
                <image class="book-cover" :src="book.cover" mode="aspectFill" />
            </view>
            <view class="book-detail">
                <view class="top-info">
                    <view class="book-title">{{ book.title }}</view>
                    <view class="upsell-info" v-if="book.priceReduced">
                        <text class="has-upsell">已降 ¥{{ book.priceReduced }}</text>
                    </view>
                    <view class="upsell-info" v-if="book.canReduce">
                        <text class="can-upsell">可降 ¥{{ book.canReduce }}</text>
                    </view>
                </view>

                <view class="flex flex-j-b flex-a-c">
                    <view class="book-quality">品相：{{ book.quality || '中等' }}</view>
                </view>
                
                <view class="flex flex-j-b flex-a-c mt-10">
                    <view class="book-price">
                        <text class="price">¥{{ book.price }}</text>
                        <text class="original-price ml-10">¥{{ book.originalPrice }}</text>
                    </view>
                    <view class="book-num">× {{ book.num }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        book: {
            type: Object,
            required: true
        }
    }
}
</script>

<style lang="scss" scoped>
.book-item {
    padding: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .book-info {
        display: flex;
        
        .book-image-container {
            .book-cover {
                width: 154rpx;
                height: 196rpx;
                border-radius: 8rpx;
                background-color: #eee;
            }
        }
        
        .book-detail {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            .book-title {
                font-size: 28rpx;
                color: #333;
                line-height: 1.4;
                margin-bottom: 10rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            
            .upsell-info {
                margin-bottom: 10rpx;
                .has-upsell {
                    font-size: 24rpx;
                    color: #38C148;
                    background-color: #e9f6eb;
                    padding: 4rpx 10rpx;
                    border-radius: 4rpx;
                }
                .can-upsell {
                    font-size: 24rpx;
                    color: #38C148;
                    background-color: #e9f6eb;
                    padding: 4rpx 10rpx;
                    border-radius: 4rpx;
                }
            }
            
            .book-quality {
                font-size: 24rpx;
                color: #999;
            }
            
            .book-price {
                .price {
                    font-size: 32rpx;
                    color: #ff4500;
                    font-weight: bold;
                }
                .original-price {
                    font-size: 24rpx;
                    color: #999;
                    text-decoration: line-through;
                }
            }
            
            .book-num {
                font-size: 28rpx;
                color: #333;
            }
        }
    }
}
</style>