代码优化

components/cm-module/cm-cart-product/cm-cart-product.vue

@@ -3,8 +3,9 @@
         <template v-if="productList.length > 0">
             <!-- 供应商名称 -->
             <view class="shop-info">
-                <template v-if="listType === 'expired'">
+                <template v-if="isExpired">
                     <view class="expired">失效商品{{ productList.length }}件</view>
+                    <view class="clear" @click="deletefailureList">清空失效商品</view>
                 </template>
                 <template v-else>
                     <view
@@ -23,23 +24,26 @@
                     :key="index"
                     :class="{ 'no-border': index === 0 }"
                 >
-                    <view class="expired" v-if="listType === 'expired'">失效</view>
                     <view
                         class="radio iconfont"
                         :class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
                         @click="chooseOne(item)"
-                        v-else
+                        v-if="isNormal || isDelete"
                     ></view>
+                    <view class="expired" v-else>失效</view>
                     <view class="product">
                         <image class="cover" :src="item.mainImage"></image>
                         <view class="content">
                             <view class="title">{{ item.productName }}</view>
                             <!-- 普通列表 -->
-                            <template v-if="['list', 'delete'].includes(listType)">
+                            <template v-if="isNormal">
                                 <view class="params">规格：{{ item.unit || '' }}</view>
                                 <view class="tags">
-                                    <view class="tag type1" v-if="!item.heUserId">自营</view>
-                                    <view class="tag type2" v-if="item.activeStatus == 1" @click="clickPopupShow(item, 2)"
+                                    <view class="tag type1">{{ item.heUserId ? '促销' : '自营' }}</view>
+                                    <view
+                                        class="tag type2"
+                                        v-if="item.activeStatus == 1"
+                                        @click="clickPopupShow(item, 2)"
                                         >活动价</view
                                     >
                                 </view>
@@ -48,13 +52,13 @@
                                     <view>
                                         <number-box
                                             @change="numberChange(item, $event)"
-                                            v-if="listType !== 'delete'"
+                                            v-if="!isDelete"
                                             :value="item.productCount"
                                         ></number-box>
                                     </view>
                                 </view>
                             </template>
-                            <template v-if="listType === 'expired'">
+                            <template v-if="isExpired">
                                 <view class="tip">商品已下架</view>
                             </template>
                         </view>
@@ -62,12 +66,23 @@
                 </view>
             </view>
             <!-- 合计价格 -->
-            <view class="total" v-if="listType === 'list'">
+            <view class="total" v-if="isNormal && !isDelete">
                 <text class="title">合计：</text> <text class="price">￥{{ data.totalPrice | formatPrice }}</text>
             </view>
         </template>
         <!-- 促销活动弹窗 -->
         <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
+        <!-- 操作弹窗 -->
+        <tui-modal
+            :show="modal"
+            @click="confirm"
+            @cancel="modal = false"
+            :content="contentModalText"
+            color="#333"
+            :size="32"
+            shape="circle"
+            :maskClosable="false"
+        ></tui-modal>
     </view>
 </template>
 
