更新搜索页面 SearchIndex.vue

src/utils/random-util.js

@@ -1,7 +0,0 @@
-class RandomUtil {
-}
-
-// 静态方法，获得随机数
-RandomUtil.getRandomNumber = (min, max) => parseInt(Math.random() * (max - min)) + min
-
-module.exports = RandomUtil

src/utils/store.js

@@ -1,14 +0,0 @@
-const LOCAL_STORAGE_KEY = 'searchHistory'
-
-class Store { }
-
-Store.saveHistory = (arr) => {
-  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(arr))
-}
-
-Store.loadHistory = () => JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
-
-Store.removeAllHistory = () => { localStorage.removeItem(LOCAL_STORAGE_KEY) }
-
-module.exports = Store
-

src/views/search/SearchIndex.vue

@@ -5,12 +5,12 @@
       <el-row style="padding: 5px">
         <el-input
           v-model="keyword"
-          :fetch-suggestions="querySearchAsync"
           :placeholder="searchHint"
           class="input-with-select"
           clearable
           @focus="focus"
           @blur="blur"
+          @input="inputEvent"
           @keyup.enter.native="handleOnSearch"
         >
           <el-select
@@ -30,36 +30,41 @@
           id="search-box"
           class="box-card"
           style="position:relative;z-index:15"
-          @mouseenter="enterSearchBoxHanlder"
         >
           <dl v-if="isHistorySearch">
-            <dt v-show="history" class="search-title">历史搜索</dt>
-            <dt v-show="history" class="remove-history" @click="removeAllHistory">
-              <i class="el-icon-delete" />清空历史记录
-            </dt>
-            <el-tag
-              v-for="search in historySearchList"
-              :key="search.id"
-              closable
-              :type="search.type"
-              style="margin-right:5px; margin-bottom:5px;"
-              @close="closeHandler(search)"
-            >{{ search.name }}</el-tag>
-            <dt class="search-title">热门搜索</dt>
-            <dd v-for="search in hotSearchList" :key="search.rank">{{ search.keyword }}</dd>
+            <div class="search-title">热门搜索</div>
+            <el-col v-if="hotSearchList.length === 0" :md="6" style="padding: 5px;">
+              暂无热门搜索
+            </el-col>
+            <el-col v-for="hotSearch in hotSearchList" :key="hotSearch.keyword" :md="6" style="padding: 5px;">
+              <el-button style="padding: 5px;" type="text" @click="onClickHot(hotSearch.keyword)">
+                {{ hotSearch.keyword }}
+              </el-button>
+            </el-col>
           </dl>
           <dl v-if="isSearchList">
-            <dd v-for="search in searchList" :key="search.rank">{{ search.keyword }}</dd>
+            <div class="search-title">搜索建议</div>
+            <el-col v-if="searchList.length === 0" :md="6" style="padding: 5px;">
+              暂无搜索建议
+            </el-col>
+            <el-col v-else v-for="searchSuggest in searchList" :key="searchSuggest.value" :md="6" style="padding: 5px;">
+              <el-button style="padding: 5px;" type="text" @click="onClickHot(searchSuggest.value)">
+                {{ searchSuggest.value }}
+              </el-button>
+            </el-col>
           </dl>
         </el-card>
       </el-row>
+      <!--  返回的搜索数据    -->
       <el-row style="padding: 5px">
         <el-col v-loading="loading" :md="18">
+          <!--  视频数据    -->
           <el-row v-if="videoSearch" class="movie-list">
             <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
               <search-video-card :video="video" />
             </el-col>
           </el-row>
+          <!--  裁判文书数据    -->
           <el-row v-if="wenshuSearch" class="movie-list">
             <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
               <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
@@ -101,6 +106,7 @@
               </el-row>
             </el-col>
           </el-row>
+          <!--  数据分页    -->
           <el-row>
             <el-col :span="18" class="pagination">
               <el-pagination
@@ -238,43 +244,30 @@
 <script>
 import NavBarNoSearch from 'components/layout/NavBarNoSearch'
 import SearchVideoCard from '@/components/card/SearchVideoCard'
