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" v-if="priceType !== 'normal' && productData.normalPrice">
                    {{ productData.normalPrice | priceFormat }}
                </text>
            </view>
            <view class="price-tags">
                <template v-if="priceType !== 'normal'">
                    <view class="tag-pt" v-if="priceType === 'group'">
                        <text v-if="collageInfo">{{ collageInfo.memberNum }}人拼团</text>
                    </view>
                    <view class="tag-hd" v-else-if="priceType === 'activity'">活动价</view>
                    <view class="tag-xs" v-else>限时特价</view>
                </template>
            </view>
            <!-- 券后价 -->
            <view class="tag-qh" v-if="hasCouponPrice && priceType === 'normal'">
                券后价￥{{ productData.couponPrice | priceFormat }}
            </view>
        </view>
        <!-- 券后价 -->
        <view class="row" v-if="hasCouponPrice && priceType !== 'normal'">
            <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" v-text="countDownTime.ddhh"></text>
                :
                <!-- 分 -->
                <text class="mm" v-text="countDownTime.mm"></text>
                :
                <!-- 秒 -->
                <text class="ss" v-text="countDownTime.ss"></text>
            </view>
        </view>
    </view>
</template>

<script>
import { countDown } from '@/common/utils.js'
export default {
    name: 'goods-price',
    props: {
        productData: {
            type: Object,
            default: () => null
        }
    },
    data() {
        return {
            timer: null,
            countDownTime: {}
        }
    },
    computed: {
        /* 商品价格类型 normal: 普通价 | group: 拼团价 | activity: 活动价 | time-limit: 限时特价 | coupon: 券后价 */
        priceType() {
            return this.productData?.activityType
        },
        // 有可使用优惠券
        hasCouponPrice() {
            return this.productData.couponStatus === 1
        },
        // 商品拼团信息
        collageInfo() {
            return this.productData?.collageProduct
        }
    },
    watch: {
        priceType(nVal) {
            if (nVal === 'time-limit') {
                this.countDown()
            }
        }
    },
    methods: {
        // 倒计时
        countDown() {
            const startTime = Date.now()
            const endTime = new Date(this.productData.discountEndTime).getTime()
            this.timer && clearTimeout(this.timer)
            countDown(endTime, startTime, {}, item => {
                this.countDownTime = item.conttainer
                this.timer = item.t
            })
        }
    }
}
</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>