mall-web-ssr/components/main/Search.vue

<template>
  <div class="search-box">
    <div class="input-group">
      <template v-if="!isPcb">
        <div class="type">
          <span class="type-item" :class="{active: newSearchType == 'component'}" @click="setNewSearchType('component')">型号</span>
          <span class="type-item" :class="{active: newSearchType == 'kind'}" @click="setNewSearchType('kind')">物料名称</span>
          <span class="type-item" :class="{active: newSearchType == 'store'}" @click="setNewSearchType('store')">卖家</span>
          <span class="type-item" :class="{active: newSearchType == 'brand'}" @click="setNewSearchType('brand')">品牌</span>
        </div>
        <input v-model="keyword" type="text" class="search-input form-control input-primary"
               :placeholder="placeholderByType"
               @focus.stop.prevent="onFocus()"
               @blur.stop.prevent="onBlur()"
               @keyup.13="onSearch()"
               @keyup.40="onSelectChange(1)"
               @keyup.38="onSelectChange(-1)"
        />
        <span class="input-group-btn" @click="onSearch()" style="z-index: 10">
          <button class="btn btn-primary search-btn" type="button" :class="{'Isblue':!SelectItem}">搜&nbsp;索</button>
        </span>
      </template>
      <template v-if="isPcb">
        <input v-model="keyword" type="text" class="search-input form-control input-primary"
               :placeholder="'请输入pcb型号'"
               @focus.stop.prevent="onFocus()"
               @blur.stop.prevent="onBlur()"
               style="width: 441px;"
               @keyup.13="onSearch()"/>
        <span class="input-group-btn" @click="onSearch()" style="z-index: 10">
          <button class="btn btn-primary search-btn" type="button" :class="{'Isblue':!SelectItem}">搜&nbsp;索</button>
        </span>
      </template>
    </div>
    <ul class="association"
        :class="{'association2': !SelectItem, 'pcb-asso': isPcb}"
        v-show="showAssociate"
        @mouseenter="associate.focus=true"
        @mouseleave="associate.focus=false"
    >
      <li v-for="(v, index) in similarKeywords.result" class="item"
          :class="{'active': index==associate.activeIndex}"
          @click.stop.prevent="onAssociateClick(v.value)">{{v.value}}
      </li>
    </ul>
    <div class="search-hot" v-if="SelectItem">
      <ul class="list-untyled">
        <li class="item item-first">热门搜索</li>
        <li class="item" v-for="w in hotDeviceBrand">
          <a :href="w.detailsLink">{{ w.title }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'search-box',
    props: {
      SelectItem: {
        type: Boolean,
        default: true
      },
      isPcb: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        keyword: '',
        associate: {
          focus: false,
          show: false,
          activeIndex: null
        },
        click_flag: false,
        searchType: 'product',
        // 新版搜索控制变量
        newSearchType: 'component',
        isInit: false
      }
    },
    computed: {
      hotDeviceBrand () {
        return this.$store.state.hotSearch.hot.data.data ? this.$store.state.hotSearch.hot.data.data : []
      },
      similarKeywords () {
        let list = []
        let data = this.$store.state.search.keywords.data.result
        if (data && data.length > 0) {
          data.forEach(item => {
            if (this.newSearchType === 'component' && item.code) {
              list.push({
                value: item.code
              })
            } else if (this.newSearchType === 'kind' && item.nameCn) {
              list.push({
                value: item.nameCn
              })
            } else if (this.newSearchType === 'store' && item.name) {
              list.push({
                value: item.name
              })
            } else if (this.newSearchType === 'brand' && item.nameEn) {
              list.push({
                value: item.nameEn
              })
            }
          })
        }
        return {
          result: list
        }
      },
      showAssociate () {
        return this.keyword &&
          this.associate.show &&
          this.similarKeywords.result &&
          this.similarKeywords.result.length
      },
      placeholderByType () {
        let type
        switch (this.newSearchType) {
          case 'component':
            type = '型号'
            break
          case 'brand':
            type = '品牌'
            break
          case 'kind':
            type = '物料名称'
            break
          case 'store':
            type = '卖家名称'
            break
          default:
            type = '型号'
        }
        return `请输入${type}`
      }
    },
    watch: {
      'keyword': {
        handler (val, oldVal) {
          let keywords = this.similarKeywords
          if (!keywords.result || !keywords.result.length || this.associate.activeIndex === null || val !== keywords.result[this.associate.activeIndex].value) {
            this.onChange()
          }
        }
      },
      '$route': {
        handler: function (route) {
          if (route.path === '/search') {
            this.newSearchType = route.query.type || 'component'
            this.keyword = route.query.w || ''
            this.isInit = true
          }
        },
        immediate: true
      }
    },
    methods: {
      onFocus () {
        this.associate.show = true
      },
      onBlur () {
        this.associate.show = this.associate.focus
      },
      onSelectChange (count) {
        let keywords = this.similarKeywords
        if (keywords && keywords.result.length) {
          let index = this.associate.activeIndex
          if (index === null) {
            index = -1
          }
          index += count
          if (index >= keywords.result.length) {
            index = 0
          } else if (index < 0) {
            index = keywords.result.length - 1
          }
          this.associate.activeIndex = index
          this.keyword = keywords.result[index].value || keywords.result[index].code || keywords.result[index].nameCn || keywords.result[index].name
        }
      },
      onChange () {
        this.associate.activeIndex = null
        if (!this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
        } else {
          if (!this.isInit) {
            this.searchKeywords()
          } else {
            this.isInit = false
          }
        }
        if (this.click_flag) {
          this.associate.show = false
          this.click_flag = false
        }
      },
      searchKeywords () {
        this.associate.show = true
        this.$store.dispatch('searchKeywords', { keyword: this.keyword, type: this.newSearchType })
      },
      onSearch (str) {
        document.getElementsByClassName('search-input')[0].blur()
        if (this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
          if (this.isPcb) {
            this.$router.push({path: '/pcb/search?w=' + encodeURIComponent(this.keyword)})
          } else {
            if (this.searchType === 'product') {
              this.$router.push({path: `/search?w=${encodeURIComponent(this.keyword)}&type=${this.newSearchType}`})
            } else if (this.searchType === 'store') {
              this.$router.push({path: '/searchStore?w=' + encodeURIComponent(this.keyword)})
            }
          }
        } else {
          if (!str) { this.$message.info('请输入关键字') }
        }
      },
      onAssociateClick (word) {
        this.click_flag = true
        this.keyword = word
        this.onSearch()
      },
      isCnStart () {
        if (this.keyword && this.keyword.length > 0) {
          return this.keyword.charCodeAt(0) > 255
        }
      },
      setNewSearchType (type) {
        this.newSearchType = type
        this.onSearch('fromLabel')
      }
    },
    created () {
      this.$store.dispatch('resetSearchKeywords')
      this.$store.dispatch('loadHotSearch')
    }
  }
