完成搜索功能

src/common/api.js

@@ -6,7 +6,9 @@ module.exports = {
     return http.post(`/api/user/login?code=${code}`);
   },
   register(params) {
-    return http.post('/api/user/register', params, { 'content-type': 'application/json' });
+    return http.post('/api/user/register', params, {
+      'content-type': 'application/json'
+    });
   },
   getMainInfo(params) {
     return http.post('/api/user/main', params);
@@ -24,7 +26,9 @@ module.exports = {
     return http.post('/api/user/book', qs.stringify(params));
   },
   signIn(params) {
-    return http.post('/api/user/signin', params, { 'content-type': 'application/json' });
+    return http.post('/api/user/signin', params, {
+      'content-type': 'application/json'
+    });
   },
   getPrizeList(id) {
     const params = !id ? undefined : { prizeId: id };
@@ -46,7 +50,9 @@ module.exports = {
     return http.post('/api/user/update/phone', params);
   },
   getPrize(params) {
-    return http.post('/api/user/prize/receive', params, { 'content-type': 'application/json' });
+    return http.post('/api/user/prize/receive', params, {
+      'content-type': 'application/json'
+    });
   },
   checkInnerCode(params) {
     return http.post('/api/user/inviteCode', params);
@@ -62,5 +68,8 @@ module.exports = {
   },
   getGoodsUrl(params) {
     return http.post('/api/goods/promotionUrl', params);
+  },
+  getHotList() {
+    return http.post('/api/goods/hot');
   }
 };

src/pages/search.wpy

@@ -5,8 +5,41 @@
         <van-field clearable left-icon="search" placeholder="搜索" bind:confirm="search" value="{{value}}" bind:input	="setValue" auto-focus	></van-field>
       </view>
       <view class="search-cancel" bindtap="search">搜索</view>
+      <view v-show="!searching">
+        <view class="search-history">
+          <text class="search-history-text">历史搜索</text>
+          <image wx:if="{{historyList.length}}" bindtap="clearHistory" src="/static/images/remove@2x.png">删除</image>
+        </view>
+        <view class="history-list">
+          <view>
+            <van-tag wx:for="{{historyList}}" wx:key="index" color="#F1F1F1" text-color="#666666" size="medium" 
+              round
+              bindtap="doSearch"
+              data-text="{{item}}">
+              {{item}}
+            </van-tag>
+          </view>
+          <view class="history-list-action" v-show="showWholeHistoryList" >
+            <van-icon name="arrow-down" color="#666" size="20px" bindtap="showAllHistory"/>
+          </view>
+        </view>
+        <view class="hot">
+          <image class="hot-icon" src="/static/images/hot@2x.png"></image>
+          <text class="hot-text">热搜榜</text>
+        </view>  
+        <view class="hot-list">
+          <view class="hot-list-item" wx:for="{{hotList}}" wx:key="index" bindtap="doSearch" data-text="{{item.title}}">
+            <text class="hot-list-item-index {{index <= 2 ? 'hot-list-item-index-top' : ''}}">{{index + 1}}.</text>
+            <text class="hot-list-item-text">{{item.title}}</text>
+            <text wx:if="{{item.saleCount}}" class="hot-list-item-count">{{item.saleCount}}</text>
+            <image wx:if="{{item.type}}" class="hot-list-item-icon" src="/static/images/{{item.type}}@2x.png"></image>
+          </view>
+          
+        </view>
+        </view>
+      </view>
     </view>
-    <view class="search-list" v-show="list.length">
+    <view class="search-list" v-show="searching">
       <view class="search-item" wx:for="{{list}}" wx:key="index" bindtap="toJingdong" data-item="{{item}}">
         <view class="image-left">
           <van-image use-loading-slot src="{{item.images}}" class="img" width="240rpx" height="240rpx" radius="10rpx" fit="cover">
@@ -32,7 +65,7 @@
 </template>
 <script>
   import wepy from '@wepy/core';
-  import { getSearchList, getGoodsUrl } from '../common/api';
+  import { getSearchList, getGoodsUrl, getHotList } from '../common/api';
   let page = 1;
   wepy.page({
     data: {
@@ -40,20 +73,63 @@
       isDone: false,
       isLoading: false,
       showLoading: false,
-      value: ''
+      value: '',
+      historyList: [],
+      showWholeHistoryList: false,
+      historyLimit: 10,
+      hotList: [],
+      searching: false
     },
     methods: {
       setValue(event) {
         this.value = event.$wx.detail || '';
+        this.searching = this.value.length;
+        if (this.value === '') {
+          this.list = [];
+        }
+      },
+      updateSearchHisotry(value) {
+        let list = wx.getStorageSync('search_history');
+        !list && (list = []);
+        list.unshift(value);
+        wx.setStorageSync('search_history', list);
+        this.historyList = list;
+      },
+      loadSearchHistory(limit = true) {
+        let list = wx.getStorageSync('search_history');
+        this.showWholeHistoryList = list.length > this.historyLimit;
+        if (limit) {
+          list = list.slice(0, this.historyLimit);
+        }
+        this.historyList = list || [];
+      },
+      clearHistory() {
+        const that = this;
+        wx.showModal({
+          title: '确认删除全部历史记录?',
+          success(res) {
+            if (res.confirm) {
+              wx.setStorageSync('search_history', '');
+              that.historyList = [];
+            }
+          }
+        });
+      },
+      showAllHistory() {
+        this.loadSearchHistory(false);
+        this.showWholeHistoryList = false;
       },
       search() {
         page = 1;
+        this.searching = true;
         this.list = [];
         this.getList();
       },
       getList() {
         this.isLoading = true;
         this.isDone = false;
+
+        this.updateSearchHisotry(this.value);
         getSearchList({keyword: this.value, page: page}).then(data => {
           this.isLoading = false;
           if (!data.hasMore) {
@@ -82,12 +158,25 @@
         }).catch(() => {
           this.showLoading = false;
         });
+      },
+      async loadHot() {
+        const list = await getHotList();
+        this.hotList = list;
+      },
+      doSearch(e) {
+        const text = e.currentTarget.dataset.text;
+        this.value = text;
+        this.search();
       }
     },
     onReachBottom() {
-      if (this.isDone) return;
+      if (this.isDone || !this.searching) return;
       page++;
       this.getList();
+    },
+    onLoad() {
+      this.loadSearchHistory();
+      this.loadHot();
     }
   });
 </script>
@@ -98,6 +187,8 @@
       "van-field": "../components/vant/field/index",
       "van-image": "../components/vant/image/index",
       "van-loading": "../components/vant/loading/index",
+      "van-icon": "../components/vant/icon/index",
+      "van-tag": "../components/vant/tag/index",
       "go-loading": "~@/components/custom/goloading",
     }
   }
@@ -135,6 +226,103 @@
       text-align: center;
       line-height:60rpx;
     }
