搜索页增加历史搜索记录

后端研发-倪永富
1 parent 76134058
Showing 3 changed files with 90 additions and 2 deletions
pages/goods/search/search.js
pages/goods/search/search.wxml
pages/goods/search/search.wxss
@@ -22,7 +22,12 @@ Page({
         tabname: "sort",   //排序的字段
         adname: "asc",    //升降的字段
         rq_data:null,
+				
+				
+				searchRecord: [],
+				keyword: '',
     },
+		
     onLoad: function(t) {
         this.data.rq_data=t;
  
@@ -104,6 +109,9 @@ Page({
        if (0 != t.max_price && t.max_price!=undefined) { url += "&min_pirce=" + t.min_pirce + "&max_price=" + t.max_price;}
        if (url != this.data.baseUrl) return this.requestSearch(url);
        this.openSearchModal();
+			 
+			 // 获取历史搜索记录
+			 this.getHistorySearch();
     },
     changeTab: function(t) {
       var ord = t.currentTarget.dataset.href;
@@ -176,18 +184,23 @@ Page({
         });
     },
     submitSearch: function(t) {
+			console.log(111);
         this.search(t.detail.value.word);
+				
+				
     },
  
     //热搜关键字
     searchHotWord: function(t) {
-        this.search(t.currentTarget.dataset.word);
+			this.historyRecord();
+      this.search(t.currentTarget.dataset.word);
     },
  
     //-----点击搜索按钮----
     search: function(t) {
         if ("string" != typeof t || "" == t) return a.showWarning("请输入搜索关键词");
         this.data.key_str=t;
+				this.historyRecord();
         this.resetData(), this.requestSearch(this.data.baseUrl + "&key_str=" + encodeURIComponent(t));
     },
  
@@ -253,4 +266,56 @@ Page({
 			  func(ob);	
 	   })
 	 },
+	 
+	 
+	 getInput(e) {
+	 	this.setData({
+	 		keyword: e.detail.value
+	 	});
+	 },
+	 
+	 historyRecord() {
+		let self = this;
+	 	let keyword = this.data.key_str;
+	 	let searchRecord = this.data.searchRecord;
+	 	
+	 	if(keyword) {
+	 		if(searchRecord.indexOf(keyword) > -1) {
+	 			// 已经存在该值
+	 			return;
+	 		} else {
+	 			if(searchRecord.length >= 10) {
+	 				searchRecord.pop(); // 删除最早的一条记录	
+	 			};
+	 			searchRecord.unshift(keyword);
+	 			
+	 			// 		 // 将历史记录添加到缓存中
+	 			 wx.setStorage({
+	 				 key: 'searchRecord',
+	 				 data: searchRecord,
+	 				 success: function(res) {
+	 					 self.setData({
+	 						 searchRecord,
+	 					 })
+	 				 }
+	 			 })
+	 		};
+	 	};
+	 },
+	 
+	 
+	 
+	 
+	 getHistorySearch() {
+	   this.setData({
+	     searchRecord: wx.getStorageSync('searchRecord') || [] //若无存储则为空
+	   });
+	 },
+	 
+	 clearSearchRecord() {
+		 wx.clearStorageSync('searchRecord');
+		 this.setData({
+			 searchRecord: []
+		 });
+	 },
 });
 \ No newline at end of file
@@ -162,7 +162,7 @@
   <view class="search-modal">
     <view class="search-bar">
       <form bindsubmit="submitSearch">
-        <input autoFocus class="search-input" name="word" placeholder="搜索商品"></input>
+        <input autoFocus class="search-input" name="word" placeholder="搜索商品" bindinput="getInput"></input>
         <button class="search-btn" formType="submit">
           <image class="wh100 search-img" src="{{url}}/miniapp/images/sea.png"></image>
         </button>
@@ -176,5 +176,17 @@
         </view>
       </block>
     </view>
+		<view class="search-hot">
+		  <view class="hot-title flex jc_sb ai_c">
+				<text>历史搜索</text>
+				<text class="iconfont icon-shanchu xc-ash" bindtap="clearSearchRecord" wx:if="{{searchRecord.length != 0}}"></text>
+			</view>
+		  <block wx:if="{{searchRecord.length>0}}">
+		    <view class="hot-row flex flex-wrap" wx:key="{{index}}">
+		      <view class="hot-item history ellipsis-1" bindtap="searchHotWord" data-word="{{item}}" wx:for="{{searchRecord}}" wx:key="{{index}}">{{item}}</view>
+		    </view>
+		  </block>
+			<view wx:else class="fs24">暂无历史搜索记录</view>
+		</view>
   </view>
 </view>
 \ No newline at end of file
@@ -298,3 +298,14 @@
   /* line-height: 38rpx; */
 	flex-grow: 1;
 }
+
+.history {
+	background-color: #f0f0f0;
+	color: #7b7b7b;
+	border: none;
+	margin-bottom: 8rpx;
+}
+
+.history:first-of-type {
+	margin-left: 0;
+}