检索页修改

@@ -7,16 +7,57 @@ Page({
     data: {
         query: '',
         order: '',
+        gender: '',
         searched: false,
-        productList: []
+        productList: [],
+        isLoading: false,
+        currentPage: 0,
+        totalPage: 0,
+        showLoading: false,
+        showNoMore: false
+    },
+    onReachBottom: function () {
+        if (this.data.currentPage < this.data.totalPage) {
+            this.setData({
+                showLoading: true
+            });
+            this.productList({
+                query: this.data.query,
+                order: this.data.order,
+                gender: this.data.gender,
+                page: this.data.currentPage + 1, 
+                limit: 20
+            });
+        } else {
+            this.setData({
+                showNoMore: true
+            });
+        }
+    },
+    bindQueryInput: function(e) {
+        this.setData({
+            query: e.detail.value
+        });
     },
     confirmQuery: function (e) {
-        let query = e.detail.value;
+        let query = e.detail.value.trim();
+        
+        if (!query) {
+            return wx.showToast({
+                title: '请输入检索关键词',
+                icon: 'none',
+                duration: 1000
+            });
+        }
 
         this.setData({searched: true, query});
-        this.search({query});
+        this.data.productList = [];
+        this.productList({page: 1, limit: 20, query, order: this.data.order, gender: this.data.gender});
     },
-    search: function (params) {
+    productList: function (params) {
+        if (this.data.isLoading) return;
+
+        this.data.isLoading = true;
         searchModel.productList(params).then(res => {
             if (res.code === 200) {
                 const keyAdapter = {
@@ -36,13 +77,33 @@ Page({
                     list.push(item);
                 });
 
+                this.data.isLoading = false;
                 this.setData({
-                    productList: list
+                    showLoading: false,
+                    productList: this.data.productList.concat(list),
+                    currentPage: params.page,
+                    totalPage: res.data.page_total
                 });
-            }            
+            }
+        }).catch(() => {
+            this.data.isLoading = false;
         });
     },
-    orderChange: function () {
+    sortChange: function (e) {
+        let params;
+        let {curSort, gender} = e.detail;
         
+        this.data.gender = gender;
+        this.data.order = curSort;
+
+        params = {
+            gender,
+            order: curSort,
+            page: 1,
+            limit: 20,
+            query: this.data.query
+        };
+        this.data.productList = [];
+        this.productList(params);
     }
 });
\ No newline at end of file

 <view class="search-container">
     <view class="top-search">
         <input class="search-input" value="{{query}}" confirm-type="search" placeholder="潮流单品搜一下" 
-               bindconfirm="confirmQuery"
+               bindconfirm="confirmQuery" bindinput="bindQueryInput"
             placeholder-class="placeholder" auto-focus/>
     </view>
     <view class="divide-area" hidden="{{!searched}}"></view>
     <view hidden="{{!searched}}">
         <view class="fixed-filter">
-            <product-list-filter bind:sortchange="orderChange"></product-list-filter>
+            <product-list-filter bind:sortchange="sortChange"></product-list-filter>
         </view>
         <view class="no-res" wx:if="{{productList.length == 0}}">
             <image class="no-res-img" src="images/nosearch-ic@3x.png"></image>
             <view class="no-res-txt">未搜索到任何相关商品</view>
         </view>
-        <view wx:if="{{productList.length > 0}}" 
-              class="product-list"><product-list list="{{productList}}"></product-list></view>
-        
-        
-        <view class="loadMore" wx:if="{{list.data.length > 0 && list.isLoading && !list.endReached}}">
-            <text class="loadText">加载中...</text>
+        <view wx:if="{{productList.length > 0}}" class="product-list">
+            <product-list list="{{productList}}" 
+                  show-loading="{{showLoading}}" 
+                  show-no-more="{{showNoMore}}">
+            </product-list>
         </view>
-        <view class="loadMore" wx:if="{{list.endReached}}">
-            <text class="loadText">没有更多了</text>
-        </view>
-        <loading wx:if="{{list.currentPage == 0 && list.isLoading}}">加载中</loading>
     </view>
-</view>
\ No newline at end of file
+</view>