caimei-applets-hehe/components/cm-module/cm-goods-nav/cm-goods-nav.vue

<template>
    <view>
        <view class="cm-goods-nav" :class="{ hasBottom: isIphoneX }">
            <!-- 导航按钮 -->
            <uni-goods-nav
                :fill="true"
                :options="options"
                :buttonGroup="buttonGroup"
                @click="onClick"
                @buttonClick="buttonClick"
                :navType="navType"
            />
        </view>
        <cm-drawer :visible="countVisible" @close="drawerClose" position="bottom">
            <view class="count">
                <view class="top">
                    <image :src="productInfo.mainImage" class="cover"></image>
                    <view class="right">
                        <view class="number">
                            <text>数量：</text>
                            <cm-number-box v-model="count" :min="1" :max="maxCount" :defaultVal="count"></cm-number-box>        
                        </view>
                        <view class="single-price">
                            <text>单价：￥</text> <text class="price">{{ buyRetailPrice | formatPrice }}</text>
                        </view>
                    </view>
                </view>
                <view class="btn" @click="confirm">确认</view>
            </view>
        </cm-drawer>
    </view>
</template>

<script>
import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
import NumberBox from '@/components/cm-module/cm-cart-product/number-box.vue'
import CmNumberBox from '@/components/cm-module/cm-number-box/cm-number-box.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    components: {
        NumberBox,
        CmDrawer,
        CmNumberBox
    },
    props: {
        productInfo: {
            type: Object,
            default: () => {}
        }
    },

    data() {
        return {
            count: 1,
            navType: 1,
            countVisible: false,
            // 购买类型: 0：正常价格购买 1：拼团价购买
            handleClickType : 0,
            options: [
                {
                    icon: 'home',
                    text: '首页'
                },
                {
                    icon: 'headphones',
                    text: '客服',
                    type: 'contact'
                },
                {
                    icon: 'cart',
                    text: '购物车',
                    info: 0,
                    infoBackgroundColor: '#FC464C',
                    infoColor: '#ffffff'
                }
            ],

            leftButton: {
                text: '加入购物车',
                price: 0,
                backgroundColor: '#FFEFF4',
                color: '#FF457B'
            },

            rightButton: {
                text: '立即购买',
                price: 0,
                backgroundColor: 'linear-gradient(90deg, #FC32B4 0%, #F83C6C 100%)',
                color: '#fff'
            }
        }
    },
    computed: {
        ...mapGetters(['isIphoneX', 'kindCount', 'hasLogin']),
        buttonGroup() {
            return [this.leftButton, this.rightButton]
        },
        // 最终购买价格
        buyRetailPrice() {
            return this.processPrice()
        },
        collageProduct(){
            return this.productInfo.collageProduct || {}
        },
        maxCount(){
            // unlimitedFlag  0 限购  1 不限购
            if(this.collageProduct.unlimitedFlag === 0){
                return this.collageProduct.limitedNum
            }else{
                return this.productInfo.stock
            }
        }
    },
    watch: {
        kindCount(newCount) {
            this.options[2].info = newCount
        },
        productInfo: {
            deep: true,
            handler: function(nVal) {
                console.log(nVal)
                this.navType = this.productInfo.collageStatus === 1 && (this.collageProduct.limitedNum > 0) ? 2 : 1
                this.resetButtonInfo()
            }
        },
        count(nVal){
            console.log(nVal)
        }
    },
    created() {
        this.options[2].info = this.kindCount
    },
    methods: {
        ...mapActions('cart', ['addToCart', 'getCartNumber']),

        // 处理购买按钮信息
        resetButtonInfo() {
            // 导航类型1
            if (this.navType === 1) {
                this.leftButton.text = '加入购物车'
                this.rightButton.text = '立即购买'
            }
            // 导航类型2
            if (this.navType === 2) {
                this.leftButton.text = '单独购买'
                this.leftButton.price = this.productInfo.normalPrice
                this.rightButton.text = '拼团购买'
                this.rightButton.price = this.productInfo.price
            }
        },

        countChange(value) {
            this.count = value
        },
        drawerClose() {
            this.countVisible = false
            this.count = 1
        },
       
        // 左边按钮
        onClick(e) {
            const clickFns = {
                0: this.toHome,
                1: this.customer,
                2: this.toCart
            }
            clickFns[e.index]()
        },
        // 右边按钮
        buttonClick(e) {
            this.countVisible = true
            this.handleClickType = e.index
        },
        // 确认操作
        confirm() {
            this.countVisible = false
            // 判断登录
            if (!this.hasLogin) return this.toLogin()
            // 导航类型1
            if(this.navType === 1){
                const clickFns = {
                    0: this.joinCart,
                    1: this.buyNow
                }
                clickFns[this.handleClickType]()
            }
            
            // 导航类型2
            if(this.navType === 2){
                const clickFns = {
                    0: this.buyNow,
                    1: this.buyGroupNow
                }
                clickFns[this.handleClickType]()
            }
        },
        
        // 立即购买
        buyNow() {
            let productStp = {
                allPrice: this.count * this.buyRetailPrice,
                allCount: this.count,
                productId: this.productInfo.productId,
                productCount: this.count,
                heUserId: this.productInfo.heUserId,
                collageFlag: 0
            }
			uni.setStorageSync('commitProductInfo', productStp)
            this.countVisible = false
            this.toCreateOrder()
        },
        // 拼团购买
        buyGroupNow(){
            console.log('拼团购买')
            let productStp = {
                allPrice: this.count * this.buyRetailPrice,
                allCount: this.count,
                productId: this.productInfo.productId,
                productCount: this.count,
                heUserId: this.productInfo.heUserId,
                collageFlag: 1
            }
            uni.setStorageSync('commitProductInfo', productStp)
            this.countVisible = false
            this.toCreateOrder()
        },
        
        
        // 跳转到创建订单
        toCreateOrder() {
            this.$api.navigateTo('/pages/order/create-order?type=prodcut')
        },
        // 跳转首页
        toHome() {
            uni.switchTab({ url: '/pages/tabBar/index/index' })
        },
        // 客服
        customer() {
            console.log(this)
        },
        // 去登陆
        toLogin() {
            uni.navigateTo({ url: '/pages/login/login' })
        },
        // 去购物车
        toCart() {
            uni.navigateTo({ url: '/pages/goods/cart' })
        },
        // 加入购物车
        joinCart() {
            this.addToCart({
                productId: this.productInfo.productId,
                productCount: this.count
            }).finally(() => {
                this.countVisible = false
            })
        },
        
        //处理最终的购买价格
        processPrice() {
            
            // 拼团价 
            if(this.productInfo.collageStatus === 1){
                // 购买方式为拼团购买
                if(this.handleClickType === 1){
                    return this.productInfo.price
                }
                // 购买方式为正常价购买
                if(this.handleClickType === 0){
                    return this.productInfo.normalPrice
                }
                
            }
            
            // 活动价
            if (this.productInfo.activeStatus === 1 && this.productInfo.ladderList) {
                this.productInfo.ladderList.forEach((item, index) => {
                    if (this.count >= item.buyNum) {
                        return item.buyPrice
                    }
                })
            }
            
            // 其它价格
            return this.productInfo.price
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-goods-nav {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    &.hasBottom {
        padding-bottom: 44rpx;
    }
}
.count {
    padding: 60rpx 0;
    .top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 60rpx;
        .cover {
            width: 104rpx;
            height: 104rpx;
        }
        .right {
            margin-left: 24rpx;
            font-size: 24rpx;
            color: #333;
            .single-price {
                color: #ff457b;
                margin-top: 24rpx;
            }
            .number {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
    }
    .btn {
        width: 100%;
        height: 88rpx;
        margin-top: 32px;
        background: #ff457b;
        line-height: 88rpx;
        text-align: center;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 44rpx;
    }
}
</style>