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 type3">拼团价</view>
                <view class="tag type2" v-if="data.activeStatus == 1">活动价</view>
                <view class="tag type2" v-if="data.couponsLogo">优惠券</view>
            </view>
            <!-- 底部 -->
            <view class="footer">
                <!-- 价格 -->
                <view class="price">
                    <text>￥{{ data.price | priceFormat }}</text>
                    <text class="delete">￥{{ data.price | priceFormat }}</text>
                </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-detail?productId=${this.data.productId}&jumpState=1`
            })
        },
        // 加入购物车
        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;
    overflow: hidden;
    .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: 70rpx;
        font-size: 26rpx;
        line-height: 35rpx;
        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;
            }
            &.type3 {
                width: 80rpx;
                background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
                color: #fff;
                border-radius: 4rpx;
            }
        }
    }
    .footer {
        position: relative;
        
        .add-cart {
            position: absolute;
            bottom: 0;
            right: $grid;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 44rpx;
            height: 44rpx;
            background: #ff457b;
            color: #fff;
            border-radius: 50%;
        }
        .price {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; // 这里控制几行显示省略号
            -webkit-box-orient: vertical;
            box-sizing: border-box;
            padding-right: $grid;
            font-size: 26rpx;
            font-weight: 600;
            color: #f83c6c;
            .delete{
                font-size: 20rpx;
                color: #999999;
                text-decoration: line-through;
                font-weight: normal;
                margin-left: 10rpx;
            }
        }
    }
}
</style>