</script>
<style lang="scss" scoped type="text/scss">
  @import '~assets/scss/variables';
  .form-control{
    border-radius: 0;
  }
  .search-box {
    width: 520px;
    height: 40px;
    position: relative;
    .search-input{
      width: 441px;
      float: left;
    }
    .search-input, .search-btn {
      height: 40px;
      border-width: 2px;
    }
    .select-type{
      width: 70px;
      float: left;
      border: #5078cb 2px solid;
      height: 40px;
      border-right: none;
      margin-right: -1px;
    }
    .search-btn {
      font-size: 16px;
      width: 79px;
      border-radius: 0;
    }

    .Isblue{
      vertical-align: middle;
      display: inline-block;
      text-align: center;
      width: 72px;
      border-left: 0;
      background: #d3e1fc;
      color: #5078cb;
      text-align: center;
      font-size: 14px;
      position: absolute;
      right: 0;
      top: 0;
      &:hover {
        background: #d2272d;
        color: #fff;
        transition: all .3s;
      }
    }
    .search-hot ul{
      line-height: 12px;
    }
    .search-hot ul li a{
      color: #838383;
    }
    .search-hot {
      margin-top:5px;
      overflow: hidden;
      height:25px;
      .item {
        display: inline-block;
        max-width:22%;
        text-align: center;
        vertical-align: middle;
        font-size: $font-size-small;
        padding-right: $pad;
        a{
          display:block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:hover{
            color: $red;
          }
        }
        &.item-first {
          width:12%;
          color: $red;
        }
      }
    }

    .association {
      position: absolute;
      left: 0;
      top: 100%;
      right: 81px;
      background: $white;
      border: $border;
      border-top-width: 0;
      z-index: 21;
      &.pcb-asso {
        left: 0;
      }

      .item {
        padding: 0 15px;
        line-height: 30px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.active {
          background-color: $dark-bg;
        }
        &:hover {
          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;
      }
    }
    .association2 {
      left: 2px;
      right: 71px
    }

    .input-group {
      .type {
        position: absolute;
        top: -21px;
        .type-item {
          padding: 4px 12px;
          color: #5078cb;
          font-size: 14px;
          cursor: pointer;
          &.active, &:hover {
            background: #4071c6;
            color: #fff;
          }
        }
      }
    }
  }

  .search-box2 {
    width: 442px;
  }
</style>