修改热门搜索功能的静态数据改为后台动态数据，对其样式做调整

components/main/Search.vue

@@ -37,8 +37,11 @@
     <div class="search-hot">
       <ul class="list-untyled">
         <li class="item item-first">热门搜索</li>
-        <li class="item" v-for="w in hotwords">
-          <nuxt-link :to="w.url" target="_blank">{{ w.name }}</nuxt-link>
+        <li class="item" v-for="w in hotBrand">
+          <nuxt-link :to="'/product/brand/' + w.uuid" target="_blank">{{ w.nameCn }}</nuxt-link>
+        </li>
+        <li class="item" v-for="w in hotDevice">
+          <nuxt-link :to="'/product/brand/' + w.uuid" target="_blank">{{ w.code }}</nuxt-link>
         </li>
       </ul>
     </div>
@@ -59,7 +62,20 @@
         searchType: 'product'
       }
     },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('newsData/loadAllNews', { page: this.nowPage, pageSize: this.pageSize }),
+        store.dispatch('newsData/loadHotNews')
+      ])
+    },
     computed: {
+      hotDevice () {
+        console.log(this.$store.state.hotSearchDevice.hot.data)
+        return this.$store.state.hotSearchDevice.hot.data
+      },
+      hotBrand () {
+        return this.$store.state.hotSearchBrand.hot.data
+      },
       similarKeywords () {
         return this.$store.state.search.keywords
       },
@@ -70,26 +86,6 @@
           (this.similarKeywords.data.brand || this.similarKeywords.data.component || this.similarKeywords.data.kind)
       }
     },
-    props: {
-      hotwords: {
-        type: Array,
-        default () {
-          return [{
-            name: 'SCT2080KEC',
-            url: '/product/component/1100400300009990'
-          }, {
-            name: '电池组',
-            url: '/product/kind/346'
-          }, {
-            name: 'Vishay',
-            url: '/product/brand/30327265e42a871be050007f01003d96'
-          }, {
-            name: 'Panasonic',
-            url: '/product/brand/30327265e47d871be050007f01003d96'
-          }]
-        }
-      }
-    },
     watch: {
       'keyword': {
         handler (val, oldVal) {
@@ -174,10 +170,12 @@
     },
     created () {
       this.$store.dispatch('resetSearchKeywords')
+      this.$store.dispatch('loadHotSearchDevice')
+      this.$store.dispatch('loadHotSearchBrand')
     }
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped type="text/scss">
   @import '~assets/scss/variables';
   .form-control{
     border-radius: 0;
@@ -207,16 +205,27 @@
       width: 79px;
       border-radius: 0;
     }
+    .search-hot ul{
+      line-height: 12px;
+    }
     .search-hot ul li a{
       color: #838383;
     }
     .search-hot {
+      margin-top:5px;
       .item {
         display: inline-block;
+        width:22%;
         font-size: $font-size-small;
-        margin-right: $pad;
-
+        padding-right: $pad;
+        a{
+          display:block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
         &.item-first {
+          width:12%;
           color: $red;
         }
       }

store/hotSearchBrand.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  hot: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_HOT (state) {
+    state.hot.fetching = true
+  },
+  GET_HOT_FAILURE (state) {
+    state.hot.fetching = false
+  },
+  GET_HOT_SUCCESS (state, result) {
+    state.hot.fetching = false
+    state.hot.data = result
+  }
+}

store/hotSearchDevice.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  hot: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_HOT (state) {
+    state.hot.fetching = true
+  },
+  GET_HOT_FAILURE (state) {
+    state.hot.fetching = false
+  },
+  GET_HOT_SUCCESS (state, result) {
+    state.hot.fetching = false
+    state.hot.data = result
+  }
+}

store/index.js

@@ -29,7 +29,6 @@ export const actions = {
     // 检查设备类型
     const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
     const isMobile = /(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
-
     const cookie = isServer ? req.headers['cookie'] : null
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)
     store.commit('option/SET_USER_AGENT', userAgent)
@@ -347,5 +346,26 @@ export const actions = {
       }, err => {
         commit('help/GET_DETAIL_FAILURE', err)
       })
+  },
+
+  // 获取最多搜索量的 器件
+  loadHotSearchDevice ({commit}) {
+    commit('hotSearchDevice/REQUEST_HOT')
+    return axios.get('/api/product/component/mostSearchComponent')
+      .then(response => {
+        commit('hotSearchDevice/GET_HOT_SUCCESS', response.data)
+      }, err => {
+        commit('hotSearchDevice/GET_HOT_FAILURE', err)
+      })
+  },
+  // 获取最多搜索量的 品牌
+  loadHotSearchBrand ({commit}) {
+    commit('hotSearchBrand/REQUEST_HOT')
+    return axios.get('/api/product/brand/mostSearchBrands')
+      .then(response => {
+        commit('hotSearchBrand/GET_HOT_SUCCESS', response.data)
+      }, err => {
+        commit('hotSearchBrand/GET_HOT_FAILURE', err)
+      })
   }
 }