mall-web-ssr/components/common/PcSearchHeader.vue

<template>
  <div class="search-content-pc 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()">搜索</button>
      </span>
    </div>
    <ul v-if="emptyStatus && keyword && keyword !== '' && showSimilarWord">
      <template v-if="similarList.store && similarList.store.length">
        <template v-if="type === 'supplier' || type === 'default'">
          <li class="title text-ellipse" v-text="type === 'supplier' ? '公司名' : type === 'default' ? '店铺名' : ''">店铺名</li>
          <li class="text-ellipse" v-for="store in similarList.store.slice(0, 4)" @click="onSearch(store.name, 'store', $event)">{{store.name}}</li>
        </template>
        <template v-if="type=== 'purchase' && user.logged">
          <li class="title text-ellipse" v-text="'公司名'">公司</li>
          <li class="text-ellipse" v-for="store in similarList.store.slice(0, 4)" @click="onSearch(store.name, 'store', $event)">{{store.name}}</li>
        </template>
      </template>
      <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>
  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: ''
      },
      useMatchRule: {
        type: Boolean,
        default: false
      },
      storeTypes: {
        type: String,
        default: ''
      }
      // storeTypes  ''
    },
    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
        return (similarList.component && similarList.component.length) ||
          (similarList.brand && similarList.brand.length) ||
          (similarList.kind && similarList.kind.length) ||
          (similarList.store && similarList.store.length)
      }
    },
    methods: {
      onSearch: function (key, type, e) {
        if (e) {
          e.stopPropagation()
        }
//        if (key === this.searchKeyword || this.keyword === this.searchKeyword) {
//          return
//        }
        if (key || !this.useMatchRule) {
          this.keyword = key || this.keyword
          this.$emit('searchAction', {
            keyword: this.keyword,
            type: type
          })
        } else {
          let sType = null
          if (this.keyword && this.keyword !== '' && this.similarList.component) {
            if (this.similarList.store[0] && this.keyword === this.similarList.store[0].name) {
              sType = 'store'
            } 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 if (this.similarList.component[0] && this.keyword === this.similarList.component[0].code) {
              sType = 'code'
            } else {
              let arr = [...this.similarList.store, ...this.similarList.brand, ...this.similarList.kind, ...this.similarList.component]
              if (arr[0]) {
                if (arr[0].name) {
                  this.keyword = arr[0].name
                  sType = 'store'
                } 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 (arr[0].code) {
                  this.keyword = arr[0].code
                  sType = 'code'
                }
              }
            }
          }
          this.$emit('searchAction', {
            keyword: this.keyword,
            type: sType
          })
        }
        this.searchKeyword = this.keyword
        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) {
          if (this.storeTypes === '') { // 供应商和求购
            this.$http.get(this.similarUrl, {params: {keyword: this.keyword}}).then(
              res => {
                this.similarList = res.data
                this.showSimilarWord = true
              }
            )
          } else { // 走店铺
            this.$http.get(this.similarUrl, {params: {keyword: this.keyword, storeTypes:this.storeTypes, type:'all'}}).then(
              res => {
                this.similarList = res.data
                this.showSimilarWord = true
              }
            )
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search-content-pc {
    position: relative;
    color: #333;
    z-index: 991;
    background: transparent;
    height: auto;
    line-height: normal;
    padding: 0;
    input {
      line-height: normal;
    }
    ul {
      width: 283px;
      background: #fff;
      position: absolute;
      left: 533px;
      top: 28px;
      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;
        color: #333;
        &:hover {
          background: #f6f5f5;
          cursor: pointer;
        }
        &.title {
          color: #666;
          border-bottom: 1px solid #ddd;
          font-weight: bold;
          background: #f6f5f5;
        }
      }
    }
  }
</style>