mall-web-ssr/components/mobile/base/SearchHeader2.vue

<template>
  <div class="search-content com-mobile-header">
    <div class="options" @click="setShowSearchType(!showSearchType, $event)">
      {{searchType | typeFilter}}
      <i></i>
      <ul v-if="showSearchType">
        <li v-show="searchType !== type" v-for="type in searchTypeList" @click="setSearchType(type, $event)">{{type | typeFilter}}</li>
      </ul>
    </div>
    <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
    <input type="text" v-model="keyword" @input="getSimilarList()" :placeholder="placeholder" @keyup.13="onSearch()">
    <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
    <ul class="similar-list" v-if="emptyStatus && type == 'supplier' && keyword && keyword !== '' && showSimilarWord">
      <template v-if="similarList.pCmpCode && similarList.pCmpCode.length && searchType === 'code'">
        <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 && searchType === 'brand'">
        <li class="title text-ellipse">品牌</li>
        <li class="text-ellipse" v-for="brand in similarList.pBrandEn.slice(0, 4)" @click="onSearch(brand.nameCn, 'pBrandEn', $event)">{{brand.nameCn}}</li>
      </template>
      <template v-if="similarList.kind && similarList.kind.length && searchType === 'kind'">
        <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 class="similar-list" v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
      <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>
      <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.nameCn, 'brand', $event)">{{brand.nameCn}}</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>
    </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
      }
    },
    data () {
      return {
        keyword: '',
        similarList: {},
        showSimilarWord: false,
        searchKeyword: '',
        showSearchType: false,
        searchType: 'code',
        searchTypeList: ['code', 'brand', 'kind', 'name']
      }
    },
    filters: {
      typeFilter: function (val) {
        switch (val) {
          case 'code':
            return '搜型号'
          case 'brand':
            return '搜品牌'
          case 'kind':
            return '搜物料名称'
          case 'name':
            return '供应商'
          default:
            return '全部'
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        document.onclick = () => {
          this.showSimilarWord = false
          this.showSearchType = false
        }
      })
    },
    computed: {
      emptyStatus () {
        let similarList = this.similarList
        let searchType = this.searchType
        if (this.type === 'supplier') {
          return (similarList.pCmpCode && similarList.pCmpCode.length && searchType === 'code') ||
            (similarList.pBrandEn && similarList.pBrandEn.length && searchType === 'brand') ||
            (similarList.kind && similarList.kind.length && searchType === 'kind')
        } 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.searchType === 'code' && this.similarList.pCmpCode[0]) {
            this.keyword = this.similarList.pCmpCode[0].pCmpCode
            sType = 'pCmpCode'
          } else if (this.searchType === 'brand' && this.similarList.pBrandEn[0]) {
            this.keyword = this.similarList.pBrandEn[0].nameCn
            sType = 'pBrandEn'
          } else if (this.searchType === 'kind' && this.similarList.kind[0]) {
            this.keyword = this.similarList.kind[0].kind
            sType = 'kind'
          }
          this.$emit('searchAction', {
            keyword: this.keyword,
            type: sType
          })
        }
        this.searchKeyword = this.keyword
        scrollTo('body', 10)
        this.showSimilarWord = false
      },
      getSimilarList: function () {
        if (this.showSimilar && this.keyword && this.keyword !== '') {
          this.$http.get(this.similarUrl, {params: {keyword: this.keyword}}).then(
            res => {
              this.similarList = res.data
              this.showSimilarWord = true
            }
          )
        }
      },
      setShowSearchType: function (flag, e) {
        if (e) {
          e.stopPropagation()
        }
        this.showSearchType = flag
      },
      setSearchType: function (type, e) {
        if (e) {
          e.stopPropagation()
        }
        this.setShowSearchType(false)
        this.searchType = type
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search-content {
    color: #333;
    input {
      margin: 0 0 0 .5rem;
      line-height: normal;
      padding-left: 1.1rem;
    }
    .similar-list {
      width: 5.45rem;
      background: #fff;
      position: absolute;
      left: 1.65rem;
      top: .72rem;
      border: 1px solid #ccc;
      border-radius: .05rem;
      max-height: 4.5rem;
      overflow-y: auto;
      li {
        height: .6rem;
        line-height: .6rem;
        padding: 0 .1rem;
        font-size: .26rem;
        &.title {
          color: #666;
          border-bottom: 1px solid #ddd;
          font-weight: bold;
          background: #f6f5f5;
        }
      }
    }
    .options {
      position: absolute;
      left: .45rem;
      width: 1.25rem;
      padding-left: .25rem;
      background: url(/images/mobile/@2x/search/select-arrow-blue.jpg) no-repeat;
      background-size: .14rem .12rem;
      background-position: 1.02rem .36rem;
      color: #3e82f5;
      font-size: .26rem;
      i {
        height: .46rem;
        width: .01rem;
        background: #eceef0;
        display: block;
        position: absolute;
        left: 1.2rem;
        top: .04rem;
        margin-top: .18rem;
      }
      ul {
        position: absolute;
        left: .15rem;
        top: .54rem;
        z-index: -1;
        width: 1.1rem;
        border-radius: .05rem;
        li {
          height: .99rem;
          /*border-radius: .05rem;*/
          background: #666;
          color: rgba(255, 255, 255, 0.89);
          text-align: center;
          line-height: 1.2rem;
          font-size: .3rem;
        }
      }
    }
  }
</style>