+
+    .hot {
+      margin-top: 71rpx;
+      display: flex;
+      align-items: center;
+
+      &-text {
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      &-icon {
+        width: 36rpx;
+        height: 42rpx;
+        margin-right: 10rpx;
+        position: relative;
+        top: -2rpx;
+      }
+    }
+
+    .hot-list {
+      margin-top: 41rpx;
+
+      &-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 51rpx;
+        line-height: 100%;
+
+        &-icon {
+          margin-left: auto;
+          width: 30rpx;
+          height: 30rpx;
+        }
+
+        &-index {
+          font-size: 30rpx;
+          color: #FF9F15;
+          font-style: italic;
+          margin-right: 27rpx;
+
+          &-top {
+            color: #FF5D15;
+            font-weight: bold;
+          }
+        }
+
+        &-text {
+          font-size: 30rpx;
+          margin-right: 15rpx;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        &-count {
+          font-size: 24rpx;
+          color: #999;
+        }
+
+      }
+    }
+
+    .search-history {
+      margin-top: 51rpx;
+      margin-bottom: 39rpx;
+      display: flex;
+      align-items: center;
+
+      &-text {
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      image {
+        margin-left: auto;
+        width: 30rpx;
+        height: 28rpx;
+      }
+    }
+
+    .history-list {
+      display: flex;
+      align-items: flex-end;
+
+      .van-tag {
+        margin-right: 20rpx;
+        font-size: 26rpx;
+        margin-bottom: 22rpx;
+      }
+
+      &-action {
+        margin-left: auto;
+        margin-bottom: 10rpx;
+      }
+    }
   }
   .search-list {
     background-color: @whiteback;