caimei-applets-store/pages/views/goods/components/goods-price/goods-price.vue

<template>
    <view class="goods-price" v-if="productData">
        <view class="row">
            <view class="price">
                <text class="amount">{{ productData.price | priceFormat }}</text>
                <text class="delete">{{ productData.normalPrice | priceFormat }}</text>
            </view>
            <view class="price-tags">
                <template v-if="priceType !== 'normal'">
                    <view class="tag-pt" v-if="priceType === 'group'">拼团价</view>
                    <view class="tag-hd" v-else-if="priceType === 'activity'">活动价</view>
                    <view class="tag-xs" v-else>限时特价</view>
                </template>
            </view>
        </view>
        <view class="row" v-if="hasCouponPrice">
            <!-- 券后价 -->
            <view class="tag-qh">券后价￥{{ productData.couponPrice | priceFormat }}</view>
        </view>

        <!-- 限时特价结束时间 -->
        <view class="countdown-box" v-if="priceType === 'time-limit'">
            <view class="tip">距离结束</view>
            <view class="time">
                <!-- 时 -->
                <text class="hh">72</text>
                :
                <!-- 分 -->
                <text class="mm">48</text>
                :
                <!-- 秒 -->
                <text class="ss">33</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'goods-price',
    props: {
        productData: {
            type: Object,
            default: () => null
        }
    },
    computed: {
        /* 商品价格类型 normal: 普通价 | group: 拼团价 | activity: 活动价 | time-limit: 限时特价 | */
        priceType() {
            let type
            if (this.productData.activeStatus > 0) {
                type = 'activity'
            } else if (this.productData.collageStatus > 0) {
                type = 'group'
            } else if (this.productData.discountStatus > 0) {
                type = 'time-limit'
            } else {
                type = 'normal'
            }
            return type
        },
        // 有可使用优惠券
        hasCouponPrice() {
            return this.couponStatus > 0
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-price {
    position: relative;
    padding: 24rpx;
    background-color: #fff;
    .row {
        @extend .cm-flex-center;
        justify-content: flex-start;

        &:nth-child(2) {
            margin-top: 4rpx;
        }
    }

    .price {
        .amount {
            font-size: 48rpx;
            font-weight: bold;
            color: #ff457b;

            &::before {
                content: '￥';
                font-size: 24rpx;
                vertical-align: 2rpx;
            }
        }

        .delete {
            margin-left: 16rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #999999;
            text-decoration: line-through;
            &::before {
                content: '￥';
            }
        }
    }

    .price-tags {
        margin-left: 24rpx;
        @extend .cm-flex-center;
        justify-content: flex-start;
        margin-top: 10rpx;
        .tag-pt {
            @extend .cm-flex-center;
            height: 32rpx;
            padding: 0 8rpx;
            background: linear-gradient(90deg, #6431f2 0%, #b03bb8 49%, #ff457b 100%);
            border-radius: 4rpx;
            font-size: 22rpx;
            color: #fff;
        }
        .tag-hd,
        .tag-xs {
            @extend .cm-flex-center;
            display: block;
            height: 30rpx;
            padding: 0 8rpx;
            background: #fff3f7;
            border: 1rpx solid #ff457b;
            border-radius: 4rpx;
            font-size: 22rpx;
            color: #ff457b;
        }
    }
    .tag-qh {
        @extend .cm-flex-center;
        height: 40rpx;
        background: #ff457b;
        border-radius: 25rpx;
        padding: 0 15rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #ffffff;
    }
}

.countdown-box {
    position: absolute;
    top: 50%;
    right: 24rpx;
    transform: translateY(-50%);
    @extend .cm-flex-center;
    flex-direction: column;
    width: 160rpx;
    .tip {
        font-size: 24rpx;
        color: #ff457b;
    }
    .time {
        margin-top: 20rpx;
        width: 160rpx;
        @extend .cm-flex-between;
        font-size: 24rpx;
        font-weight: bold;
        color: #333333;

        text {
            @extend .cm-flex-center;
            width: 40rpx;
            height: 40rpx;
            background: #333;
            border-radius: 4rpx;
            color: #ffffff;
        }
    }
}
</style>