【新增】小程序【分类】页面当使用仿点餐模式时，增加了二级分类及滑动效果。

CoreCms.Net.Uni-App/CoreShop/pages/category/index/index.vue

@@ -57,14 +57,18 @@
                 <view class="content" :style="'height:' + scorllH+'px;'">
                     <scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
                         <view class="wrapper">
-                            <view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus"
+                            <view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus" :key="index" @tap="handleMenuTap(item.id,index)">
-                                  :key="index" @tap="handleMenuTap(item.id)">
                                 <text>{{ item.name }}</text>
-                                <!--<view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>-->
                             </view>
                         </view>
                     </scroll-view>
                     <scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
+                        <u-sticky v-if="menuChilds">
+                            <view class="coreshop-bg-white coreshop-padding-left-10">
+                                <u-tabs :list="menuChilds" :current="childCurrent" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)',fontSize:'14px'}" :inactiveStyle="{color: '#606266',transform: 'scale(1)',fontSize:'14px'}" @change="childIdCheck"></u-tabs>
+                            </view>
+                        </u-sticky>
+
                         <view class="wrapper">
                             <view class="list">
                                 <view class="category" v-for="(good, key) in goodsList" :key="key" :id="`cate-${good.id}`">
@@ -99,7 +103,7 @@
                         <view class="tag">{{cartNums}}</view>
                     </view>
                     <view class="price">￥{{cartMoney}}</view>
-                    <button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
+                    <button type="primary" class="pay-btn" @tap="redirectCart()" :disabled="cartNums<=0">去结算</button>
                 </view>
                 <!-- 购物车栏 end -->
             </view>
@@ -140,6 +144,10 @@
                 cartNums: 0, // 购物车数量
                 cartMoney: 0, // 购物车数量
                 menus: [],//所有分类
+                menuChilds: [], //当前分类下子集
+                needCurrentCateId: 0, //仿点餐模式下应该获取大类还是小类数据
+                childCurrent: 0, //子集默认选中下标
+
                 goodsList: [], //所有商品
                 menuScrollIntoView: '',
                 good: {},
@@ -190,7 +198,7 @@
                 return this.$store.state.config.cateStyle ? this.$store.state.config.cateStyle : 3;
             }
         },
-        onShow() {
+        onLoad() {
             uni.getSystemInfo({
                 success: (e) => {
                     // #ifndef MP
@@ -210,13 +218,18 @@
                 this.goodsList = [];
                 this.page = 1;
                 this.limit = 10;
-
                 this.categories();
-                this.getCartNums();
+                //this.getCartNums();
             } else {
                 this.categories();
             }
         },
+        onShow() {
+            // 获取购物车数量
+            if (this.$store.state.config.cateStyle == 4) {
+                this.getCartNums();
+            }
+        },
         onReachBottom() {
             if (this.loadStatus != 'nomore') {
                 this.getGoods();
@@ -270,8 +283,19 @@
                         if (this.$store.state.config.cateStyle == 4) {
                             this.menus = res.data;
                             if (res.data.length > 0) {
+                                for (var i = 0; i < res.data.length; i++) {
+                                    if (res.data[i].child) {
+                                        let item = {
+                                            id: 0,
+                                            imageUrl: "",
+                                            name: "全部",
+                                            sort: 0,
+                                        }
+                                        res.data[i].child.unshift(...[item])
+                                    }
+                                }
                                 this.currentCateId = res.data[0].id;
-
+                                this.menuChilds = res.data[0].child;
                             }
                             this.getGoods();
                         }
@@ -293,7 +317,6 @@
                 //console.log("监听 - 关闭sku组件");
             },
             showGoodSkuModal(item) {
-                //console.log(item);
                 if (item.id) {
                     this.getGoodsDetail(item.id);
                 }
@@ -348,8 +371,6 @@
             },
             // 加入购物车按钮
             addCart(selectShop) {
-                //console.log("监听 - 加入购物车");
-                //console.log(selectShop);
                 var that = this;
                 uni.showLoading({
                     title: '加载中'
@@ -380,8 +401,6 @@
             },
             // 立即购买
             buyNow(selectShop) {
-                //console.log("监听 - 立即购买");
-                //console.log(selectShop);
                 var that = this;
                 uni.showLoading({
                     title: '加载中'
@@ -412,13 +431,38 @@
                 that.closeSkuPopup();
             },
 
-            handleMenuTap(id) {
+            handleMenuTap(id, index) {
-                this.currentCateId = id
+
+                var _this = this;
+                this.currentCateId = id;
+                this.needCurrentCateId = id;
+
+                this.childCurrent = 1;
+                console.log('childCurrent', this.childCurrent);
+
+                this.menuChilds = [];
+                this.menuChilds = _this.menus[index].child;
+
+                this.childCurrent = 0;
+                console.log('childCurrent', this.childCurrent);
+                this.$forceUpdate()
+
+                this.page = 1;
+                this.goodsList = [];
+                this.getGoods(0);
+
+            },
+            childIdCheck(e) {
+                if (e.id != 0) {
+                    this.needCurrentCateId = e.id;
+                } else {
+                    this.needCurrentCateId = this.currentCateId;
+                }
                 this.page = 1;
                 this.goodsList = [];
                 this.getGoods();
-                //this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
             },
+
             //取得商品数据
             getGoods: function () {
                 uni.showLoading({
@@ -430,7 +474,7 @@
                     limit: this.limit,
                 };
                 var where = {
-                    catId: this.currentCateId,
+                    catId: this.needCurrentCateId,
                 };
                 data.where = JSON.stringify(where);
                 _this.$u.api.goodsList(data).then(res => {
@@ -461,6 +505,7 @@
                         if (res.status) {
                             this.cartNums = res.data.count;
                             this.cartMoney = res.data.money;
+                            console.log(this.cartNums);
                         }
                     })
                 }