caimei-applets-hehe/components/cm-module/cm-product-price/cm-product-price.vue

<template>
    <!-- 价格区域 -->
    <view class="cm-product-price">
        <view class="price">
            <text class="small">￥</text><text class="big">{{ bigPrice }}</text
            ><text class="small">{{ smallPrice }}</text>
        </view>
        <view class="tags">
            <view class="tag type1" v-if="productInfo.heUserId !== 0">促销</view>
            <template v-if="productInfo.activeStatus === 1">
                <view class="tag type2" v-if="productInfo.ladderList" @click="drawerVisible = true">活动价</view>
            </template>
        </view>

        <cm-drawer :visible="drawerVisible" position="bottom" @close="drawerClose">
            <template>
                <scroll-view scroll-y="true" class="scroll-box">
                    <cm-activity-info :productInfo="productInfo"></cm-activity-info>
                </scroll-view>
                <view class="btn" @click="drawerVisible = false">了解</view>
            </template>
        </cm-drawer>
    </view>
</template>

<script>
import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
import CmActivityInfo from '@/components/cm-module/cm-activity-info/cm-activity-info.vue'
export default {
    components: {
        CmDrawer,
        CmActivityInfo
    },
    data() {
        return {
            drawerVisible: false
        }
    },
    props: {
        productInfo: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        price() {
            return Number(this.productInfo.price).toFixed(2)
        },
        bigPrice() {
            return this.price.split('.')[0]
        },
        smallPrice() {
            return '.' + this.price.split('.')[1]
        }
    },
    methods: {
        drawerClose() {
            this.drawerVisible = false
        }
    }
}
</script>

<style scoped lang="scss">
.cm-product-price {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12rpx 0;

    .price {
        color: #ff457b;
        .small {
            font-size: 36rpx;
        }
        .big {
            font-size: 48rpx;
        }
    }
    .tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 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;
            }
        }
    }
}
.scroll-box {
    height: 430rpx;
    box-sizing: border-box;
    padding-top: 70rpx;
}
.btn {
    width: 100%;
    height: 88rpx;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    background: #ff457b;
    line-height: 88rpx;
    text-align: center;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 44rpx;
}
</style>