增加刷新功能

zhiyangdu
1 parent 528f78b5
Showing 1 changed file with 133 additions and 1 deletions
src/components/tabBox/tabBox.vue
@@ -11,17 +11,23 @@
                       :htmls="item.content">
                   </html-box>
                   <!-- 精品推荐 -->
+                      <!-- 精品推荐 -->
+                      <div class="boutique-list" v-infinite-scroll="loadBoutique" infinite-scroll-disabled="paging.boutique.loading" :infinite-scroll-distance="paging.distance">
                   <img-list-box
                       v-if="item.style == '1'"
                       @detail="toDetail"
                       :imgLists="item.img">
                   </img-list-box>
+                      </div>
                   <!-- 商品推荐 -->
+                      <!-- 商品推荐 -->
+                      <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">
                   <column-commodity-list-box
                       v-if="item.style == '15'"
                       @detail="toCommodityDetail"
                       :columnLists="item">
                   </column-commodity-list-box>
+                      </div>
                       <!--优惠专区-->
                       <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
                                     :discountZoneInfo="item">
@@ -44,6 +50,17 @@
       return {
           active: 0,
           tabbaromponents: null, // 组件库
+          paging: {                   // 分页
+              boutique: {
+                  loading: true,
+                  page: 1
+              },
+              commodity: {
+                  loading: true,
+                  page: 1
+              },
+              distance: 50
+          }
       }
     },
     props:["tabbar"],
@@ -58,7 +75,8 @@
         this.tabbaromponents = this.tabbar.find((item)=>{
             return item.title === "关爱屋"
         });
-        console.log(this.tabbaromponents)
+        // 获取领头雁电商精品推荐
+        this.getActivityAdsGoods(this.paging.boutique.page);
     },
     methods: {
         onChange(name, title) {
@@ -95,6 +113,120 @@
             // 调用通用跳转
             this.toDetail(item);
         },
+        /**
+         * 上拉加载“精品推荐”
+         */
+        loadBoutique() {
+
+            // 判断是“精品推荐”页才加载
+            if (this.activeTabIndex === 1) {
+
+                // 设置“精品推荐”页码
+                this.$set(this.paging.boutique, "page", ++this.paging.boutique.page);
+
+                // 调用接口
+                this.getActivityAdsGoods(this.paging.boutique.page);
+            }
+        },
+        /**
+         * 店铺商品推荐
+         * @param {int} page [页码]
+         */
+        shopRecommendGoods(page) {
+
+            // 判断必要参数
+            if (this.shopId) {
+
+                // 加载中
+                this.$set(this.paging.commodity, "loading", true);
+
+                // 加载中提示
+                Indicator.open('加载中...');
+
+                // 请求接口
+                this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
+                    shop_id: this.shopId,
+                    page: page
+                }, this.shopRecommendGoodsCallback, {
+                    method: "POST"
+                });
+            }
+        },
+
+        /**
+         * 店铺商品推荐回调
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        shopRecommendGoodsCallback(res, ext) {
+
+            // 加载完成
+            Indicator.close();
+
+            // 返回处理
+            if (res.code == 200) {
+
+                // 解构数据
+                let {data: datas} = res;
+
+                /* 设置商品推荐数据 开始 */
+
+                // 判断是否有数据
+                if (datas.list && datas.list.length) {
+
+                    // 追加列表
+                    this.$set(this.commoditys, "list", [...this.commoditys.list, ...datas.list]);
+
+                    // 设置还有需要加载的内容
+                    this.$set(this.paging.commodity, "loading", false);
+
+                    // 如果当前显示“全部商品”，设置swiper高度
+                    if (this.activeTabIndex === 2) {
+
+                        this.$nextTick(() => {
+
+                            setTimeout(() => {
+
+                                // 重新设置swiper高度
+                                this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity.offsetHeight);
+                            }, 500);
+                        });
+                    }
+                } else {
+
+                    // 没有需要加载的内容，停止上拉加载
+                    this.$set(this.paging.commodity, "loading", true);
+                }
+
+                /* 设置商品推荐数据 结束 */
+
+            } else if (res.code == 400) {
+
+                // 获取商品推荐失败
+                Toast(res.message);
+            } else {
+
+                // 获取商品推荐失败
+                Toast("获取商品推荐失败");
+            }
+        },
+
+        /**
+         * 上拉加载“商品推荐”
+         */
+        loadCommodity() {
+
+            // 判断是“精品推荐”页才加载
+            if (this.activeTabIndex === 2 && this.shopId) {
+
+                // 设置“精品推荐”页码
+                this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);
+
+                // 调用接口
+                this.shopRecommendGoods(this.paging.commodity.page);
+            }
+        },
+
     }
   }
 </script>