搜索联想词修改

components/main/Search.vue

@@ -18,9 +18,20 @@
     </div>
     <ul class="association" v-show="showAssociate && searchType == 'product'"
         @mouseenter="associate.focus=true" @mouseleave="associate.focus=false">
-      <li v-for="(k, index) in similarKeywords.data" :key="k" class="item"
+      <li v-if="similarKeywords.data.component && similarKeywords.data.component.length > 0" class="similar-title">型号：</li>
+      <li v-for="(k, index) in similarKeywords.data.component" :key="k.code" class="item"
           :class="{'active': index==associate.activeIndex}"
-          @click.stop.prevent="onAssociateClick(k)">{{ k }}
+          @click.stop.prevent="onAssociateClick(k.code)">{{ k.code }}
+      </li>
+      <li v-if="similarKeywords.data.brand && similarKeywords.data.brand.length > 0" class="similar-title">品牌：</li>
+      <li v-for="(k, index) in similarKeywords.data.brand" :key="k.nameCn" class="item"
+          :class="{'active': index==associate.activeIndex}"
+          @click.stop.prevent="onAssociateClick(k.nameCn)">{{ k.nameCn }}
+      </li>
+      <li v-if="similarKeywords.data.kind && similarKeywords.data.kind.length > 0" class="similar-title">类目：</li>
+      <li v-for="(k, index) in similarKeywords.data.kind" :key="k.nameCn" class="item"
+          :class="{'active': index==associate.activeIndex}"
+          @click.stop.prevent="onAssociateClick(k.nameCn)">{{ k.nameCn }}
       </li>
     </ul>
     <div class="search-hot">
@@ -53,7 +64,10 @@
         return this.$store.state.search.keywords
       },
       showAssociate () {
-        return this.keyword && this.associate.show && this.similarKeywords.data && this.similarKeywords.data.length
+        return this.keyword &&
+          this.associate.show &&
+          this.similarKeywords.data &&
+          (this.similarKeywords.data.brand || this.similarKeywords.data.component || this.similarKeywords.data.kind)
       }
     },
     props: {
@@ -224,6 +238,14 @@
           background-color: $grey-bg;
         }
       }
+      .similar-title {
+        padding: 0 15px;
+        line-height: 30px;
+        font-size: 16px;
+        font-weight: bold;
+        border-top: 1px solid #ccc;
+        cursor: default;
+      }
     }
   }
 </style>