caimei-applets-store/components/views/cm-cart-product/cm-cart-product.vue

<template>
    <view class="cart-product">
        <image class="cover" :src="productInfo.productImage" mode="widthFix"></image>
        <view class="content">
            <view class="name">{{ productInfo.name }}</view>
            <template v-if="isExpired">
                <view class="tip">商品已下架</view>
            </template>

            <template v-else>
                <view class="unit">规格：{{ productInfo.productUnit }}</view>
                <template>
                    <view class="tags">
                        <!-- 拼团价  活动价  限时特价  券后价   -->
                        <view class="tag cx" v-if="userId === productInfo.heUserId">促销</view>
                        <view class="tag cx" v-else>自营</view>
                        <view class="tag pt" v-if="productInfo.collageStatus > 0">拼团价</view>
                        <view class="tag hd" v-else-if="productInfo.activeStatus > 0">活动价</view>
                        <view class="tag other" v-else-if="productInfo.discountStatus > 0">限时特价</view>
                    </view>
                    <template v-if="emptyStock">
                        <view class="empty-stock">
                            <view class="tip">重新选择商品规格</view>
                            <view class="btn" @click="$emit('unitChange', productInfo)">重选</view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="price">
                            <text>￥{{ productInfo.price | priceFormat }}</text>
                            <text class="delete" v-if="productInfo.normalPrice">
                                ￥{{ productInfo.normalPrice | priceFormat }}
                            </text>
                        </view>
                        <cm-number-box class="numberbox" v-model="productInfo.num" @change="change"></cm-number-box>
                    </template>
                </template>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-product',
    props: {
        isExpired: {
            type: Boolean,
            default: false
        },
        emptyStock: {
            type: Boolean,
            default: false
        },
        productInfo: {
            type: Object,
            default: () => {}
        },
        tagsList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        },
        limitedNum() {
            if (this.productInfo.collageStatus > 0) {
                return this.productInfo.collageProduct.limitedNum || this.productInfo.stock
            } else {
                return this.productInfo.stock
            }
        }
    },
    methods: {
        change(value) {
            this.$emit('countChange', {
                cartId: this.productInfo.cartId,
                count: value
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.cart-product {
    @extend .cm-flex-between;

    .cover {
        width: 180rpx;
        height: 180rpx;
        box-sizing: border-box;
        border: 1rpx dashed #e1e1e1;
    }

    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        margin-left: 16rpx;
    }

    .name {
        @include ellipsis(2);
        max-width: 440rpx;
        min-height: 68rpx;
        font-size: 26rpx;
        color: #333333;
    }

    .tip {
        margin-top: 80rpx;
        font-size: 26rpx;
        color: #f83c6c;
    }

    .empty-stock {
        display: flex;
        align-items: center;
        .tip {
            margin-top: 0;
            font-size: 28rpx;
            color: #666666;
        }
        .btn {
            font-size: 24rpx;
            color: #ff457b;
            border: 1rpx solid #ff457b;
            margin-left: 16rpx;
            box-sizing: border-box;
            line-height: 30rpx;
            padding: 0 12rpx;
            border-radius: 15rpx;
        }
    }

    .unit {
        min-height: 28rpx;
        font-size: 20rpx;
        color: #999999;
    }

    .tags {
        min-height: 30rpx;
    }

    .price {
        font-size: 26rpx;
        font-weight: 600;
        color: #f83c6c;

        .delete {
            font-size: 22rpx;
            color: #999999;
            font-weight: normal;
            text-decoration: line-through;
            margin-left: 8rpx;
        }
    }

    .numberbox {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
</style>