Authored by 李奇

检索页修改

@@ -7,16 +7,57 @@ Page({ @@ -7,16 +7,57 @@ Page({
7 data: { 7 data: {
8 query: '', 8 query: '',
9 order: '', 9 order: '',
  10 + gender: '',
10 searched: false, 11 searched: false,
11 - productList: [] 12 + productList: [],
  13 + isLoading: false,
  14 + currentPage: 0,
  15 + totalPage: 0,
  16 + showLoading: false,
  17 + showNoMore: false
  18 + },
  19 + onReachBottom: function () {
  20 + if (this.data.currentPage < this.data.totalPage) {
  21 + this.setData({
  22 + showLoading: true
  23 + });
  24 + this.productList({
  25 + query: this.data.query,
  26 + order: this.data.order,
  27 + gender: this.data.gender,
  28 + page: this.data.currentPage + 1,
  29 + limit: 20
  30 + });
  31 + } else {
  32 + this.setData({
  33 + showNoMore: true
  34 + });
  35 + }
  36 + },
  37 + bindQueryInput: function(e) {
  38 + this.setData({
  39 + query: e.detail.value
  40 + });
12 }, 41 },
13 confirmQuery: function (e) { 42 confirmQuery: function (e) {
14 - let query = e.detail.value; 43 + let query = e.detail.value.trim();
  44 +
  45 + if (!query) {
  46 + return wx.showToast({
  47 + title: '请输入检索关键词',
  48 + icon: 'none',
  49 + duration: 1000
  50 + });
  51 + }
15 52
16 this.setData({searched: true, query}); 53 this.setData({searched: true, query});
17 - this.search({query}); 54 + this.data.productList = [];
  55 + this.productList({page: 1, limit: 20, query, order: this.data.order, gender: this.data.gender});
18 }, 56 },
19 - search: function (params) { 57 + productList: function (params) {
  58 + if (this.data.isLoading) return;
  59 +
  60 + this.data.isLoading = true;
20 searchModel.productList(params).then(res => { 61 searchModel.productList(params).then(res => {
21 if (res.code === 200) { 62 if (res.code === 200) {
22 const keyAdapter = { 63 const keyAdapter = {
@@ -36,13 +77,33 @@ Page({ @@ -36,13 +77,33 @@ Page({
36 list.push(item); 77 list.push(item);
37 }); 78 });
38 79
  80 + this.data.isLoading = false;
39 this.setData({ 81 this.setData({
40 - productList: list 82 + showLoading: false,
  83 + productList: this.data.productList.concat(list),
  84 + currentPage: params.page,
  85 + totalPage: res.data.page_total
41 }); 86 });
42 } 87 }
  88 + }).catch(() => {
  89 + this.data.isLoading = false;
43 }); 90 });
44 }, 91 },
45 - orderChange: function () { 92 + sortChange: function (e) {
  93 + let params;
  94 + let {curSort, gender} = e.detail;
46 95
  96 + this.data.gender = gender;
  97 + this.data.order = curSort;
  98 +
  99 + params = {
  100 + gender,
  101 + order: curSort,
  102 + page: 1,
  103 + limit: 20,
  104 + query: this.data.query
  105 + };
  106 + this.data.productList = [];
  107 + this.productList(params);
47 } 108 }
48 }); 109 });
1 <view class="search-container"> 1 <view class="search-container">
2 <view class="top-search"> 2 <view class="top-search">
3 <input class="search-input" value="{{query}}" confirm-type="search" placeholder="潮流单品搜一下" 3 <input class="search-input" value="{{query}}" confirm-type="search" placeholder="潮流单品搜一下"
4 - bindconfirm="confirmQuery" 4 + bindconfirm="confirmQuery" bindinput="bindQueryInput"
5 placeholder-class="placeholder" auto-focus/> 5 placeholder-class="placeholder" auto-focus/>
6 </view> 6 </view>
7 <view class="divide-area" hidden="{{!searched}}"></view> 7 <view class="divide-area" hidden="{{!searched}}"></view>
8 <view hidden="{{!searched}}"> 8 <view hidden="{{!searched}}">
9 <view class="fixed-filter"> 9 <view class="fixed-filter">
10 - <product-list-filter bind:sortchange="orderChange"></product-list-filter> 10 + <product-list-filter bind:sortchange="sortChange"></product-list-filter>
11 </view> 11 </view>
12 <view class="no-res" wx:if="{{productList.length == 0}}"> 12 <view class="no-res" wx:if="{{productList.length == 0}}">
13 <image class="no-res-img" src="images/nosearch-ic@3x.png"></image> 13 <image class="no-res-img" src="images/nosearch-ic@3x.png"></image>
14 <view class="no-res-txt">未搜索到任何相关商品</view> 14 <view class="no-res-txt">未搜索到任何相关商品</view>
15 </view> 15 </view>
16 - <view wx:if="{{productList.length > 0}}"  
17 - class="product-list"><product-list list="{{productList}}"></product-list></view>  
18 -  
19 -  
20 - <view class="loadMore" wx:if="{{list.data.length > 0 && list.isLoading && !list.endReached}}">  
21 - <text class="loadText">加载中...</text> 16 + <view wx:if="{{productList.length > 0}}" class="product-list">
  17 + <product-list list="{{productList}}"
  18 + show-loading="{{showLoading}}"
  19 + show-no-more="{{showNoMore}}">
  20 + </product-list>
22 </view> 21 </view>
23 - <view class="loadMore" wx:if="{{list.endReached}}">  
24 - <text class="loadText">没有更多了</text>  
25 - </view>  
26 - <loading wx:if="{{list.currentPage == 0 && list.isLoading}}">加载中</loading>  
27 </view> 22 </view>
28 </view> 23 </view>