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

<template>
    <view class="cart-product">
        <image class="cover" :src="productInfo.mainImage" mode="widthFix"></image>
        <view class="content">
            <view class="name">{{ productInfo.productName }}</view>
            <template v-if="isExpired">
                <view class="tip">商品已下架</view>
            </template>
            <template v-else>
                <view class="unit">规格：{{ productInfo.unit }}</view>
                <view class="tags">
                    <template v-if="tagsList.length > 0">
                        <view class="tag other" v-for="(tag, index) in tagsList" :key="index">{{ tag }}</view>
                    </template>
                    <template v-if="productInfo.activeStatus">
                        <view class="tag cx" v-if="userId === productInfo.heUserId">促销</view>
                        <view class="tag cx" v-else>自营</view>
                        <view class="tag hd" v-if="productInfo.ladderList.length > 0">活动价</view>
                    </template>
                </view>
                <view class="price">￥{{ productInfo.price | priceFormat }}</view>
                <cm-number-box class="numberbox" v-model="productInfo.productCount" @change="change"></cm-number-box>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-product',
    props: {
        isExpired: {
            type: Boolean,
            default: false
        },
        productInfo: {
            type: Object,
            default: () => {}
        },
        tagsList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        }
    },
    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;
    }

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

    .tags {
        min-height: 30rpx;
    }

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

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