jufubao-food 1.0.12-beta8 → 1.0.12-beta9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-food",
-  "version": "1.0.12-beta8",
+  "version": "1.0.12-beta9",
   "private": false,
   "description": "聚福宝业务组件餐饮插件包",
   "main": "index.js",

package/src/components/JfbFoodProductList/JfbFoodProductList.vue

@@ -200,6 +200,7 @@
         prodScrollIntoView: "",
         prodScrollTop: 0,
         scrollUpTimer: null,
+        scrollTimer: null,
 
         scrollBoxHeight: 0, // 商品滚动盒子高度
         triggerHeight: 100, // 触发加载更多高度
@@ -392,49 +393,81 @@
           }
         })
       },
+      getList(options = {}){
+        return new Promise((resolve, reject) => {
+          jfbRootExec("getFoodProductList", {
+            vm: this,
+            data: {
+              xnamespace: this.xnamespace,
+              shop_id: this.shopInfo.shop_id,
+              consume_mode: this.consume_mode,
+              page_token: options.page_token || 1,
+              page_size: this.page_size,
+              category_id: options.category_id,
+              ...options,
+            }
+          }).then(res => {
+            let productList = res.lists;
+            this.categoryList = this.categoryList.map((item, index) => {
+              if(item.category_id === options.category_id){
+                let prodList = [];
+                if(item.productList && item.productList.length){
+                  prodList = item.productList.concat(productList);
+                }else{
+                  prodList = productList;
+                }
+                prodList = prodList.map(prod => {
+                  prod.key = `${item.category_id}_${prod.product_id}`;
+                  return prod;
+                })
+                prodList = prodList.reduce((pre, cur) => {
+                  if(!pre[cur.key]){
+                    pre[cur.key] = cur;
+                  }
+                  return pre;
+                }, {});
+                item.productList = Object.values(prodList);
+                item.total_size = res.total_size;
+                item.next_page_token = res.next_page_token;
+              }
+              return item;
+            })
+            resolve(res);
+          }).catch(err => {
+            reject(err);
+          })
+        })
+      },
       //获取门店商品列表
       p_getFoodProductList(){
         let curLoadCate = this.categoryList[this.loadCateIndex];
-        if(!curLoadCate) return;
+        if(!curLoadCate) return Promise.resolve();
         this.$xdShowLoading({});
-        jfbRootExec("getFoodProductList", {
-          vm: this,
-          data: {
-            xnamespace: this.xnamespace,
-            shop_id: this.shopInfo.shop_id,
-            consume_mode: this.consume_mode,
-            page_token: curLoadCate.next_page_token || 1,
-            page_size: this.page_size,
-            category_id: curLoadCate.category_id,
-          }
-        }).then(res => {
-          // this.productList = res.lists;
-          this.$xdHideLoading();
-          let productList = res.lists;
-          this.categoryList = this.categoryList.map((item, index) => {
-            if(index === this.loadCateIndex){
-              if(item.productList && item.productList.length){
-                item.productList = item.productList.concat(productList);
-              }else{
-                item.productList = productList;
-              }
-              item.productList = item.productList.map(prod => {
-                prod.key = `${item.category_id}_${prod.product_id}`;
-                return prod;
-              })
-              item.total_size = res.total_size;
-              item.next_page_token = res.next_page_token;
+        let options = {
+          page_token: curLoadCate.next_page_token || 1,
+          category_id: curLoadCate.category_id,
+        };
+        return new Promise((resolve,reject) => {
+          this.getList(options).then(async res => {
+            this.$xdHideLoading();
+            if(res.total_size < 3){
+              await this.loadNextCateProduct(this.loadCateIndex)
             }
-            return item;
-          })
-          this.$nextTick(() => {
-            this.setCategoryRect();
-            this.isLoading = false;
+            this.$nextTick(() => {
+              setTimeout(() => {
+                this.setCategoryRect();
+                this.isLoading = false;
+              }, 300)
+            });
+            resolve(res);
+          }).catch(err => {
+            this.$xdHideLoading();
+            reject(err);
           })
-          console.log(this.categoryList, 'categoryList')
         })
       },
       setCategoryRect(){
+        console.log("setCategoryRect")
         const query = uni.createSelectorQuery().in(this);
         this.categoryList = this.categoryList.map(cate => {
           let id = this.getID(cate);
@@ -458,12 +491,16 @@
       getID(cate) {
         return `category_${cate.category_id}`;
       },
-      switchCate(index){
+      async switchCate(index){
         this.pointerScroll = false;
         this.cateIndex = index;
         this.loadCateIndex = index;
         let curCate = this.categoryList[this.cateIndex];
         this.prodScrollIntoView = this.getID(curCate);
+        //是否最后一个分类
+        if(this.cateIndex === this.categoryList.length - 1){
+          await this.loadPreCateProduct(index);
+        }
         if(curCate.productList && curCate.productList.length===0){
           this.p_getFoodProductList();
         }
@@ -488,8 +525,23 @@
           this.handleCurCate(e);
         }
         this.lastScrollTop = scrollTop;
-        
+
+        //滚动结束后，触发纠错机制
+        if(this.scrollTimer) clearTimeout(this.scrollTimer);
+        this.scrollTimer = setTimeout(() => {
+          this.getProductIsEmpty();
+        }, 200)
       },
+      //滚动过快，当前项未加载
+      getProductIsEmpty(){
+        let curCate = this.categoryList[this.cateIndex];
+        if(!curCate) return;
+        if(curCate.productList && curCate.productList.length===0){
+          console.log("当前分类商品列表为空，重新加载数据");
+          this.switchCate(this.cateIndex);
+        }
+      },
+
       productBoxScrollUp(e){
         let scrollTop = e.detail.scrollTop
         let curIndex = this.categoryList.findIndex(item => {
@@ -545,10 +597,11 @@
           this.isLoading = true;
           //判断是否需要加载更多, 继续加载当前分类，还是加载下一个分类
           if(curCate.productList && curCate.productList.length < curCate.total_size){
+            console.log("继续加载当前分类商品 categoryList")
             this.loadCateIndex = curIndex;
             this.p_getFoodProductList();
           }else{
-            // console.log("加载下一个分类商品 categoryList")
+            console.log("加载下一个分类商品 categoryList")
             this.loadCateIndex = curIndex + 1;
             let nextCate = this.categoryList[this.loadCateIndex];
             if(nextCate && nextCate.productList && nextCate.productList.length < nextCate.total_size){
@@ -560,6 +613,46 @@
           return;
         }
       },
+      loadPreCateProduct(curCateIndex){
+        let preCateIndex = curCateIndex - 1;
+        let preCate = this.categoryList[preCateIndex];
+        if(!preCate) return Promise.resolve();
+        if(preCate.productList && preCate.productList.length === 0){
+          let options = {
+            page_token: 1,
+            category_id: preCate.category_id,
+          }
+          return new Promise((resolve, reject) => {
+            this.getList(options).then(async res => {
+              if(res.lists.length < 3 ) {
+                await this.loadPreCateProduct(preCateIndex)
+              }
+              resolve();
+            }).catch(err => {
+              reject(err);
+            })
+          })
+        }
+        return Promise.resolve();
+      },
+      loadNextCateProduct(curCateIndex){
+        console.log("loadNextCateProduct")
+        let nextCateIndex = curCateIndex + 1;
+        let nextCate = this.categoryList[nextCateIndex];
+        if(!nextCate) return Promise.resolve();
+        if(nextCate.productList && nextCate.productList.length === 0){
+          let options = {
+            page_token: 1,
+            category_id: nextCate.category_id,
+          }
+          this.getList(options).then(async res => {
+            if(res.lists.length < 3 ) {
+              await this.loadNextCateProduct(nextCateIndex)
+            }
+          })
+        }
+        return Promise.resolve();
+      },
 
       toProductDetail(product){
         if(product.has_choose){