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">
                    <!-- 商品图片 -->
                    <image :src="productData.mainImage" class="cover"></image>
                    <view class="info">
                        <!-- 数量 -->
                        <view class="row">
                            <view class="count">
                                <view class="label">数量</view>
                                <cm-number-box class="number-box" v-model="count" :max="limitedNum"></cm-number-box>
                            </view>
                            <view
                                class="clickable"
                                @click="$emit('detail')"
                                v-if="productData.activeStatus > 0 && productData.ladderList.length > 0"
                            >
                                查看活动价
                            </view>
                        </view>
                        <!-- 单价 -->
                        <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" v-if="productData.couponStatus === 1">
                            <view class="tag-qh">券后价￥{{ productData.couponPrice | priceFormat }}</view>
                        </view>
                    </view>
                </view>
                <view class="tip">
                    <template v-if="productData.couponStatus > 0">
                        当前商品可使用
                        <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">领券购买</text>
                        <text v-else>立即购买</text>
                    </template>
                    <template v-else>
                        确认
                    </template>
                </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
        },
        currentCoupon: {
            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
        }
    },
    watch: {
        count() {
            console.log(this.count, typeof this.count)
        }
    },
    methods: {
        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%;
            @extend .cm-flex-between;
            justify-content: flex-start;
            .cover {
                width: 180rpx;
                height: 180rpx;
            }

            .info {
                margin-left: 24rpx;

                .row {
                    @extend .cm-flex-center;
                    justify-content: flex-start;

                    &:first-child {
                        margin-bottom: 40rpx;
                    }
                }

                .count {
                    @extend .cm-flex-center;
                    justify-content: flex-start;

                    .number-box {
                        margin: 0 24rpx;
                    }
                }

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

                    &::after {
                        content: '：';
                    }
                }

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

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

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

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

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

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