caimei-applets-store/components/views/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">
                <!-- 拼团价  活动价  限时特价  券后价   -->
                <!-- 该商品参与了商城活动 -->
                <template v-if="isActivityProduct">
                    <view class="tag pt" v-if="data.collageStatus > 0">拼团价</view>
                    <view class="tag hd" v-else-if="data.activeStatus > 0">活动价</view>
                    <view class="tag other" v-else-if="data.discountStatus > 0">限时特价</view>
                </template>
                <!-- 该商品未参与商城活动 -->
                <template v-else>
                    <view class="tag other" v-if="data.couponStatus > 1">{{ data.couponInfo }}</view>
                    <view class="tag other" v-else-if="data.couponStatus > 0">券后价</view>
                </template>
            </view>
            <!-- 底部 -->
            <view class="footer">
                <!-- 价格 -->
                <view class="price">
                    <view class="delete">
                        <text v-if="data.normalPrice">￥{{ data.normalPrice | priceFormat }}</text>
                    </view>
                    <view>￥{{ showPrice | priceFormat }}</view>
                </view>
                <!-- 加入购物车 -->
                <view
                    class="add-cart iconfont icon-gouwuche"
                    @click.stop="addCart"
                    v-if="data.collageStatus !== 1"
                ></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-product',
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        isActivityProduct() {
            return this.data.collageStatus > 0 || this.data.activeStatus > 0 || this.data.discountStatus > 0
        },
        showPrice() {
            return this.data.couponStatus === 1 && !this.isActivityProduct ? this.data.couponPrice : this.data.price
        }
    },
    methods: {
        // 跳转商品详情
        detail() {
            this.$router.navigateTo(`goods/goods-detail?productId=${this.data.productId}&jumpState=1`)
        },
        // 加入购物车
        addCart() {
            this.$store.dispatch('cart/addToCart', { skuId: this.data.skuId })
        }
    }
}
</script>

<style lang="scss" scoped>
$width: 224rpx;
$height: 430rpx;
$radius: 16rpx;
$grid: 16rpx;

.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: 8rpx 0;
    }
    .title {
        height: 70rpx;
        font-size: 26rpx;
        line-height: 35rpx;
        text-align: justify;
        word-break: break-all;
        color: #333333;
        @include ellipsis(2);
    }
    .tags {
        @extend .cm-flex-center;
        justify-content: flex-start;
        height: 24rpx;
    }
    .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 {
            height: 66rpx;
            box-sizing: border-box;
            padding-right: $grid;
            font-size: 26rpx;
            font-weight: 700;
            color: #f83c6c;
            .delete {
                height: 26rpx;
                margin-top: 4rpx;
                font-size: 20rpx;
                color: #999999;
                text-decoration: line-through;
                font-weight: normal;
            }
        }
    }
}
</style>