caimei-applets-hehe/pages/goods/list.vue

<template>
    <view class="container all-type-list-wrapper">
        <product-list ref="productList" @operationConfim="hanldOperationConfim"></product-list>
        <!--底部选择模态层弹窗组件 -->
        <view class="popup spec" :class="specClass">
            <!-- 遮罩层 -->
            <view class="mask" @tap="hideSpec"></view>
            <view class="layer">
                <view class="content">
                    <view class="layer-smimg"> <image :src="handleData.mainImage" mode=""></image> </view>
                    <view class="layer-nunbox">
                        <view class="layer-nunbox-b">
                            <view class="text">
                                <text class="p sm">￥</text> <text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
                            </view>
                        </view>
                        <view class="layer-nunbox-t">
                            <view class="layer-nunbox-text">数量:</view>
                            <view class="number-box">
                                <view
                                    class="iconfont icon-jianhao"
                                    :class="[isQuantity == true ? 'disabled' : '']"
                                    @click.stop="changeCountSub()"
                                ></view>
                                <input
                                    class="btn-input"
                                    type="number"
                                    v-model="number"
                                    maxlength="4"
                                    @blur="changeNumber($event)"
                                />
                                <view
                                    class="iconfont icon-jiahao"
                                    :class="[isStock == true ? 'disabled' : '']"
                                    @click.stop="changeCountAdd()"
                                ></view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="btn"> <view class="button add" @click="getAddProductCart">加入购物车</view> </view>
            </view>
        </view>
    </view>
</template>