@@ -83,6 +98,8 @@ export default {
     },
     data() {
         return {
+            modal: false,
+            contentModalText: '',
             popupShow: false,
             handlerPros: {}
         }
@@ -109,8 +126,20 @@ export default {
         }
     },
     computed: {
+        // 是普通商品列表
+        isNormal() {
+            return this.listType.indexOf('normal') !== -1
+        },
+        // 是失效商品列表
+        isExpired() {
+            return this.listType.indexOf('expired') !== -1
+        },
+        // 当前状态为删除状态
+        isDelete() {
+            return this.listType.indexOf('delete') !== -1
+        },
         productList() {
-            if (this.listType === 'expired') {
+            if (this.isExpired) {
                 return this.data
             } else {
                 return this.data[this.vkey]
@@ -118,15 +147,8 @@ export default {
         }
     },
     methods: {
-        ...mapActions('cart', ['initCart', 'updateShoppogCount', 'removeFromCart', 'removeFailureFromCart']),
-        ...mapMutations('cart', [
-            'selectProduct',
-            'selectAllShopProduct',
-            'selectAllProduct',
-            'saveCartIds',
-            'selectFailure',
-            'selectAllFailure'
-        ]),
+        ...mapActions('cart', ['updateShoppogCount', 'removeFailureFromCart']),
+        ...mapMutations('cart', ['selectProduct', 'selectAllShopProduct', 'selectFailure']),
         // 商品数量变化
         numberChange(product, count) {
             this.countChange(product, count)
@@ -141,11 +163,18 @@ export default {
         },
         // 勾选到单个商品
         chooseOne(product) {
-            this.selectProduct({
-                shopId: this.data.shopId,
-                productId: product.productId,
-                checked: !product.productsChecked
-            })
+            if (this.isNormal) {
+                this.selectProduct({
+                    shopId: this.data.shopId,
+                    productId: product.productId,
+                    checked: !product.productsChecked
+                })
+            } else {
+                this.selectFailure({
+                    productId: product.productId,
+                    checked: !product.productsChecked
+                })
+            }
             this.$emit('chooseOne')
         },
         //商品数量加加
@@ -161,6 +190,18 @@ export default {
                 this.popupShow = true
                 this.handlerPros = pros
             }
+        },
+        // 清空失效商品
+        deletefailureList() {
+            this.modal = true
+            this.contentModalText = '确定清除所有失效商品吗？'
+        },
+        // 确认清空
+        confirm(e) {
+            if (e.index !== 1) return (this.modal = false)
+            this.removeFailureFromCart().finally(() => {
+                this.modal = false
+            })
         }
     }
 }
@@ -188,6 +229,18 @@ $grid: 24rpx;
         font-size: 30rpx;
         color: #333333;
     }
+    .clear {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 184rpx;
+        height: 42rpx;
+        background: #fff8fd;
+        border: 1rpx solid #ff457b;
+        border-radius: 28rpx;
+        font-size: 26rpx;
+        color: #ff457b;
+    }
 }
 .radio {
     font-size: 36rpx;
@@ -207,6 +260,9 @@ $grid: 24rpx;
         &.no-border {
             border-top: 0;
         }
+        &:last-child {
+            margin-bottom: 0;
+        }
         .expired {
             display: flex;
             justify-content: center;
@@ -295,6 +351,7 @@ $grid: 24rpx;
                 justify-content: space-between;
                 align-items: flex-end;
                 margin-top: 4rpx;
+                height: 48rpx;
                 .add-cart {
                     display: flex;
                     justify-content: center;

components/cm-module/cm-cart-product/number-box.vue

@@ -23,6 +23,11 @@ export default {
     created() {
         this.number = this.value
     },
+    watch:{
+        value(val){
+            this.number = val
+        }
+    },
     methods: {
         add() {
             this.number++

pages/goods/cart.vue

@@ -1,5 +1,6 @@
 <template>
-    <view class="cart" :style="{ paddingTop: CustomBar + 'px' }">
+    <view class="cart" :style="[cartPaddingTop]">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
         <header-cart
             :systeminfo="systeminfo"
             :navbar-data="nvabarData"
@@ -7,9 +8,9 @@
             :page="1"
         ></header-cart>
         <template v-if="!isEmpty">
-            <template v-if="listType !== 'delete'">
+            <template v-if="!isshowDelbtn">
                 <!-- 商品统计 / 批量删除商品 -->
-                <view class="cart-top">
+                <view class="cart-top" :class="{ fixed: cartTopFixed }" :style="[cartTop]">
                     <view class="count">共{{ kindCount }}件商品</view>
                     <view class="btn" @click="showDelManager">删除</view>
                 </view>
@@ -20,23 +21,30 @@
                 </view>
             </template>
             <!-- 购物车列表 -->
+            <template v-for="(cart, index) in goodsList">
+                <cm-cart-product
+                    class="product-list"
+                    :listType="listType"
+                    :key="index"
+                    :data="cart"
+                    vkey="productList"
+                    @chooseAll="chooseAllProduct"
+                    @chooseOne="chooseOneProduct"
+                ></cm-cart-product>
+            </template>
+            <!-- 失效商品列表 -->
             <cm-cart-product
-                v-for="(cart, index) in goodsList"
                 class="product-list"
-                :listType="listType"
                 :key="index"
-                :data="cart"
-                vkey="productList"
-                @chooseAll="chooseAll"
-                @chooseOne="chooseOne"
+                :data="failureList"
+                :listType="failureListType"
+                @chooseOne="chooseFailureProduct"
+                v-if="failureList.length > 0"
             ></cm-cart-product>
 
-            <!-- 失效商品列表 -->
-            <cm-cart-product class="product-list" :key="index" :data="failureList" listType="expired"></cm-cart-product>
-
             <!-- 底部按钮 -->
             <view class="footer" :style="[footerBottom]">
-                <view class="radio" @click="checkAll">
+                <view class="radio" @click="chooseAll">
                     <text class="iconfont" :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"></text>
                     <text class="tip">全选</text>
                 </view>
@@ -142,7 +150,6 @@ export default {
             allPrice: 0, //所有价格
             totalOriginalPrice: 0, //所有原价价
             reducedPrice: 0, //满减
-            skeletonShow: true,
             isshowDelbtn: false,
             scrollHeight: 'auto',
             hasNextPage: false,
@@ -151,7 +158,10 @@ export default {
             deleteType: 0,
             couponVisible: false,
             showDitail: false,
-            listType: 'list'
+            listType: 'normal',
+            failureListType: 'expired',
+            scrollTop: 0,
+            isRequest: true
         }
     },
     onLoad() {
@@ -176,6 +186,30 @@ export default {
             return {
                 bottom: this.isIphoneX ? '0' : ''
             }
+        },
+        cartTopFixed() {
+            return this.scrollTop > 0 && !this.isshowDelbtn
+        },
+        // 购物车顶部删除按钮top
+        cartTop() {
+            return {
+                top: this.CustomBar + 'px'
+            }
+        },
+        // 购物车页面padding
+        cartPaddingTop() {
+            let paddingTop = this.CustomBar
+            let paddingBottom = 100
+            if (this.cartTopFixed) {
+                paddingTop += 40
+            }
+            if(this.isIphoneX){
+                paddingBottom += 40
+            }
+            return {
+                paddingTop: paddingTop + 'px',
+                paddingBottom: paddingBottom + 'rpx'
+            }
         }
     },
     filters: {
@@ -195,6 +229,15 @@ export default {
             handler(val, oldval) {
                 this.totalPeice()
             }
+        },
+        isshowDelbtn(val) {
+            if (val) {
+                this.failureListType = 'expired delete'
+                this.listType = 'normal delete'
+            } else {
+                this.failureListType = 'expired'
+                this.listType = 'normal'
+            }
         }
     },
     //下拉刷新
@@ -212,22 +255,18 @@ export default {
             this.$api.redirectTo('/pages/login/login')
         }
     },
-    onHide() {
-        this.saveCartIds([])
+    onPageScroll(e) {
+        this.scrollTop = e.scrollTop
     },
     methods: {
-        ...mapActions('cart', ['initCart', 'updateShoppogCount', 'removeFromCart', 'removeFailureFromCart']),
-        ...mapMutations('cart', [
-            'selectProduct',
-            'selectAllShopProduct',
-            'selectAllProduct',
-            'saveCartIds',
-            'selectFailure',
-            'selectAllFailure'
-        ]),
+        ...mapActions('cart', ['initCart', 'removeFromCart']),
+        ...mapMutations('cart', ['selectAllProduct', 'saveCartIds', 'selectAllFailure']),
         initData() {
+            this.saveCartIds([]) // 清空已选项
+            this.isCheckAll = false
+            this.isshowDelbtn = false
             this.initCart().finally(() => {
-                this.skeletonShow = false
+                this.isRequest = false
             })
         },
         // 关闭优惠券弹窗
@@ -241,31 +280,28 @@ export default {
                 this.handlerPros = pros
             }
         },
-        // 优惠明细 TODO
+        // 优惠明细
         showDiscountedDetail() {
             this.showDitail = true
         },
         // 勾选单个失效商品
-        ischeckFailure(failure) {
-            this.selectFailure({
-                productId: failure.productId,
-                checked: !failure.productsChecked
-            })
-            this.getCheckedProductId()
+        chooseFailureProduct() {
+            this.isSelectAll()
         },
         // 勾选供应商下所有商品
-        chooseAll() {
+        chooseAllProduct() {
             this.isSelectAll()
         },
         // 勾选单核商品
-        chooseOne() {
+        chooseOneProduct() {
             this.isSelectAll()
         },
         // 勾选全部商品
-        checkAll() {
+        chooseAll() {
             this.isCheckAll = !this.isCheckAll
+            // 勾选所有有效商品
             this.selectAllProduct(this.isCheckAll)
-            // 删除商品的全选也要选中失效商品
+            // 勾选所有失效商品
             if (this.isshowDelbtn) {
                 this.selectAllFailure(this.isCheckAll)
             }
@@ -273,12 +309,17 @@ export default {
         },
         // 判断是否全选商品
         isSelectAll() {
+            // 是否勾选全部正常商品
             this.isCheckAll = this.goodsList.every(shop => shop.checked)
-            this.getCheckedProductId()
+            if (this.isshowDelbtn) {
+                this.isCheckAll = this.isCheckAll && this.failureList.every(product => product.productsChecked)
+            }
+            this.saveCartIds(this.getCheckedProductId())
         },
         // 获取勾选商品的id
         getCheckedProductId() {
             const cartIds = []
+            // 获取所有有效商品cartId
             this.goodsList.forEach(shop => {
                 const ids = shop.productList.reduce((cartIds, prod) => {
                     if (prod.productsChecked) cartIds.push(prod.cartId)
@@ -286,6 +327,7 @@ export default {
                 }, [])
                 cartIds.push(...ids)
             })
+            // 获取所有失效商品cartId
             if (this.isshowDelbtn) {
                 const ids = this.failureList.reduce((cartIds, prod) => {
                     if (prod.productsChecked) cartIds.push(prod.cartId)
@@ -294,7 +336,7 @@ export default {
                 cartIds.push(...ids)
             }
             console.log(cartIds)
-            this.saveCartIds(cartIds)
+            return cartIds
         },
         //计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
         totalPeice() {
@@ -323,57 +365,15 @@ export default {
             )
             this.allPrice = priceObj.allPrice
         },
-        //商品数量加加
-        changeCountAdd(item, pros) {
-            const productCount = pros.productCount + 1
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
-        //商品数量减减
-        changeCountSub(item, pros) {
-            let productCount = pros.productCount
-            if (productCount <= 1) {
-                productCount = 1
-                this.$util.msg('购买数量不能少于1', 2000)
-                return
-            } else {
-                productCount--
-            }
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
-        //输入商品数量更新
-        changeInput(pros) {},
-        //输入商品数量更新
-        changeNumber(e, item, pros) {
-            let _value = Math.abs(Number(e.detail.value))
-            let productCount = pros.productCount
-            if (_value <= 1) {
-                this.$util.msg('购买数量不能少于1', 2000)
-                productCount = 1
-            } else {
-                productCount = _value
-            }
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
         //显示删除商品管理
         showDelManager() {
             this.isshowDelbtn = true
-            this.listType = 'delete'
         },
         //隐藏删除商品管理
         hideDelManage() {
             this.selectAllFailure(false)
-            this.getCheckedProductId()
+            this.isSelectAll()
             this.isshowDelbtn = false
-            this.listType = 'list'
         },
         //删除购物车商品
         deleteList() {
@@ -382,30 +382,15 @@ export default {
             } else {
                 this.modal = true
                 this.contentModalText = '确定删除选中的商品吗？'
-                this.deleteType = 1
             }
         },
-        // 清空失效商品
-        deletefailureList() {
-            this.modal = true
-            this.contentModalText = '确定清除所有失效商品吗？'
-            this.deleteType = 2
-        },
         //从购物车移除商品
         handleClick(e) {
             if (e.index !== 1) return (this.modal = false)
-            if (this.deleteType === 1) {
-                // 删除所有勾选的商品
-                this.removeFromCart().finally(() => {
-                    this.isshowDelbtn = false
-                })
-            } else {
-                //一键删除失效商品
-                this.removeFailureFromCart().finally(() => {
-                    this.isshowDelbtn = false
-                    this.listType = 'list'
-                })
-            }
+            // 删除所有勾选的商品
+            this.removeFromCart().finally(() => {
+                this.isshowDelbtn = false
+            })
             this.modal = false
         },
         //跳转确认订单页面
@@ -462,11 +447,14 @@ export default {
 
 <style lang="scss" scoped>
 .cart {
-    padding-bottom: 124rpx;
     background: #f7f7f7;
     min-height: 100%;
     box-sizing: border-box;
+    &.hasPaddingTop {
+        padding-top: 80rpx;
+    }
     .cart-top {
+        flex: 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -475,6 +463,10 @@ export default {
         height: 80rpx;
         background: #f7f7f7;
         box-sizing: border-box;
+        &.fixed {
+            position: fixed;
+            z-index: 9999;
+        }
         .count {
             font-size: 30rpx;
             color: #333333;
@@ -646,7 +638,7 @@ export default {
             color: #999999;
         }
     }
-    .empty{
+    .empty {
         height: 80vh;
     }
 }

pages/login/login.vue

@@ -82,7 +82,6 @@ export default {
         ...mapActions('user', ['customLogin']),
         // 登录
         SubMitLogins() {
-            // const WechatInfo = uni.getStorageSync('wechatUserInfo')
             if (this.isLoginStatus) {
                 return
             }
@@ -103,12 +102,9 @@ export default {
         },
         GetUserProfile() {
             const self = this
-            // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
             wx.getUserProfile({
                 desc: '呵呵商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                 success(res) {
-                    console.log('新API', res)
-                    self.wxLogin(res.userInfo)
                     self.params.nickName = res.userInfo.nickName
                     self.params.headImgUrl = res.userInfo.avatarUrl
                     self.isLoginStatus = true
@@ -122,23 +118,6 @@ export default {
         LoginGetUser() {
             this.customLogin(this.params)
             this.isLoginStatus = false
-            // this.UserService.UserMobileLogin(this.params)
-            //     .then(response => {
-            //         // 保存用户信息
-            //         const _data = JSON.parse(response.data)
-            //         this.login(_data)
-            //         this.updateStatus(_data)
-            //         // 登录成功提示
-            //         this.$util.msg('登录成功', 1500, false, 'success')
-            //         this.isLoginStatus = false
-            //         setTimeout(() => {
-            //             this.$api.switchTabTo('/pages/tabBar/index/index')
-            //         }, 1500)
-            //     })
-            //     .catch(error => {
-            //         this.$util.msg(error.msg, 2000)
-            //         this.isLoginStatus = false
-            //     })
         },
         GetMobileCodeFn() {
             //获取手机验证码

pages/tabBar/cart/index.vue

@@ -1,9 +1,10 @@
 <template>
-    <view class="cart">
+    <view class="cart" :class="{ hasPaddingTop: cartTopFixed }">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
         <template v-if="!isEmpty">
-            <template v-if="listType !== 'delete'">
+            <template v-if="!isshowDelbtn">
                 <!-- 商品统计 / 批量删除商品 -->
-                <view class="cart-top">
+                <view class="cart-top" :class="{ fixed: cartTopFixed }">
                     <view class="count">共{{ kindCount }}件商品</view>
                     <view class="btn" @click="showDelManager">删除</view>
                 </view>
@@ -13,31 +14,30 @@
                     <view class="btn" @click="couponVisible = true">领券</view>
                 </view>
             </template>
-            <view>
-                <!-- 购物车列表 -->
-                <template v-for="(cart, index) in goodsList">
-                    <cm-cart-product
-                        class="product-list"
-                        :listType="listType"
-                        :key="index"
-                        :data="cart"
-                        vkey="productList"
-                        @chooseAll="chooseAll"
-                        @chooseOne="chooseOne"
-                    ></cm-cart-product>
-                </template>
-                <!-- 失效商品列表 -->
+            <!-- 购物车列表 -->
+            <template v-for="(cart, index) in goodsList">
                 <cm-cart-product
                     class="product-list"
+                    :listType="listType"
                     :key="index"
-                    :data="failureList"
-                    listType="expired"
+                    :data="cart"
+                    vkey="productList"
+                    @chooseAll="chooseAllProduct"
+                    @chooseOne="chooseOneProduct"
                 ></cm-cart-product>
-            </view>
-
+            </template>
+            <!-- 失效商品列表 -->
+            <cm-cart-product
+                class="product-list"
+                :key="index"
+                :data="failureList"
+                :listType="failureListType"
+                @chooseOne="chooseFailureProduct"
+                v-if="failureList.length > 0"
+            ></cm-cart-product>
             <!-- 底部按钮 -->
             <view class="footer">
-                <view class="radio" @click="checkAll">
+                <view class="radio" @click="chooseAll">
                     <text class="iconfont" :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"></text>
                     <text class="tip">全选</text>
                 </view>
@@ -132,16 +132,16 @@ export default {
             allPrice: 0, //所有价格
             totalOriginalPrice: 0, //所有原价价
             reducedPrice: 0, //满减
-            skeletonShow: true,
             isshowDelbtn: false,
             scrollHeight: 'auto',
-            hasNextPage: false,
             modal: false,
             contentModalText: '',
-            deleteType: 0,
             couponVisible: false,
             showDitail: false,
-            listType: 'list'
+            listType: 'normal',
+            failureListType: 'expired',
+            scrollTop: 0,
+            isRequest: true
         }
     },
     onLoad() {
@@ -161,6 +161,9 @@ export default {
         //被选中的产品数量
         allCount() {
             return this.cartIds.length
+        },
+        cartTopFixed() {
+            return this.scrollTop > 0 && !this.isshowDelbtn
         }
     },
     filters: {
@@ -180,6 +183,15 @@ export default {
             handler(val, oldval) {
                 this.totalPeice()
             }
+        },
+        isshowDelbtn(val) {
+            if (val) {
+                this.failureListType = 'expired delete'
+                this.listType = 'normal delete'
+            } else {
+                this.failureListType = 'expired'
+                this.listType = 'normal'
+            }
         }
     },
     //下拉刷新
@@ -197,22 +209,18 @@ export default {
             this.$api.redirectTo('/pages/login/login')
         }
     },
-    onHide() {
-        this.saveCartIds([])
+    onPageScroll(e) {
+        this.scrollTop = e.scrollTop
     },
     methods: {
-        ...mapActions('cart', ['initCart', 'updateShoppogCount', 'removeFromCart', 'removeFailureFromCart']),
-        ...mapMutations('cart', [
-            'selectProduct',
-            'selectAllShopProduct',
-            'selectAllProduct',
-            'saveCartIds',
-            'selectFailure',
-            'selectAllFailure'
-        ]),
+        ...mapActions('cart', ['initCart', 'removeFromCart']),
+        ...mapMutations('cart', ['selectAllProduct', 'saveCartIds', 'selectAllFailure']),
         initData() {
+            this.saveCartIds([]) // 清空已选项
+            this.isCheckAll = false
+            this.isshowDelbtn = false
             this.initCart().finally(() => {
-                this.skeletonShow = false
+                this.isRequest = false
             })
         },
         // 关闭优惠券弹窗
@@ -226,31 +234,28 @@ export default {
                 this.handlerPros = pros
             }
         },
-        // 优惠明细 TODO
+        // 优惠明细
         showDiscountedDetail() {
             this.showDitail = true
         },
         // 勾选单个失效商品
-        ischeckFailure(failure) {
-            this.selectFailure({
-                productId: failure.productId,
-                checked: !failure.productsChecked
-            })
-            this.getCheckedProductId()
+        chooseFailureProduct() {
+            this.isSelectAll()
         },
         // 勾选供应商下所有商品
-        chooseAll() {
+        chooseAllProduct() {
             this.isSelectAll()
         },
         // 勾选单核商品
-        chooseOne() {
+        chooseOneProduct() {
             this.isSelectAll()
         },
         // 勾选全部商品
-        checkAll() {
+        chooseAll() {
             this.isCheckAll = !this.isCheckAll
+            // 勾选所有有效商品
             this.selectAllProduct(this.isCheckAll)
-            // 删除商品的全选也要选中失效商品
+            // 勾选所有失效商品
             if (this.isshowDelbtn) {
                 this.selectAllFailure(this.isCheckAll)
             }
@@ -258,12 +263,17 @@ export default {
         },
         // 判断是否全选商品
         isSelectAll() {
+            // 是否勾选全部正常商品
             this.isCheckAll = this.goodsList.every(shop => shop.checked)
-            this.getCheckedProductId()
+            if (this.isshowDelbtn) {
+                this.isCheckAll = this.isCheckAll && this.failureList.every(product => product.productsChecked)
+            }
+            this.saveCartIds(this.getCheckedProductId())
         },
         // 获取勾选商品的id
         getCheckedProductId() {
             const cartIds = []
+            // 获取所有有效商品cartId
             this.goodsList.forEach(shop => {
                 const ids = shop.productList.reduce((cartIds, prod) => {
                     if (prod.productsChecked) cartIds.push(prod.cartId)
@@ -271,6 +281,7 @@ export default {
                 }, [])
                 cartIds.push(...ids)
             })
+            // 获取所有失效商品cartId
             if (this.isshowDelbtn) {
                 const ids = this.failureList.reduce((cartIds, prod) => {
                     if (prod.productsChecked) cartIds.push(prod.cartId)
@@ -279,7 +290,7 @@ export default {
                 cartIds.push(...ids)
             }
             console.log(cartIds)
-            this.saveCartIds(cartIds)
+            return cartIds
         },
         //计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
         totalPeice() {
@@ -308,57 +319,15 @@ export default {
             )
             this.allPrice = priceObj.allPrice
         },
-        //商品数量加加
-        changeCountAdd(item, pros) {
-            const productCount = pros.productCount + 1
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
-        //商品数量减减
-        changeCountSub(item, pros) {
-            let productCount = pros.productCount
-            if (productCount <= 1) {
-                productCount = 1
-                this.$util.msg('购买数量不能少于1', 2000)
-                return
-            } else {
-                productCount--
-            }
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
-        //输入商品数量更新
-        changeInput(pros) {},
-        //输入商品数量更新
-        changeNumber(e, item, pros) {
-            let _value = Math.abs(Number(e.detail.value))
-            let productCount = pros.productCount
-            if (_value <= 1) {
-                this.$util.msg('购买数量不能少于1', 2000)
-                productCount = 1
-            } else {
-                productCount = _value
-            }
-            this.updateShoppogCount({
-                cartId: pros.cartId,
-                productCount
-            })
-        },
         //显示删除商品管理
         showDelManager() {
             this.isshowDelbtn = true
-            this.listType = 'delete'
         },
         //隐藏删除商品管理
         hideDelManage() {
             this.selectAllFailure(false)
-            this.getCheckedProductId()
+            this.isSelectAll()
             this.isshowDelbtn = false
-            this.listType = 'list'
         },
         //删除购物车商品
         deleteList() {
@@ -367,30 +336,15 @@ export default {
             } else {
                 this.modal = true
                 this.contentModalText = '确定删除选中的商品吗？'
-                this.deleteType = 1
             }
         },
-        // 清空失效商品
-        deletefailureList() {
-            this.modal = true
-            this.contentModalText = '确定清除所有失效商品吗？'
-            this.deleteType = 2
-        },
         //从购物车移除商品
         handleClick(e) {
             if (e.index !== 1) return (this.modal = false)
-            if (this.deleteType === 1) {
-                // 删除所有勾选的商品
-                this.removeFromCart().finally(() => {
-                    this.isshowDelbtn = false
-                })
-            } else {
-                //一键删除失效商品
-                this.removeFailureFromCart().finally(() => {
-                    this.isshowDelbtn = false
-                    this.listType = 'list'
-                })
-            }
+            // 删除所有勾选的商品
+            this.removeFromCart().finally(() => {
+                this.isshowDelbtn = false
+            })
             this.modal = false
         },
         //跳转确认订单页面
@@ -432,10 +386,13 @@ export default {
 
 <style lang="scss" scoped>
 .cart {
-    padding-bottom: 124rpx;
+    padding-bottom: 100rpx;
     background: #f7f7f7;
     min-height: 100%;
     box-sizing: border-box;
+    &.hasPaddingTop {
+        padding-top: 80rpx;
+    }
     .cart-top {
         display: flex;
         justify-content: space-between;
@@ -445,6 +402,12 @@ export default {
         height: 80rpx;
         background: #f7f7f7;
         box-sizing: border-box;
+        &.fixed {
+            position: fixed;
+            top: 0;
+            flex: 0;
+            z-index: 9999;
+        }
         .count {
             font-size: 30rpx;
             color: #333333;
@@ -616,7 +579,7 @@ export default {
             color: #999999;
         }
     }
-    .empty{
+    .empty {
         height: 80vh;
     }
 }

pages/user/activity/activity-list.vue

@@ -1,5 +1,6 @@
 <template>
     <view class="container activity">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
         <view class="activity-content" v-if="activityList.length > 0">
             <view
                 class="activity-list"
@@ -32,10 +33,15 @@
                 <text class="error-text">您还没有活动哟~</text> <text class="error-text">可联系采美帮您设置活动~</text>
             </view>
         </view>
+        <template v-if="activityList.length >= 6">
+            <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
+            <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#ff457b"></tui-nomore>
+        </template>
     </view>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
     data() {
         return {
@@ -46,60 +52,66 @@ export default {
                 userId: 0,
                 pageNum: 1,
                 pageSize: 10
-            }
+            },
+            isRefresh: false,
+            isRequest: true,
+            loadmore: false // 正在加载更多
+        }
+    },
+    computed: {
+        ...mapGetters(['userId']),
+        loadingText() {
+            return this.hasNextPage ? '上拉加载更多' : '没有更多了'
         }
     },
-    onLoad() {},
+    onLoad() {
+        this.listQuery.userId = this.userId
+        this.getActivityAreaList()
+    },
     methods: {
-        GetInitProductList() {
+        getActivityAreaList() {
+            this.loadmore = true
             //初始化活动列表数据
             this.ProductService.GetProductActivityAreaList(this.listQuery)
                 .then(response => {
                     const data = response.data
                     this.hasNextPage = data.hasNextPage
-                    this.activityList = data.list
+                    if (this.isRefresh) {
+                        this.activityList = data.list
+                    } else {
+                        this.activityList = [...this.activityList, ...data.list]
+                    }
+                    this.loadmore = false
+                    this.isRequest = false
                 })
                 .catch(error => {
                     this.$util.msg(error.msg, 2000)
                 })
-        },
-        GetOnReachBottomData() {
-            //上滑加载更多
-            this.listQuery.pageNum += 1
-            this.ProductService.GetProductActivityAreaList(this.listQuery)
-                .then(response => {
-                    const data = response.data
-                    this.hasNextPage = data.hasNextPage
-                    this.activityList = this.activityList.concat(data.list)
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
+                .finally(() => {
+                    if (this.isRefresh) {
+                        setTimeout(() => {
+                            uni.stopPullDownRefresh()
+                        }, 500)
+                        this.isLoadMore = false
+                    }
                 })
         },
         NavigatorPath(item) {
-            this.$api.navigateTo(
-                `/pages/user/activity/activity?activityId=${item.activityId}&userId=${this.listQuery.userId}&name=${
-                    item.name
-                }`
-            )
+            this.$api.navigateTo(`/pages/user/activity/activity?activityId=${item.activityId}&name=${item.name}`)
         }
     },
+    //下拉刷新
     onPullDownRefresh() {
-        //下拉刷新
+        this.isRefresh = true
         this.listQuery.pageNum = 1
-        this.GetInitProductList()
-        uni.stopPullDownRefresh()
+        this.activityList = []
+        this.getActivityAreaList()
     },
+    // 加载更多
     onReachBottom() {
         if (this.hasNextPage) {
-            this.GetOnReachBottomData()
+            this.getActivityAreaList()
         }
-    },
-    onShow() {
-        this.$api.getStorage().then(resolve => {
-            this.listQuery.userId = resolve.userId ? resolve.userId : ''
-            this.GetInitProductList()
-        })
     }
 }
 </script>

pages/user/activity/activity.vue

@@ -1,11 +1,12 @@
 <template>
     <view class="container activity">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
         <view class="activity-banner">
             <image class="activity-banner-image" :src="activityBanner" mode=""></image>
         </view>
         <!-- 商品列表 -->
         <view class="container-section tui-skeleton clearfix">
-            <view class="product-list" v-for="(pro, index) in productList" :key="index" @click.stop="Details(pro)">
+            <view class="product-list" v-for="(pro, index) in productList" :key="index" @click.stop="detail(pro)">
                 <view class="product-list-image">
                     <image class="product-image" :src="pro.mainImage" mode=""></image>
                 </view>
@@ -15,7 +16,7 @@
                         <text class="tag tag-01">促销</text> <text class="tag tag-02">活动价</text>
                     </view>
                     <view class="product-list-pri">
-                        <view class="price">￥{{ pro.price | PriceFormat }}</view>
+                        <view class="price">￥{{ pro.price | priceFormat }}</view>
                         <view class="carts" @click.stop="handAddCarts(pro)">
                             <view class="carts-add"> <text class="iconfont icon-gouwuche"></text> </view>
                         </view>
@@ -23,16 +24,12 @@
                 </view>
             </view>
         </view>
+        <template v-if="productList.length >= 6">
+            <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
+            <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#ff457b"></tui-nomore>
+        </template>
         <!-- 可拖动悬浮按钮 -->
-        <cm-drag
-            :cartNum="cartNum"
-            :isDock="true"
-            :existTabBar="true"
-            @btnClick="btnClick"
-            @btnTouchstart="btnTouchstart"
-            @btnTouchend="btnTouchend"
-        >
-        </cm-drag>
+        <cm-drag :cartNum="kindCount" :isDock="true" :existTabBar="true" @btnClick="btnClick"> </cm-drag>
     </view>
 </template>
 
@@ -54,92 +51,86 @@ export default {
                 activityId: 0,
                 userId: 0,
                 pageNum: 1,
-                pageSize: 10
+                pageSize: 6
             },
             activityName: '',
-            UserId: 0, //存储普通用户ID
             hasNextPage: false,
-            productList: [] //商品列表
+            productList: [], //商品列表
+            isRefresh: false,
+            isRequest: true,
+            loadmore: false // 正在加载更多
         }
     },
     onLoad(option) {
         this.listQuery.activityId = option.activityId
-        this.listQuery.userId = option.userId
+        this.listQuery.userId = this.userId
         this.activityName = option.name
-        this.GetProductActivityDetails()
+        this.getProductActivityDetails()
     },
     filters: {
         //处理金额
-        PriceFormat: function(text) {
+        priceFormat: function(text) {
             return Number(text).toFixed(2)
         }
     },
     computed: {
-        ...mapGetters(['hasLogin'])
+        ...mapGetters(['hasLogin', 'userId', 'kindCount']),
+        loadingText() {
+            return this.hasNextPage ? '上拉加载更多' : '没有更多了'
+        }
     },
     methods: {
-        ...mapActions('cart',['addToCart']),
-        GetProductActivityDetails() {
-            //初始化活动详情
+        ...mapActions('cart', ['addToCart']),
+        // 获取活动信息
+        getProductActivityDetails() {
+            this.loadmore = true
             this.ProductService.GetProductActivityDetails(this.listQuery)
                 .then(response => {
                     const data = response.data
                     this.activityBanner = data.image
                     this.hasNextPage = data.pageInfo.hasNextPage
-                    this.productList = data.pageInfo.list
+                    if (this.isRefresh) {
+                        this.productList = data.pageInfo.list
+                    } else {
+                        this.productList = [...this.productList, ...data.pageInfo.list]
+                    }
+                    this.isRequest = false
+                    this.loadmore = false
                 })
                 .catch(error => {
                     this.$util.msg(error.msg, 2000)
                 })
-        },
-        GetOnReachBottomData() {
-            //上滑加载更多
-            this.listQuery.pageNum += 1
-            this.ProductService.GetProductActivityDetails(this.listQuery)
-                .then(response => {
-                    const data = response.data
-                    this.hasNextPage = data.pageInfo.hasNextPage
-                    this.productList = this.productList.concat(data.pageInfo.list)
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
+                .finally(() => {
+                    if (this.isRefresh) {
+                        setTimeout(() => {
+                            uni.stopPullDownRefresh()
+                        }, 500)
+                        this.isRefresh = false
+                    }
                 })
         },
-        Details(pro) {
-            this.$api.navigateTo(
-                `/pages/goods/product-activi?productId=${pro.productId}&heUserId=${this.listQuery.userId}`
-            )
+        detail(pro) {
+            this.$api.navigateTo(`/pages/goods/product-activi?productId=${pro.productId}&heUserId=${this.userId}`)
         },
         handAddCarts(pro) {
-            this.addToCart({ productId: pro.productId })
+            this.addToCart({ productId: pro.productId, heUserId: this.userId })
         },
         btnClick() {
-            this.$emit('goCartPage')
-        },
-        btnTouchstart() {
-            // console.log('btnTouchstart');
-        },
-        btnTouchend() {
-            // console.log('btnTouchend');
+            this.$api.navigateTo('/pages/goods/cart')
         }
     },
     onPullDownRefresh() {
         //下拉刷新
+        this.isRefresh = true
         this.listQuery.pageNum = 1
-        THIS.GetProductActivityDetails()
-        uni.stopPullDownRefresh()
+        this.getProductActivityDetails()
     },
     onReachBottom() {
         if (this.hasNextPage) {
-            this.GetOnReachBottomData()
+            this.listQuery.pageNum ++
+            this.getProductActivityDetails()
         }
     },
-    onShow() {
-        wxLogin.wxLoginQuick()
-        this.$api.getStorage().then(resolve => {
-            this.UserId = resolve.userId ? resolve.userId : ''
-        })
-    },
     onShareAppMessage(res) {
         //分享转发
         if (res.from === 'button') {
@@ -147,9 +138,7 @@ export default {
         }
         return {
             title: `${this.activityName}`,
-            path: `/pages/user/activity/activity?activityId=${this.listQuery.activityId}&userId=${
-                this.listQuery.userId
-            }`,
+            path: `/pages/user/activity/activity?activityId=${this.listQuery.activityId}&userId=${this.userId}`,
             imageUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-index-share.jpg'
         }
     }

services/ajax.service.js

@@ -12,7 +12,6 @@ class AjaxService {
     }
     getHeaders({ header = {} }) {
         header['Accept'] = 'application/json'
-        // header['Content-Type'] = 'application/x-www-form-urlencoded'
         header['Content-Type'] = 'application/json'
         return header
     }
@@ -24,7 +23,7 @@ class AjaxService {
         }
         let { isLoading = true } = options
         if (isLoading) {
-            wx.showLoading({ title: '加载中' })
+            uni.showLoading({ title: '加载中' })
         }
         const requestPromise = new Promise((resolve, reject) => {
             uni.request({
@@ -33,7 +32,7 @@ class AjaxService {
                 data: options.data || {},
                 header,
                 success: res => {
-                    if (isLoading) wx.hideLoading()
+                    if (isLoading) uni.hideLoading()
                     if (options.isStatus) {
                         resolve(res.data)
                     } else {
@@ -46,7 +45,7 @@ class AjaxService {
                 },
                 fail: error => {
                     reject(error)
-                    wx.hideLoading()
+                    uni.hideLoading()
                 }
             })
         })

services/product.service.js

@@ -153,7 +153,7 @@ export default class ProductService {
         return this.AjaxService.get({
             url: '/product/activityArea',
             data,
-            isLoading: true,
+            isLoading: false,
         })
     }
     /* 活动详情 */
@@ -161,7 +161,7 @@ export default class ProductService {
         return this.AjaxService.get({
             url: '/product/activity/details',
             data,
-            isLoading: true,
+            isLoading: false,
         })
     }
 }

store/modules/cart.js

@@ -184,13 +184,13 @@ const actions = {
             })
     },
     // 添加购物车
-    addToCart({ dispatch, rootGetters }, { productId, productCount = 1 }) {
+    addToCart({ dispatch, rootGetters }, { productId, productCount = 1, heUserId = 0 }) {
         if (!rootGetters.hasLogin) return navigateTo('/pages/login/login')
         productService.shoppingAddCart({
             productId,
             userId: rootGetters.userId,
             productCount,
-            heUserId: 0
+            heUserId
         }).then(response => {
             showMsg('加入购物车成功', 1500, true, 'success')
             dispatch('getCartNumber')

store/modules/user.js

@@ -43,7 +43,7 @@ const actions = {
                 dispatch('cart/getCartNumber', state.userId, { root: true })
             })
             .catch(error => {
-                commit('LOGIN_OUT', response.data)
+                commit('LOGIN_OUT', error.data)
             })
     },
     // 手机号注册登录