-import HotSearch from '@/components/card/HotSearch'
-import RandomUtil from '@/utils/random-util'
-import Store from '@/utils/store'
-import { videoQuery, hotKeyword, getWenshuDetail, wenshuQuery, keywordSuggest } from '@/api/search'
+import { videoQuery, getWenshuDetail, wenshuQuery, keywordSuggest, hotKeyword } from '@/api/search'
 
 export default {
   name: 'SearchIndex',
   components: {
     NavBarNoSearch,
-    SearchVideoCard,
-    HotSearch
+    SearchVideoCard
   },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      pageSize: 10,
+      pageSize: 12,
       totalSize: 0,
-      dataList: [],
-      restaurants: [],
+      dataList: [], // 搜索结果
+      hotSearchList: ['暂无热门搜索'], // 热门搜索
+      searchList: [], // 搜索建议
       searchHint: '想要搜点神马呢',
       showEmpty: false,
-      cardProp: {
-        title: '热搜排行',
-        type: 'hotSearch',
-        dataList: []
-      },
       loading: false,
       keyword: '', // 当前输入框的值
       searchType: '1',
       isFocus: false, // 是否聚焦
-      hotSearchList: ['暂无热门搜索'], // 热门搜索数据
-      historySearchList: [], // 历史搜索数据
-      searchList: ['暂无数据'], // 搜索返回数据,
-      history: false,
-      types: ['', 'success', 'info', 'warning', 'danger'], // 搜索历史tag式样
       wenshuDetailDialog: false,
       wenshuDetail: null,
       videoSearch: false,
@@ -283,31 +276,35 @@ export default {
   },
   computed: {
     isHistorySearch() {
-      return this.isFocus && !this.keyword
+      return this.isFocus && this.keyword === ''
     },
     isSearchList() {
-      return this.isFocus && this.keyword
+      return this.isFocus && this.keyword !== ''
     },
     isSearch() {
       return this.isFocus
     }
   },
   mounted() {
-    /* hotKeyword().then(resp => {
+    hotKeyword().then(resp => {
       if (resp.code === 0) {
-        this.cardProp.title = '热搜排行'
-        this.cardProp.type = 'hotSearch'
-        this.cardProp.dataList = resp.data
         this.hotSearchList = resp.data
       }
-    })*/
+    })
   },
   created() {
-    this.keyword = this.$route.query.keyword
-    this.searchType = this.$route.query.searchType
-    this.currentPage = parseInt(this.$route.query.pn)
-    this.searchHandler()
-    document.title = '搜索 - ' + this.keyword
+    const keyword = this.$route.query.keyword
+    const searchType = this.$route.query.searchType
+    const currentPage = parseInt(this.$route.query.pn)
+    if (keyword !== undefined && searchType !== undefined && currentPage !== undefined) {
+      this.keyword = keyword
+      this.searchType = searchType
+      this.currentPage = currentPage
+      this.searchHandler()
+      document.title = '搜索 - ' + this.keyword
+    } else {
+      document.title = '搜索'
+    }
   },
   methods: {
     handleCurrentChange(currentPage) {
@@ -332,46 +329,32 @@ export default {
       })
       this.$router.go(0)
     },
-    querySearchAsync(queryString, cb) {
+    focus() {
+      this.isFocus = true
+    },
+    blur() {
+      this.isFocus = false
+    },
+    inputEvent() {
+      const queryString = this.keyword
       if (queryString === '') {
         return
       }
 
       setTimeout(() => {
-        keywordSuggest(queryString).then(res => {
-          if (res.code === 0) {
-            this.restaurants = res.data.map((item) => {
+        keywordSuggest(queryString).then(resp => {
+          if (resp.code === 0) {
+            this.searchList = []
+            this.searchList = resp.data.map((item) => {
               return {
                 value: item.keyword,
                 rank: 1
               }
             })
-
-            // 如果 cb 返回一个空数组, 那么模糊搜索输入建议的下拉选项会因为 length 为 0 而消失
-            // cb([])
-            cb(this.restaurants)
-            // eslint-disable-next-line no-empty
-          } else {
           }
         })
       }, 500)
     },
-    focus() {
-      // this.$message.info('input focus')
-      this.isFocus = true
-      this.historySearchList = Store.loadHistory() == null ? [] : Store.loadHistory()
-      this.history = this.historySearchList.length !== 0
-    },
-    blur() {
-      // this.$message.info('input blur')
-      var self = this
-      this.searchBoxTimeout = setTimeout(function() {
-        self.isFocus = false
-      }, 300)
-    },
-    enterSearchBoxHanlder() {
-      clearTimeout(this.searchBoxTimeout)
-    },
     searchHandler() {
       if (this.searchType === '3') {
         this.videoSearch = false
@@ -383,35 +366,12 @@ export default {
             this.dataList = respData.list
           }
         })
-
-        // 随机生成搜索历史tag式样
-        const n = RandomUtil.getRandomNumber(0, 5)
-        const exist =
-          this.historySearchList.filter(value => {
-            return value.name === this.keyword
-          }).length !== 0
-        if (!exist) {
-          this.historySearchList.push({ name: this.keyword, type: this.types[n] })
-          Store.saveHistory(this.historySearchList)
-        }
-        this.history = this.historySearchList.length !== 0
       } else {
         this.videoSearch = true
         this.wenshuSearch = false
         this.videoQueryWrapper(this.keyword, this.currentPage)
       }
     },
-    closeHandler(keyword) {
-      this.historySearchList.splice(this.historySearchList.indexOf(keyword), 1)
-      Store.saveHistory(this.historySearchList)
-      clearTimeout(this.searchBoxTimeout)
-      if (this.historySearchList.length === 0) {
-        this.history = false
-      }
-    },
-    removeAllHistory() {
-      Store.removeAllHistory()
-    },
     onGetWenshuDetail(val) {
       getWenshuDetail(val, this.keyword).then(resp => {
         if (resp.code === 0) {
@@ -425,9 +385,9 @@ export default {
       this.loading = true
       videoQuery(keyword, pageNumber).then(resp => {
         if (resp.code === 0) {
-          this.total = resp.data.totalSize
-          this.length = resp.data.totalPages
-          this.dataList = resp.data.list
+          const respData = resp.data
+          this.totalSize = respData.totalSize
+          this.dataList = respData.list
 
           if (this.total === 0) {
             this.showEmpty = true
@@ -448,6 +408,10 @@ export default {
       }).finally(() => {
         this.loading = false
       })
+    },
+    onClickHot(val) {
+      this.keyword = val
+      this.handleOnSearch()
     }
   }
 }