新增 原厂。店铺搜索

components/common/PcSearchHeader.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="search-content com-mobile-header">
+    <!--<a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>-->
+    <div class="input-group" style="display: table;">
+      <input :placeholder="placeholder" class="form-control" type="text" v-model="keyword" @input="onKeywordInput()"  @keyup.13="onSearch()" />
+      <span class="input-group-btn">
+        <button type="button" class="btn btn-default" @click="onSearch()"><i class="iconfont">&#xe6fc;</i></button>
+      </span>
+    </div>
+    <!--<input type="text" v-model="keyword" @input="onKeywordInput()" :placeholder="placeholder" @keyup.13="onSearch()">-->
+    <!--<span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>-->
+    <ul v-if="emptyStatus && type == 'supplier' && keyword && keyword !== '' && showSimilarWord">
+      <template v-if="similarList.pBrandEn && similarList.pBrandEn.length">
+        <li class="title text-ellipse">品牌</li>
+        <li class="text-ellipse" v-for="brand in similarList.pBrandEn.slice(0, 4)" @click="onSearch(brand.nameEn, 'pBrandEn', $event)">{{brand.nameEn}}</li>
+      </template>
+      <template v-if="similarList.kind && similarList.kind.length">
+        <li class="title text-ellipse">类目</li>
+        <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.kind, 'kind', $event)">{{kind.kind}}</li>
+      </template>
+      <template v-if="similarList.pCmpCode && similarList.pCmpCode.length">
+        <li class="title text-ellipse">型号</li>
+        <li class="text-ellipse" v-for="code in similarList.pCmpCode.slice(0, 4)" @click="onSearch(code.pCmpCode, 'pCmpCode', $event)">{{code.pCmpCode}}</li>
+      </template>
+    </ul>
+    <ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
+      <template v-if="similarList.brand && similarList.brand.length">
+        <li class="title text-ellipse">品牌</li>
+        <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 4)" @click="onSearch(brand.nameEn, 'brand', $event)">{{brand.nameEn}}</li>
+      </template>
+      <template v-if="similarList.kind && similarList.kind.length">
+        <li class="title text-ellipse">类目</li>
+        <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
+      </template>
+      <template v-if="similarList.component && similarList.component.length">
+        <li class="title text-ellipse">型号</li>
+        <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
+      </template>
+    </ul>
+  </div>
+</template>
+<script>
+  import {scrollTo} from '~utils/scroll'
+  export default {
+    props: {
+      placeholder: {
+        type: String,
+        default: '请输入要查找的内容'
+      },
+      similarUrl: { // 联想词url
+        type: String,
+        default: '/search/similarKeywords'
+      },
+      type: { // 搜索类型
+        type: String,
+        default: 'default'
+      },
+      showSimilar: { // 是否显示联想词
+        type: Boolean,
+        default: true
+      },
+      outerKeyword: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        keyword: '',
+        similarList: {},
+        showSimilarWord: false,
+        searchKeyword: '',
+        clickCount: 0
+      }
+    },
+    watch: {
+      outerKeyword: {
+        handler: function (val) {
+          this.keyword = val
+        },
+        immediate: true
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        document.onclick = () => {
+          this.showSimilarWord = false
+        }
+      })
+    },
+    computed: {
+      emptyStatus () {
+        let similarList = this.similarList
+        if (this.type === 'supplier') {
+          return (similarList.pCmpCode && similarList.pCmpCode.length) ||
+            (similarList.pBrandEn && similarList.pBrandEn.length) ||
+            (similarList.kind && similarList.kind.length)
+        } else if (this.type === 'default') {
+          return (similarList.component && similarList.component.length) ||
+            (similarList.brand && similarList.brand.length) ||
+            (similarList.kind && similarList.kind.length)
+        }
+      }
+    },
+    methods: {
+      onSearch: function (key, type, e) {
+        if (e) {
+          e.stopPropagation()
+        }
+//        if (key === this.searchKeyword || this.keyword === this.searchKeyword) {
+//          return
+//        }
+        if (key) {
+          this.keyword = key
+          this.$emit('searchAction', {
+            keyword: this.keyword,
+            type: type
+          })
+        } else {
+          let sType = null
+          if (this.type === 'default' && this.keyword && this.keyword !== '' && this.similarList.component) {
+            if (this.similarList.component[0] && this.keyword === this.similarList.component[0].code) {
+              sType = 'code'
+            } else if (this.similarList.brand[0] && this.keyword === this.similarList.brand[0].nameEn) {
+              sType = 'brand'
+            } else if (this.similarList.kind[0] && this.keyword === this.similarList.kind[0].nameCn) {
+              sType = 'kind'
+            } else {
+              let arr = [...this.similarList.component, ...this.similarList.brand, ...this.similarList.kind]
+              if (arr[0]) {
+                if (arr[0].code) {
+                  this.keyword = arr[0].code
+                  sType = 'code'
+                } else if (arr[0].nameEn) {
+                  this.keyword = arr[0].nameEn
+                  sType = 'brand'
+                } else if (arr[0].nameCn) {
+                  this.keyword = arr[0].nameCn
+                  sType = 'kind'
+                }
+              }
+            }
+          } else if (this.type === 'supplier' && this.keyword && this.keyword !== '' && this.similarList.pCmpCode) {
+            if (this.similarList.pCmpCode[0] && this.keyword === this.similarList.pCmpCode[0].pCmpCode) {
+              sType = 'pCmpCode'
+            } else if (this.similarList.pBrandEn[0] && this.keyword === this.similarList.pBrandEn[0].nameEn) {
+              sType = 'pBrandEn'
+            } else if (this.similarList.kind[0] && this.keyword === this.similarList.kind[0].kind) {
+              sType = 'kind'
+            } else {
+              let arr = [...this.similarList.pCmpCode, ...this.similarList.pBrandEn, ...this.similarList.kind]
+              if (arr[0]) {
+                if (arr[0].pCmpCode) {
+                  this.keyword = arr[0].pCmpCode
+                  sType = 'pCmpCode'
+                } else if (arr[0].nameEn) {
+                  this.keyword = arr[0].nameEn
+                  sType = 'pBrandEn'
+                } else if (arr[0].kind) {
+                  this.keyword = arr[0].kind
+                  sType = 'kind'
+                }
+              }
+            }
+          }
+          this.$emit('searchAction', {
+            keyword: this.keyword,
+            type: sType
+          })
+        }
+        this.searchKeyword = this.keyword
+        scrollTo('body', 10)
+        this.showSimilarWord = false
+      },
+      onKeywordInput: function () {
+        this.clickCount ++
+        let count = this.clickCount
+        let timer = setTimeout(() => {
+          this.getSimilarList(count, timer)
+        }, 300)
+      },
+      getSimilarList: function (clickCount, timer) {
+        clearTimeout(timer)
+        if (this.showSimilar && this.keyword && this.keyword !== '' && clickCount === this.clickCount) {
+          this.$http.get(this.similarUrl, {params: {keyword: this.keyword}}).then(
+            res => {
+              this.similarList = res.data
+              this.showSimilarWord = true
+            }
+          )
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .search-content {
+    position: relative;
+    color: #333;
+    z-index: 991;
+    background: #fff;
+    input {
+      line-height: normal;
+    }
+    ul {
+      width: 100%;
+      background: #fff;
+      position: absolute;
+      left: 0;
+      top: 36px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      max-height: 400px;
+      overflow-y: auto;
+      li {
+        height: 36px;
+        line-height: 36px;
+        padding: 0 10px;
+        font-size: 14px;
+        &:hover {
+          background: #f6f5f5;
+          cursor: pointer;
+        }
+        &.title {
+          color: #666;
+          border-bottom: 1px solid #ddd;
+          font-weight: bold;
+          background: #f6f5f5;
+        }
+      }
+    }
+  }
+</style>

components/mobile/base/SearchHeader.vue

@@ -4,10 +4,6 @@
     <input type="text" v-model="keyword" @input="onKeywordInput()" :placeholder="placeholder" @keyup.13="onSearch()">
     <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
     <ul v-if="emptyStatus && type == 'supplier' && keyword && keyword !== '' && showSimilarWord">
-      <template v-if="similarList.pCmpCode && similarList.pCmpCode.length">
-        <li class="title text-ellipse">型号</li>
-        <li class="text-ellipse" v-for="code in similarList.pCmpCode.slice(0, 4)" @click="onSearch(code.pCmpCode, 'pCmpCode', $event)">{{code.pCmpCode}}</li>
-      </template>
       <template v-if="similarList.pBrandEn && similarList.pBrandEn.length">
         <li class="title text-ellipse">品牌</li>
         <li class="text-ellipse" v-for="brand in similarList.pBrandEn.slice(0, 4)" @click="onSearch(brand.nameEn, 'pBrandEn', $event)">{{brand.nameEn}}</li>
@@ -16,12 +12,12 @@
         <li class="title text-ellipse">类目</li>
         <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.kind, 'kind', $event)">{{kind.kind}}</li>
       </template>
-    </ul>
-    <ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
-      <template v-if="similarList.component && similarList.component.length">
+      <template v-if="similarList.pCmpCode && similarList.pCmpCode.length">
         <li class="title text-ellipse">型号</li>
-        <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
+        <li class="text-ellipse" v-for="code in similarList.pCmpCode.slice(0, 4)" @click="onSearch(code.pCmpCode, 'pCmpCode', $event)">{{code.pCmpCode}}</li>
       </template>
+    </ul>
+    <ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
       <template v-if="similarList.brand && similarList.brand.length">
         <li class="title text-ellipse">品牌</li>
         <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 4)" @click="onSearch(brand.nameEn, 'brand', $event)">{{brand.nameEn}}</li>
@@ -30,6 +26,10 @@
         <li class="title text-ellipse">类目</li>
         <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
       </template>
+      <template v-if="similarList.component && similarList.component.length">
+        <li class="title text-ellipse">型号</li>
+        <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
+      </template>
     </ul>
   </div>
 </template>

components/provider/Suppliers.vue

@@ -5,13 +5,14 @@
       <tr>
         <td width="175"></td>
         <td width="auto"></td>
-        <td width="200">
-          <div class="input-group" style="display: table;">
-            <input class="form-control" type="search" v-model="keyword" placeholder="请输入商家名称" @search="search()" />
-            <span class="input-group-btn">
-							<button type="button" class="btn btn-default" @click="search()"><i class="iconfont">&#xe6fc;</i></button>
-						</span>
-          </div>
+        <td width="280">
+          <search-header :outerKeyword="keyword" @searchAction="search" :placeholder="'品牌/类目/型号/名称查找店铺'"></search-header>
+          <!--<div class="input-group" style="display: table;">-->
+            <!--<input class="form-control" type="search" v-model="keyword" placeholder="品牌/类目/型号/店铺名" @search="search()" />-->
+            <!--<span class="input-group-btn">-->
+							<!--<button type="button" class="btn btn-default" @click="search()"><i class="iconfont">&#xe6fc;</i></button>-->
+						<!--</span>-->
+          <!--</div>-->
         </td>
         <td width="150" style="vertical-align: middle"><span>入驻商家：</span><span class="text-message">{{stores ? stores.totalElements : 0}}</span><span>家</span></td>
         <td width="150" style="vertical-align: middle;">
@@ -31,14 +32,14 @@
           <a class="store-name" :href="'/store/' + store.uuid" target="_blank"><div :title="store.storeName">{{store.storeName}}</div></a>
           <div class="store-message">
             <span>商家介绍：</span>
-            <span>{{showLittleDescription(store.enterprise.description)}}<em v-if="store.description && store.description.length > 160">...</em></span>
+            <span style="word-break: break-word;">{{showLittleDescription(store.enterprise.description)}}<em v-if="store.description && store.description.length > 160">...</em></span>
           </div>
         </td>
         <td class="vertical-middle">
           <a :href="'/store/' + store.uuid" target="_blank"><button class="btn btn-primary">进入店铺&nbsp;&gt;</button></a>
         </td>
       </tr>
-      <tr v-if="!stores || stores.length == 0">
+      <tr v-if="!stores.content || stores.content.length == 0">
         <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
           <i class="fa fa-smile-o fa-lg"></i> 暂无店铺信息
         </td>
@@ -53,11 +54,13 @@
 </template>
 <script>
 import Page from '~components/common/page/pageComponent.vue'
+import SearchHeader from '~components/common/PcSearchHeader.vue'
 export default {
   name: 'suppliers',
   props: ['types'],
   components: {
-    Page
+    Page,
+    SearchHeader
   },
   data () {
     return {
@@ -87,9 +90,9 @@ export default {
     }
   },
   methods: {
-    search () {
+    search (obj) {
       this.pageParams.page = 1
-      this.pageParams.keyword = this.keyword === '' ? null : this.keyword
+      this.pageParams.keyword = obj.keyword === '' ? null : obj.keyword
       this.$store.dispatch('provider/findStoreList', this.pageParams)
     },
     showLittleDescription (description) {