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"
            />
        </view>
        <cm-drawer :visible="countVisible" @close="drawerClose" position="bottom">
            <view class="count">
                <view class="top">
                    <image :src="productInfo.mainImage" mode="center" class="cover"></image>
                    <view class="right">
                        <view class="number">
                            <text>数量：</text>
                            <number-box :value="count" @change="countChange"></number-box>
                        </view>
                        <view class="single-price">
                            <text>单价：￥</text> <text class="price">{{ buyRetailPrice | priceFormat }}</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 { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    components: {
        NumberBox,
        CmDrawer
    },
    props: {
        productInfo: {
            type: Object,
            default: () => {}
        }
    },
    filters: {
        priceFormat(price) {
            return Number(price).toFixed(2)
        }
    },
    data() {
        return {
            count: 1,
            countVisible: false,
            buyRetailPrice: 0,
            btnClickType: -1,
            options: [
                {
                    icon: 'home',
                    text: '首页'
                },
                {
                    icon: 'headphones',
                    text: '客服',
                    type: 'contact'
                },
                {
                    icon: 'cart',
                    text: '购物车',
                    info: 0,
                    infoBackgroundColor: '#FC464C',
                    infoColor: '#ffffff'
                }
            ],
            buttonGroup: [
                {
                    text: '加入购物车',
                    backgroundColor: '#FFEFF4',
                    color: '#FF457B'
                },
                {
                    text: '立即购买',
                    backgroundColor: 'linear-gradient(90deg, #FC32B4 0%, #F83C6C 100%)',
                    color: '#fff'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['isIphoneX', 'kindCount', 'hasLogin'])
    },
    watch: {
        kindCount(newCount) {
            this.options[2].info = newCount
        },
        count() {
            if (!this.productInfo) return
            this.processActivityPrice()
        },
        countVisible(newVal) {
            if (newVal) this.processActivityPrice()
        }
    },
    created() {
        this.options[2].info = this.kindCount
    },
    methods: {
        ...mapActions('cart', ['addToCart', 'getCartNumber']),
        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]()
            console.log(e.index)
        },
        // 右边按钮
        buttonClick(e) {
            this.countVisible = true
            this.btnClickType = e.index
        },
        // 确认
        confirm() {
            this.countVisible = false
            const clickFns = {
                0: this.joinCart,
                1: this.buyNow
            }
            clickFns[this.btnClickType]()
        },
        // 跳转首页
        toHome() {
            uni.switchTab({ url: '/pages/tabBar/index/index' })
        },
        // 客服
        customer() {
            console.log(this)
        },
        // 去登陆
        toLogin(){
            uni.navigateTo({ url: '/pages/login/login' })
        },
        // 去购物车
        toCart() {
            if(!this.hasLogin) return this.toLogin()
            uni.navigateTo({ url: '/pages/goods/cart' })
        },
        // 加入购物车
        joinCart() {
            if(!this.hasLogin) return this.toLogin()
            this.addToCart({
                productId: this.productInfo.productId,
                productCount: this.count
            }).finally(() => {
                this.countVisible = false
            })
        },
        // 立即购买
        buyNow() {
            if(!this.hasLogin) return this.toLogin()
            let productStp = {
                allPrice: this.count * this.buyRetailPrice,
                allCount: this.count,
                productId: this.productInfo.productId,
                productCount: this.count,
                heUserId: this.productInfo.heUserId
            }
            this.$api.navigateTo(
                `/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({ data: productStp })}`
            )
            this.countVisible = false
        },
        //单独处理活动价格和阶梯价格
        processActivityPrice() {
            if (this.productInfo.activeStatus === 1 && this.productInfo.ladderList) {
                this.productInfo.ladderList.forEach((item, index) => {
                    if (this.count >= item.buyNum) {
                        this.buyRetailPrice = item.buyPrice
                    }
                })
            } else {
                this.buyRetailPrice = 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>