caimei-applets-hehe/components/cm-module/cm-product/cm-product.vue

<template>
    <view class="cm-product" @click.stop="detail">
        <view class="recommend" v-if="data.recommend === '1'"></view>
        <!-- 封面 -->
        <image class="cover" :src="data.mainImage"></image>
        <view class="content">
            <!-- 标题名称 -->
            <view class="title">{{ data.name }}</view>
            <!-- 标签 -->
            <view class="tags">
                <!-- <view class="tag type1">自营</view> -->
                <view class="tag type2" v-if="data.activeStatus == 1">活动价</view>
            </view>
            <!-- 底部 -->
            <view class="footer">
                <!-- 价格 -->
                <view class="price">￥{{ data.price | priceFormat }}</view>
                <!-- 加入购物车 -->
                <view class="add-cart iconfont icon-gouwuche" @click.stop="addCart"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-product',
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    filters: {
        priceFormat(val) {
            return Number(val).toFixed(2)
        }
    },
    methods: {
        // 跳转商品详情
        detail() {
            uni.navigateTo({
                url: `/pages/goods/product?productId=${this.data.productId}`
            })
        },
        // 加入购物车
        addCart(){
            this.$store.dispatch('cart/addToCart', { productId: this.data.productId })
        }
    } 
}
</script>

<style lang="scss" scoped>
$width: 339rpx;
$height: 532rpx;
$radius: 16rpx;
$grid: 24rpx;

.cm-product {
    position: relative;
    width: $width;
    height: $height;
    background: #fff;
    border-radius: $radius;
    .recommend {
        position: absolute;
        top: 0;
        left: 34rpx;
        width: 68rpx;
        height: 55rpx;
        background: url(https://static.caimei365.com/app/mini-hehe/icon/recommend.png) no-repeat center;
        background-size: 68rpx 55rpx;
    }
    .cover {
        width: $width;
        height: $width;
    }
    .title,
    .tags,
    .footer {
        padding: 0 $grid;
        margin: 12rpx 0;
    }
    .title {
        height: 66rpx;
        font-size: 26rpx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 这里控制几行显示省略号
        -webkit-box-orient: vertical;
    }
    .tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 24rpx;
        .tag {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30rpx;
            margin-right: 8rpx;
            font-size: 22rpx;
            &.type1 {
                width: 56rpx;
                background: #ff457b;
                border-radius: 4rpx;
                color: #ffffff;
            }
            &.type2 {
                width: 80rpx;
                background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
                background-size: 80rpx 30rpx;
                color: #f83c6c;
            }
        }
    }
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .add-cart {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 44rpx;
            height: 44rpx;
            background: #ff457b;
            color: #fff;
            border-radius: 50%;
        }
        .price {
            flex: 1;
            font-size: 26rpx;
            font-weight: 600;
            color: #f83c6c;
        }
    }
}
</style>