caimei-applets-store/pages/views/goods/components/goods-receive-buy-popup/goods-receive-buy-popup.vue

<template>
    <view class="goods-receive-buy-pupup" v-if="productData">
        <uni-popup ref="popup" type="bottom">
            <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
            <view class="popup-content" :style="{ paddingBottom: safeArea ? 0 : '40rpx' }">
                <view class="content">
                    <!-- 商品信息 -->
                    <view class="info">
                        <image :src="productData.mainImage" class="cover"></image>
                        <view class="price">
                            <!-- 单价 -->
                            <view class="row">
                                <view class="label">单价：</view>
                                <!-- 拼团价 -->
                                <template v-if="productData.activityType === 'group'">
                                    <view class="amount" v-if="groupBuyFlag">{{ productPrice | priceFormat }}</view>
                                    <view class="amount" v-else>{{ productData.normalPrice | priceFormat }}</view>
                                </template>
                                <!-- 其它价格 -->
                                <template v-else>
                                    <view class="amount">{{ productPrice | priceFormat }}</view>
                                </template>
                            </view>
                            <view class="row tags">
                                <!-- 券后价 -->
                                <template v-if="hasCouponPrice && priceType === 'normal'">
                                    <view class="tag-qh">券后价￥{{ productData.couponPrice | priceFormat }}</view>
                                </template>
                                <!-- 价格标签 -->
                                <template v-if="priceType !== 'normal'">
                                    <view class="tag-pt" v-if="priceType === 'group'">
                                        <text v-if="collageInfo">{{ collageInfo.memberNum }}人拼团</text>
                                    </view>
                                    <template v-else-if="priceType === 'activity'">
                                        <view class="tag-hd">活动价</view>
                                        <view class="clickable" @click="$emit('detail')">查看活动价</view>
                                    </template>
                                    <view class="tag-xs" v-else>限时特价</view>
                                </template>
                            </view>
                        </view>
                    </view>
                    <!-- 规格 -->
                    <view class="unit">
                        <view class="label">规格：</view>
                        <view class="list">
                            <view class="item">3ml</view>
                            <view class="item">135ml + 小样20ml</view>
                            <view class="item">3ml 2瓶</view>
                            <view class="item">10ml 2瓶</view>
                            <view class="item disabled">10ml 2瓶</view>
                            <view class="item">135ml + 精华20ml</view>
                            <view class="item active">5ml 2瓶</view>
                        </view>
                    </view>
                    <!-- 购买数量 -->
                    <view class="count">
                        <view class="label">购买数量：</view>
                        <cm-number-box v-model.lazy="count" :max="limitedNum"></cm-number-box>
                    </view>
                </view>
                <!-- 优惠券使用提示 -->
                <view class="tip">
                    <template v-if="productData.couponStatus > 0 && productData.couponId">
                        当前商品可使用
                        <text v-text="couponTip"></text>
                        优惠券
                    </template>
                </view>
                <tui-button type="base" width="600rpx" height="90rpx" shape="circle" @click="$emit('submit', count)">
                    <template v-if="navbarType === 'buy'">
                        <text v-if="productData.couponStatus === 1 && productData.couponId">领券购买</text>
                        <text v-else>立即购买</text>
                    </template>
                    <text v-else>确认</text>
                </tui-button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'goods-receive-buy-pupup',
    props: {
        productData: {
            type: Object,
            default: () => null
        },
        couponTip: {
            type: String,
            default: ''
        },
        navbarType: {
            type: String,
            default: 'buy'
        },
        groupBuyFlag: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            count: 1
        }
    },
    computed: {
        ...mapGetters(['safeArea']),
        productPrice() {
            return this.generatePrice()
        },
        limitedNum() {
            if (this.productData.collageStatus > 0) {
                return this.productData.collageProduct.limitedNum || this.productData.stock
            }
            return this.productData.stock
        },
        /* 商品价格类型 normal: 普通价 | group: 拼团价 | activity: 活动价 | time-limit: 限时特价 | coupon: 券后价 */
        priceType() {
            return this.productData?.activityType
        },
        // 有可使用优惠券
        hasCouponPrice() {
            return this.productData.couponStatus === 1
        },
        // 商品拼团信息
        collageInfo() {
            return this.productData?.collageProduct
        }
    },
    methods: {
        onNumberChange(num) {
            this.count = num
        },

        open() {
            this.$refs.popup.open()
            this.$emit('open')
            this.count = 1
        },
        close() {
            this.$refs.popup.close()
            this.$emit('close')
            this.count = 1
        },
        generatePrice() {
            // 非阶梯价
            if (this.productData.activeStatus <= 0) {
                return this.productData.price
            }
            // 阶梯价列表为空
            if (!this.productData.ladderList) {
                return this.productData.price
            }
            // 阶梯价
            const lastItem = this.productData.ladderList
                .sort((a, b) => b.buyNum - a.buyNum)
                .find(item => this.count >= item.buyNum)
            return lastItem ? lastItem.buyPrice : this.productData.price
        }
    }
}
</script>

