Fix(搜索):[#1001, #1002]重复的搜索词不能再次成为历史记录；点击热门词同步至历史搜索中

pages/shop/GoodSearch/index.vue

@@ -2,36 +2,41 @@
   <view class="good-search">
     <view class="header">
       <view class="search-box flex jc-between ai-center">
-        <input v-model="search" type="text" placeholder="搜索商品" placeholder-style="color:#999"/>
+        <input
+          v-model.trim="search"
+          type="text"
+          placeholder="搜索商品"
+          placeholder-style="color:#999"
+        />
         <view class="btn flex-0 flex jc-center ai-center" @click="submit">
           <text class="iconfont icon-sousuo2"></text>
           <text>搜索</text>
         </view>
       </view>
     </view>
-
+    <view v-if="historyKey.length" class="page-content">
-    <view class="page-content" v-if="historyKey.length">
       <view class="title">历史搜索</view>
       <view class="list acea-row limit-box">
         <view
-            class="item"
+          v-for="item of historyKey"
-            v-for="item of historyKey"
+          :key="item.id"
-            :key="item.id"
+          class="item"
-            @click="toSearch(item.word)"
+          @click="toSearch(item.word)"
-        >{{ item.word }}
+        >
+          {{ item.word }}
         </view>
       </view>
     </view>
-
     <view class="page-content" v-if="keywords.length">
       <view class="title">热门搜索</view>
       <view class="list acea-row">
         <view
-            class="item"
+          v-for="keywordsKey of keywords"
-            v-for="keywordsKey of keywords"
+          :key="keywordsKey"
-            :key="keywordsKey"
+          class="item"
-            @click="toSearch(keywordsKey)"
+          @click="toSearch(keywordsKey)"
-        >{{ keywordsKey }}
+        >
+          {{ keywordsKey }}
         </view>
       </view>
     </view>
@@ -40,19 +45,18 @@
 </template>
 
 <script>
-import {getSearchKeyword} from "@/api/store";
+import {getSearchKeyword} from '@/api/store'
-import {trim} from "@/utils";
+import {trim} from '@/utils'
-
 export default {
-  name: "GoodSearch",
+  name: 'GoodSearch',
   props: {},
   data: function () {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keywords: [],
-      search: "",
+      search: '',
       historyKey: []
-    };
+    }
   },
   mounted: function () {
     this.getData();
@@ -62,29 +66,32 @@ export default {
   },
   methods: {
     submit() {
-      const search = trim(this.search) || "";
+      const search = trim(this.search) || ''
-      if (!search) return;
+      if (!search) return
-
+      this.setHistory(search)
-      this.historyKey.unshift({id: this.$global.generateMixed(10), word: search});
+      this.search = ''
-      this.setHistory();
+      this.toSearch(search)
-      this.search = "";
-
-      this.toSearch(search);
     },
     toSearch(s) {
-      this.$yrouter.push({path: "/pages/shop/GoodsList/index", query: {s}});
+      this.setHistory(s)
+      this.$yrouter.push({path: '/pages/shop/GoodsList/index', query: {s}})
     },
     getData() {
       getSearchKeyword().then(res => {
-        this.keywords = res.data;
+        this.keywords = res.data
-      });
+      })
     },
     getHistory() {
-      let temp = JSON.parse(uni.getStorageSync("historyKey")) || [];
+      let temp = JSON.parse(uni.getStorageSync('historyKey') || '[]')
-      this.historyKey = temp.slice(0, 30);
+      this.historyKey = temp.slice(0, 30)
     },
-    setHistory() {
+    setHistory(word) {
-      uni.setStorageSync("historyKey", JSON.stringify(this.historyKey));
+      const index = this.historyKey.findIndex(item => item.word === word)
+      if (index > -1) {
+        return
+      }
+      this.historyKey.unshift({id: this.$global.generateMixed(10), word })
+      uni.setStorageSync('historyKey', JSON.stringify(this.historyKey))
     }
   }
 };