品牌搜索

components/brandCenter/BrandIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="brand-center-index">
+  <div class="brand-center-index" @click="showSimilarWord = false">
     <img src="/images/brandCenter/brand-index-title1.png" alt="">
     <div class="brand-index-tab">
       <div class="brand-index-group" v-for="(indexGroup, index) in indexGroups">
@@ -11,12 +11,15 @@
     <div class="brand-center-index-list">
       <div class="brand-list-nav">
         <div class="filter-area">
-          <input type="text" placeholder="请输入您要搜索的品牌" v-model="keyword" @keyup.13="searchBrands()">
+          <input type="text" placeholder="请输入您要搜索的品牌" @input="onKeywordInput()" v-model="keyword" @keyup.13="searchBrands()">
           <img src="/images/brandCenter/search-btn.png" alt="" @click="searchBrands()">
           <span v-if="brandList.totalElements > 0">{{nowPage}}/{{brandList.totalPages}}
             <a href="javascript:void(0)" class="icon-xiangzuo iconfont" @click="changePage('pre')" :class="{'is-border': nowPage==1}"></a>
             <a href="javascript:void(0)" @click="changePage('next')" class="icon-xiangyou iconfont" :class="{'is-border': nowPage>=brandList.totalPages}"></a>
           </span>
+          <ul class="similar-list" v-show="showSimilarWord && keyword && keyword.length">
+            <li class="text-ellipse" v-for="similar in similarList" @click.stop="setSimilar(similar.nameCn)">{{similar.nameCn}}</li>
+          </ul>
         </div>
       </div>
       <div class="brand-list-items">
@@ -56,6 +59,7 @@
 </template>
 <script>
     import Page from '~components/common/page/pageComponent.vue'
+    import PcSearchHeader from '~components/common/PcSearchHeader.vue'
     export default {
       data () {
         return {
@@ -73,7 +77,10 @@
           isSearch: false,
           brands: {},
           showKeyword: '',
-          showSearchModal: false
+          showSearchModal: false,
+          clickCount: 0,
+          showSimilarWord: false,
+          similarList: []
         }
       },
       filters: {
@@ -105,7 +112,8 @@
         }
       },
       components: {
-        Page
+        Page,
+        PcSearchHeader
       },
       mounted () {
         if (this.$route.path !== '/product/brand/brandList/A') {
@@ -131,6 +139,29 @@
         }
       },
       methods: {
+        onKeywordInput: function () {
+          this.clickCount ++
+          let count = this.clickCount
+          let timer = setTimeout(() => {
+            this.getSimilarList(count, timer)
+          }, 300)
+        },
+        getSimilarList: function (clickCount, timer) {
+          clearTimeout(timer)
+          if (this.keyword && this.keyword !== '' && clickCount === this.clickCount) {
+            this.$http.get('/search/similarKeywords', {params: {keyword: this.keyword}}).then(
+              res => {
+                this.similarList = res.data.brand
+                this.showSimilarWord = true
+              }
+            )
+          }
+        },
+        setSimilar: function (key) {
+          this.showSimilarWord = false
+          this.keyword = key
+          this.searchBrands()
+        },
         initParams: function () {
           this.nowPage = 1
           this.isSearch = false
@@ -400,6 +431,27 @@
               }
             }
           }
+          .similar-list {
+            position: absolute;
+            z-index: 1;
+            right: 150px;
+            top: 41px;
+            border: 1px solid #c9c9c9;
+            text-align: left;
+            width: 318px;
+            background: #fff;
+            /*max-height: 150px;*/
+            /*overflow-y: auto;*/
+            li {
+              padding: 0 11px;
+              height: 30px;
+              line-height: 30px;
+              cursor: pointer;
+              &:hover {
+                background: #f7f7f7;
+              }
+            }
+          }
         }
       }
       .brand-list-items {

pages/product/brand/brandList/_initial.vue

@@ -17,7 +17,7 @@
         store.dispatch('loadBrandCarousel'),
         store.dispatch('loadBrandBanner'),
         store.dispatch('product/loadRecommends'),
-        store.dispatch('product/loadBrandsPager', {'key': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
+        store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
       ])
     },
     components: {