<style>
.vue-ref {
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
}
</style>

<style lang="scss" scoped>
.goods-receive-buy-pupup {
    position: relative;
    .close {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        color: #999;
        font-size: 32rpx;
    }

    .popup-content {
        @extend .cm-flex-center;
        flex-direction: column;
        padding: 40rpx 32rpx;
        background-color: #fff;
        border-radius: 16rpx 16rpx 0 0;

        &::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 80rpx;
            bottom: -80rpx;
            left: 0;
            background-color: #fff;
        }

        .content {
            width: 100%;

            .unit,
            .count {
                .label {
                    font-weight: bold;
                    color: #333333;
                    font-size: 28rpx;
                }
            }

            .count {
                @extend .cm-flex-between;
                align-items: center;
                margin-top: 68rpx;
            }

            .unit {
                margin-top: 32rpx;
                .list {
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                        position: relative;
                        height: 48rpx;
                        line-height: 46rpx;
                        padding: 0 28rpx;
                        background: #f5f5f5;
                        color: #666666;
                        font-size: 24rpx;
                        box-sizing: border-box;
                        border: 1rpx solid #f5f5f5;
                        margin-right: 16rpx;
                        margin-top: 24rpx;
                        border-radius: 24rpx;

                        &.active {
                            color: #ff457b;
                            border-color: #ff457b;
                            background: #fff8fd;
                        }

                        &.disabled {
                            // border: 1rpx solid #f9f9f9;
                            // background: #f9f9f9;
                            // color: #ddd;
                            &::after {
                                content: '缺货';
                                position: absolute;
                                height: 32rpx;
                                line-height: 32rpx;
                                background: #cccccc;
                                color: #fff;
                                padding: 0 10rpx;
                                right: 0;
                                top: 0;
                                transform: translate(30%, -50%);
                                font-size: 22rpx;
                                border-radius: 17rpx;
                                border: 2rpx solid #fff;
                            }
                        }
                    }
                }
            }

            .info {
                display: flex;
                .cover {
                    width: 180rpx;
                    height: 180rpx;
                    border: 1px solid #e1e1e1;
                }

                .price {
                    margin-left: 24rpx;
                    margin-top: 24rpx;

                    .label {
                        font-size: 24rpx;
                        color: #666666;
                    }

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

                        &::before {
                            content: '￥';
                        }
                    }

                    .row {
                        display: flex;
                        align-items: center;

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

                .tags {
                    & > view {
                        margin-right: 24rpx;
                        &:last-child {
                            margin-right: 0;
                        }
                    }

                    .clickable {
                        font-size: 22rpx;
                        color: #ff457b;
                    }

                    .tag-qh {
                        display: inline-block;
                        line-height: 40rpx;
                        height: 40rpx;
                        margin-top: 14rpx;
                        background: #ff457b;
                        border-radius: 25rpx;
                        padding: 0 15rpx;
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #ffffff;
                    }

                    .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;
                    }
                }
            }
        }

        .tip {
            margin: 70rpx 0 24rpx;
            font-size: 24rpx;
            color: #666;

            text {
                color: #ff457b;
            }
        }
    }
}
</style>