店铺装修修改

@@ -3,7 +3,6 @@ import Promise from '../../vendors/es6-promise';
 import commonModel from '../../models/common';
 import indexModel from '../../models/index/index';
 
-// 获取应用实例
 const app = getApp();
 const router = global.router;
 
@@ -12,7 +11,22 @@ Page({
     shopInfo: {},
     shopBanner: '',
     shopProductList: [],
-    decorFloors: []
+    decorFloors: [],
+    floatFilter: false,
+    pageScrollTop: 0,
+    standInClientTop: 0,
+    disableDecide: false,
+    searchBarHeight: 0,
+    filterHeight: 0,
+    filterTrigger: false,
+
+    gender: '',
+    order: '',
+    page: 1,
+    limit: 4,
+    totalPage: 1,
+    allLoaded: false,
+    showLoading: false
   },
   onLoad: function() {
 
@@ -38,18 +52,63 @@ Page({
         }
       }).catch(() => {});
     }
+
+    // 记录
+    this.recordHeight();
+  },
+
+  onPageScroll: function({scrollTop}) {
+    this._decideFloatFilter(scrollTop);
+  },
+
+  onReachBottom: function() {
+    this._productList();
   },
 
   getShopData: function(shopId) {
     this._shopInfo(shopId);
     this._shopDecor(shopId);
-    this._shopFavCount(shopId);
   },
 
   getShopProducts: function() {
     this._productList();
   },
 
+  toSearch() {
+    router.go('productSearch');
+  },
+
+  recordHeight: function() {
+    const query = wx.createSelectorQuery();
+
+    query.select('.search-bar').boundingClientRect(rect => {
+      this.data.searchBarHeight = rect.bottom - rect.top;
+    }).exec();
+
+    query.select('.header-filter').boundingClientRect(rect => {
+      this.data.filterHeight = rect.bottom - rect.top;
+    }).exec();
+  },
+
+  // 筛选变更
+  filterChange: function(e) {
+    let {curSort, gender} = e.detail;
+
+    this.data.order = curSort;
+    this.data.gender = gender;
+
+    this._resetPage();
+    this.data.shopProductList = [];
+    this.data.filterTrigger = true;
+    this._productList();
+  },
+
+  _resetPage: function() {
+    this.data.page = 1;
+    this.data.totalPage = 1;
+    this.data.allLoaded = false;
+  },
+
   // 店铺信息
   _shopInfo: function(shopId) {
     const params = {
@@ -82,7 +141,6 @@ Page({
 
     indexModel.shopDecorator(params)
       .then(res => {
-
         if (res.code === 200) {
           let floors = [];
           let modules = res.data.modules;
@@ -113,40 +171,20 @@ Page({
       .catch(() => {});
   },
 
-  // 店铺收藏
-  _shopFavCount: function(shopId) {
-    indexModel.shopFavCount({favIds: shopId}).then(res => {
-      const favCount = res.data[0].approximateCount || '2.1w';
+  // 商品列表
+  _productList: function(params = {}) {
+    if (this.data.allLoaded) {
+      return;
+    }
 
-      this.setData({
-        favCount
-      });
+    this.setData({
+      showLoading: true
     });
-  },
-
-  // 筛选变更
-  filterChange: function(e) {
-    let params;
-    let {curSort, gender} = e.detail;
-
-    this.data.order = curSort;
-    this.data.gender = gender;
 
-    params = {
-      gender,
-      order: curSort,
-      page: 1,
-      limit: 20
-    };
-    this.data.productList = [];
-
-    params.setScrollPos = true;
-    this._productList(params);
-  },
-
-  // 商品列表
-  _productList: function(params) {
-    params = params || {page: 1, pageNo: 20};
+    params.page = this.data.page;
+    params.limit = this.data.limit;
+    params.gender = this.data.gender;
+    params.order = this.data.order;
     params.shop_id = app.getShopId();
 
     indexModel.shopProductList(params).then(res => {
@@ -169,16 +207,57 @@ Page({
           list.push(item);
         });
 
+        this.data.page += 1;
+        this.data.totalPage = res.data && res.data.page_total || 1;
+
         this.setData({
-          currentPage: params.page,
-          productList: this.data.shopProductList.concat(list),
-          totalPage: res.data && res.data.page_total || 0
+          showLoading: false,
+          allLoaded: this.data.page > this.data.totalPage,
+          shopProductList: this.data.shopProductList.concat(list)
         });
+
+        if (this.data.floatFilter && this.data.filterTrigger) {
+          let calcTop;
+
+          calcTop = this.data.pageScrollTop + this.data.standInClientTop - this.data.searchBarHeight;
+          this.data.disableDecide = true;
+          wx.pageScrollTo({
+            scrollTop: calcTop,
+            duration: 10
+          });
+          setTimeout(() => {
+            this.data.disableDecide = false;
+            this.data.filterTrigger = false;
+          }, 200);
+        }
       }
     }).catch(() => {});
   },
 
-  toSearch() {
-    router.go('productSearch');
+  _decideFloatFilter: function(scrollTop) {
+    const query = wx.createSelectorQuery();
+    const serHeight = this.data.searchBarHeight;
+
+    if (this.data.disableDecide) {
+      return;
+    }
+
+    this.data.pageScrollTop = scrollTop;
+    query.select('.header-filter').boundingClientRect(rect => {
+      if (rect.top < serHeight && !this.data.floatFilter) {
+        this.setData({
+          floatFilter: true
+        });
+      }
+    }).exec();
+
+    query.select('.filter-stand-in').boundingClientRect(rect => {
+      this.data.standInClientTop = rect.top;
+      if (rect.top > serHeight && this.data.floatFilter) {
+        this.setData({
+          floatFilter: false
+        });
+      }
+    }).exec();
   }
 });

@@ -19,16 +19,17 @@
         bindclickreport="resourceClickReport">
     </resources>
     <view class="product-list">
-        <view class="header-filter">
-            <view class="filter {{floatFilter ? 'float' : ''}}">
+        <view class="header-filter {{floatFilter ? 'float' : ''}}">
+            <view class="filter">
                 <product-list-filter bind:sortchange="filterChange"></product-list-filter>
             </view>
         </view>
+        <view class="filter-stand-in" hidden="{{!floatFilter}}"></view>
         <view class="list">
             <product-list
                 bindproductclick="productClick"
-                list="{{productList}}"
-                show-no-more="{{showNoMore}}"
+                list="{{shopProductList}}"
+                show-no-more="{{allLoaded}}"
                 show-loading="{{showLoading}}">
             </product-list>
         </view>

@@ -101,3 +101,15 @@
 .header-filter {
   border-bottom: 1px solid #eee;
 }
+
+.header-filter.float {
+  position: fixed;
+  top: 95rpx;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.filter-stand-in {
+  height: 88rpx;
+}