<script>
import productList from '@/components/cm-module/listTemplate/productList'
export default {
    components: {
        productList
    },
    data() {
        return {
            userId: '',
            isRequest: false,
            specClass: '', //规格弹窗css类，控制开关动画
            handleData: {},
            isQuantity: false,
            isStock: false,
            minBuyNumber: 0,
            number: 0,
            buyRetailPrice: 0,
            buyRetailPriceStep: 1
        }
    },
    onLoad(option) {
        // 获取机构id
        const clubInfo = uni.getStorageSync('clubInfo')
        this.userId = clubInfo.userId
    },
    methods: {
        //显示选择数量确认弹窗
        hanldOperationConfim(data) {
            this.specClass = 'show'
            this.handleData = data
            this.minBuyNumber = data.minBuyNumber
            this.buyRetailPrice = data.retailPrice
            this.buyRetailPriceStep = data.step
            this.number = data.minBuyNumber
            console.log(this.handleData)
        },
        //关闭选择数量确认弹窗
        hideSpec() {
            this.specClass = 'hide'
            setTimeout(() => {
                this.specClass = 'none'
            }, 200)
        },
        changeCountAdd() {
            //popup弹窗数量增加按钮
            if (this.buyRetailPriceStep == 2) {
                this.number += this.minBuyNumber
            } else {
                this.number++
            }
            this.calculatPerice()
        },
        changeCountSub() {
            //popup弹窗数量减按钮
            if (this.number <= this.minBuyNumber) {
                this.number = this.minBuyNumber
                this.isQuantity = true
                this.$util.msg(`该商品起订量为${this.minBuyNumber}`, 2000)
                return
            } else {
                if (this.buyRetailPriceStep == 2) {
                    this.number -= this.minBuyNumber
                } else {
                    this.number--
                }
                this.calculatPerice()
                this.isQuantity = false
            }
        },
        changeNumber(e) {
            let _value = e.detail.value
            if (!this.$api.isNumber(_value)) {
                this.number = this.minBuyNumber
            } else if (_value < this.minBuyNumber) {
                this.$util.msg(`该商品起订量为${this.minBuyNumber}`, 2000)
                this.number = this.minBuyNumber
            } else if (_value % this.minBuyNumber != 0) {
                this.$util.msg('购买量必须为起订量的整数倍', 2000)
                this.number = this.minBuyNumber
            } else {
                this.number = _value
                this.calculatPerice()
            }
        },
        //判断是否为阶梯价然后做计算价格处理
        calculatPerice() {
            if (this.handleData.ladderPriceFlag == '1') {
                this.handleData.ladderPriceList.forEach((item, index) => {
                    if (this.number >= item.buyNum) {
                        this.buyRetailPrice = item.buyPrice
                    }
                })
            }
        },
        //增加购物车成功和toast弹窗提示成功
        getAddProductCart() {
            this.ProductService.shoppingAddCart({
                productId: this.handleData.productId,
                userId: this.userId,
                productCount: this.number
            })
                .then(response => {
                    this.specClass = 'hide'
                    this.$util.msg('加入购物车成功', 1500, true, 'success')
                    setTimeout(() => {
                        this.specClass = 'none'
                    }, 500)
                    this.$refs.productList.cartQuantity = response.data
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        // 获取购物车商品数量
        getCartQuantity() {
            const clubInfo = uni.getStorageSync('clubInfo')
            this.userId = clubInfo.userId
            this.SellerService.CartQuantity({ userId: this.userId }).then(res => {
                this.$refs.productList.cartQuantity = res.data
            })
        }
    },
    onShow() {
        // 购物车数量统计
        this.getCartQuantity()
    }
}
</script>

<style lang="scss">
page {
    background: $sub-bg-color;
    .all-type-list-wrapper {
        display: flex;
        flex-direction: column;
    }
}
/* 加入购物模态层*/
@keyframes showPopup {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes hidePopup {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes showLayer {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes hideLayer {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes showAmnation {
    0% {
        top: -12rpx;
        opacity: 0;
    }
    50% {
        top: -60rpx;
        opacity: 1;
    }
    100% {
        top: -100rpx;
        opacity: 0;
    }
}
@keyframes hideAmnation {
    0% {
        top: -100rpx;
        opacity: 0;
    }
    100% {
        top: -12rpx;
        opacity: 0;
    }
}
.popup {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    .mask {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 21;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .layer {
        position: fixed;
        z-index: 22;
        bottom: -420rpx;
        width: 702rpx;
        padding: 24rpx 24rpx 36rpx 24rpx;
        height: 360rpx;
        border-radius: 20rpx 20rpx 0 0;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .content {
            width: 100%;
            margin-top: 40rpx;
        }
        .btn {
            width: 100%;
            height: 88rpx;
            display: flex;
            justify-content: center;
            .button {
                width: 600rpx;
                height: 90rpx;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: $font-size-28;
                border-radius: 45rpx;
                &.buy {
                    background: $btn-confirm;
                }
                &.add {
                    background: rgba(0, 0, 0, 1);
                }
            }
        }
    }

    &.show {
        display: block;
        .mask {
            animation: showPopup 0.2s linear both;
        }
        .layer {
            animation: showLayer 0.2s linear both;
        }
    }
    &.hide {
        display: block;
        .mask {
            animation: hidePopup 0.2s linear both;
        }

        .layer {
            animation: hideLayer 0.2s linear both;
        }
    }
    &.none {
        display: none;
    }
    &.service {
        .row {
            margin: 30upx 0;
            .title {
                font-size: 30upx;
                margin: 10upx 0;
            }
            .description {
                font-size: 28upx;
                color: #999;
            }
        }
    }
    .layer-smimg {
        border: 1px solid #eee;
        width: 136rpx;
        height: 136rpx;
        float: left;
        border-radius: 10rpx;
        margin-right: 24rpx;
        image {
            width: 136rpx;
            height: 136rpx;
            border-radius: 10rpx;
        }
    }
    .layer-nunbox {
        justify-content: space-between;
        align-items: center;
        width: 536rpx;
        height: 88rpx;
        padding: 13rpx 0 0 0;
        float: left;
        .layer-nunbox-t {
            width: 100%;
            height: 44rpx;
            position: relative;
            display: flex;
            .layer-nunbox-text {
                line-height: 44rpx;
                font-size: $font-size-28;
            }
            .number-box {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 2rpx solid #e1e1e1;
                border-radius: 30rpx;
                height: 48rpx;
                margin-left: 20rpx;
                .iconfont {
                    font-size: $font-size-24;
                    padding: 0 18rpx;
                    color: #333333;
                    text-align: center;
                    line-height: 48rpx;
                    font-weight: bold;
                    background: #ffffff;
                    &.icon-jianhao {
                        border-radius: 30rpx 0 0 30rpx;
                    }
                    &.icon-jiahao {
                        border-radius: 0 30rpx 30rpx 0;
                    }
                }
                .btn-input {
                    width: 62rpx;
                    height: 44rpx;
                    line-height: 44rpx;
                    border-radius: 4rpx;
                    text-align: center;
                    font-size: $font-size-24;
                    color: #333333;
                    background-color: #f7f7f7;
                }
            }
            .product-step {
                position: absolute;
                left: 45rpx;
                bottom: 0;
                height: 44rpx;
                background: #ffffff;
            }
        }
        .layer-nunbox-b {
            width: 100%;
            height: 44rpx;
            padding: 8rpx 0 16rpx;
            .text {
                font-weight: bold;
            }
        }
        .text {
            line-height: 44rpx;
            font-size: $font-size-32;
            .p {
                color: #ff457b;
            }
            // .p:first-child{
            // 	margin-left: 30rpx;
            // }
            .p.sm {
                font-size: $font-size-24;
            }
        }
    }
}
</style>