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

<template>
  <div class="search-box">
    <div class="input-group">
      <select @change="onSelectTypeChange" class="form-control select-type select-adder">
        <option value="">产品</option>
        <option value="">店铺</option>
      </select>
      <input v-model="keyword" type="text" class="search-input form-control input-primary"
             placeholder="型号/类目/品牌"
             @focus.stop.prevent="onFocus()"
             @blur.stop.prevent="onBlur()"
             @keyup.40="onSelectChange(1)"
             @keyup.38="onSelectChange(-1)"
             @keyup.13="onSearch()"/>
      <span class="input-group-btn" @click="onSearch()">
        <button class="btn btn-primary search-btn" type="button">搜&nbsp;索</button>
      </span>
    </div>
    <ul class="association" v-show="showAssociate && searchType == 'product'"
        @mouseenter="associate.focus=true" @mouseleave="associate.focus=false">
      <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.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">
      <ul class="list-untyled">
        <li class="item item-first">热门搜索</li>
        <li class="item" v-for="w in hotwords">
          <nuxt-link :to="w.url" target="_blank">{{ w.name }}</nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'search-box',
    data () {
      return {
        keyword: '',
        associate: {
          focus: false,
          show: false,
          activeIndex: null
        },
        click_flag: false,
        searchType: 'product'
      }
    },
    computed: {
      similarKeywords () {
        return this.$store.state.search.keywords
      },
      showAssociate () {
        return this.keyword &&
          this.associate.show &&
          this.similarKeywords.data &&
          (this.similarKeywords.data.brand || this.similarKeywords.data.component || this.similarKeywords.data.kind)
      }
    },
    props: {
      hotwords: {
        type: Array,
        default () {
          return [{
            name: 'SCT2080KEC',
            url: '/product/component/1100400300009990'
          }, {
            name: '电池组',
            url: '/product/kind/346'
          }, {
            name: 'Vishay',
            url: '/product/brand/30327265e42a871be050007f01003d96'
          }, {
            name: 'Panasonic',
            url: '/product/brand/30327265e47d871be050007f01003d96'
          }]
        }
      }
    },
    watch: {
      'keyword': {
        handler (val, oldVal) {
          let keywords = this.similarKeywords.data
          if (!keywords || !keywords.length || this.associate.activeIndex === null || val !== keywords[this.associate.activeIndex]) {
            this.onChange()
          }
        }
      }
    },
    methods: {
      onSelectTypeChange: function (e) {
        let type = e.target[e.target.selectedIndex].innerHTML
        if (type === '产品') {
          this.searchType = 'product'
        } else if (type === '店铺') {
          this.searchType = 'store'
        }
      },
      onFocus () {
        this.associate.show = true
      },
      onBlur () {
        this.associate.show = this.associate.focus
      },
      onSelectChange (count) {
        let keywords = this.similarKeywords.data
        if (keywords && keywords.length) {
          let index = this.associate.activeIndex
          if (index === null) {
            index = -1
          }
          index += count
          if (index >= keywords.length) {
            index = 0
          } else if (index < 0) {
            index = keywords.length - 1
          }
          this.associate.activeIndex = index
          this.keyword = keywords[index]
        }
      },
      onChange () {
        this.associate.activeIndex = null
        if (!this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
        } else {
          this.searchKeywords()
        }
        if (this.click_flag) {
          this.associate.show = false
          this.click_flag = false
        }
      },
      searchKeywords () {
        this.associate.show = true
        this.$store.dispatch('searchKeywords', { keyword: this.keyword })
      },
      onSearch () {
        if (this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
          if (this.searchType === 'product') {
            this.$router.push({path: '/search?w=' + encodeURIComponent(this.keyword)})
          } else if (this.searchType === 'store') {
            this.$router.push({path: '/searchStore?w=' + encodeURIComponent(this.keyword)})
          }
        }
      },
      onAssociateClick (word) {
        this.click_flag = true
        this.keyword = word
        this.onSearch()
      }
    },
    created () {
      this.$store.dispatch('resetSearchKeywords')
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  .form-control{
    border-radius: 0;
  }
  .search-box {
    width: 520px;
    height: 40px;
    position: relative;
    .search-input{
      width: 372px;
      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;
    }
    .search-hot ul li a{
      color: #838383;
    }
    .search-hot {
      .item {
        display: inline-block;
        font-size: $font-size-small;
        margin-right: $pad;

        &.item-first {
          color: $red;
        }
      }
    }

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

      .item {
        padding: 0 15px;
        line-height: 30px;
        cursor: pointer;

        &.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;
      }
    }
  }
</style>