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

<template>
    <view class="goods-price">
        <view class="row">
            <view class="price"> <text class="amount">9999.00</text> <text class="delete">12888.00</text> </view>
            <view class="price-tags">
                <!-- <view class="tag-pt">拼团价</view> 
                <view class="tag-hd">活动价</view> -->
                <view class="tag-xs">限时特价</view>
            </view>
        </view>
        <view class="row">
            <!-- 券后价 -->
            <view class="tag-qh">券后价￥6000.00</view>
        </view>

        <!-- 限时特价结束时间 -->
        <view class="countdown-box">
            <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: {
        priceType: {
            type: String,
            default: 'normal',
            validator: value => {
                /* normal: 普通价 | group: 拼团价 | activity: 活动价 | time-limit: 限时特价 | */
                return ['normal', 'group', 'activity', 'time-limit'].indexOf(value) > -1
            }
        },
        productData: {
            type: Object,
            default: () => {}
        }
    }
}
</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>