封装搜索历史记录

src/assets/css/sprite.less

@@ -35,8 +35,8 @@
 .icon-shtyxydm { width: 54px; height: 54px; background-position: -2180px -1598px; }
 .icon-tel { width: 36px; height: 36px; background-position: -1288px -670px; }
 .icon-time-update { width: 45px; height: 45px; background-position: -2458px -1598px; }
+.icon-trash { width: 50px; height: 50px; background-position: -2324px -1598px; }
 .icon-user-question { width: 32px; height: 36px; background-position: -1456px -670px; }
 .icon-user { width: 36px; height: 36px; background-position: -1344px -670px; }
 .icon-verification { width: 36px; height: 36px; background-position: -1400px -670px; }
-.icon-wechat { width: 80px; height: 78px; background-position: -2080px -1598px; }
-.icon-trash { width: 50px; height: 50px; background-position: -2324px -1598px; }
\ No newline at end of file
+.icon-wechat { width: 80px; height: 78px; background-position: -2080px -1598px; }
\ No newline at end of file

src/components/SearchHistory.vue

+<template>
+  <div class="history">
+    <div class="history_title" v-if="list.length">
+      <span>搜索历史</span>
+      <img :src="require('@/assets/icon/trash.png')" @click="handleClear">
+    </div>
+    <div class="historyList" v-if="list.length">
+      <ul>
+        <li v-for="(item,index) in list" :key="index" @jump="jumItem(item)">{{item}}</li>
+      </ul>
+    </div>
+    <div class="noData" v-else>
+      暂无历史记录
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SearchHistory',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    jumItem(val) {
+      this.$emit('jumpPage', val)
+    },
+    handleClear() {
+      this.$emit('clear')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.history {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 15px;
+  background-color: #fafafa;
+  height: 100vh;
+  .history_title {
+    display: flex;
+    justify-content: space-between;
+    span {
+      color: #666;
+      font-size: 11px;
+    }
+    img {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}
+.historyList {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      display: flex;
+      justify-content: center;
+      padding: 7px 15px;
+      background-color: #fff;
+      border-radius: 15px;
+      margin-right: 10px;
+      margin-top: 10px;
+      min-width: 80px;
+      font-size: 12px;
+      color: #161818;
+      word-break: break-all;
+    }
+  }
+}
+.noData {
+  text-align: center;
+  color: #666;
+}
+</style>
\ No newline at end of file

src/views/regIssue/search.vue

@@ -6,20 +6,19 @@
       </template>
     </NafmHeader>
     <div class="resIssue_search_content">
-      <div class="history_title" v-if="list.length">
-        <span>搜索历史</span>
-        <img :src="require('@/assets/icon/trash.png')">
-      </div>
+      <SearchHistory :list="list" @jumpPage="jumpDetail" @clear="handleClear" />
     </div>
   </div>
 </template>
 <script>
 import SearchInput from '@/components/SearchInput.vue'
+import SearchHistory from '@/components/SearchHistory'
 import { setLocalStorage, getLocalStorage, removeLocalStorage } from '@/utils/LocalStorage'
 export default {
   name: 'ResIssueSearch',
   components: {
-    SearchInput
+    SearchInput,
+    SearchHistory
   },
   data() {
     return {
@@ -32,42 +31,23 @@ export default {
   },
   methods: {
     handleSearch(val) {
-      const list = getLocalStorage('resIssucessData') || []
-      const length = list.legnth
-      const newList = []
-
-      if (list.indexOf(val) === -1) {
-        list.unshift(val)
-        if (length >= 10) {
-          list.pop()
+      if (this.list.indexOf(val) === -1) {
+        this.list.unshift(val)
+        if (this.list.length > 10) {
+          this.list.pop()
         }
-        newList.push(val)
-        setLocalStorage('resIssucessData', newList)
-
-        this.list = newList
+        setLocalStorage('resIssucessData', this.list)
       }
+    },
+    jumpDetail(val) {
 
+    },
+    handleClear() {
+      this.list = []
+      removeLocalStorage('resIssucessData')
     }
   }
-  // console.log(val);
 }
 </script>
 <style lang="less" scoped>
-.resIssue_search_content {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 15px;
-  .history_title {
-    display: flex;
-    justify-content: space-between;
-    span {
-      color: #666;
-      font-size: 11px;
-    }
-    img {
-      width: 25px;
-      height: 25px;
-    }
-  }
-}
 </style>
\ No newline at end of file