mall-web-ssr/components/pcb/search/Kind.vue

<template>
  <div class="selector" >
    <a class="show-filter" @click="show_filter = !show_filter">
      <span v-text="show_filter?'收起筛选 ':'展开筛选 '"></span>
      <i :class="show_filter?'fa fa-angle-up':'fa fa-angle-down'"></i>
    </a>
    <div v-show="show_filter">
      <div class="sl-wrap" v-if="good_list.total > 0">
        <div class="sl-key f14">物料名称(类目)：</div>
        <div class="sl-value">
          <span v-for="(kind_temp, index) in kind_exp_arr">
            <div class="sl-filter" @click="click_kind_exp(kind_temp.ki_id, index)">
              <a class="text-num" v-text="kind_temp.ki_name_cn"></a>
              <span><i class="fa fa-close"></i></span>
            </div>
          </span>
          <ul :class="show_kind">
            <li @click="restore('kind')"><a>全部</a></li>
            <li v-for="(item, index) in list_kind" v-if="item.ki_name_cn" @click="click_kind(item.ki_id, index)" :title="item.ki_name_cn">
              <a v-text="item.ki_name_cn"></a>
            </li>
          </ul>
        </div>
        <div class="sl-clear"></div>
        <div class="sl-ext">
          <a @click="click_kind_more" v-if="list_kind.length>17">
            <span v-text="kind_open?'更多':'收起'"></span>
            <i class="fa fa-angle-down ng-scope" v-if="kind_open"></i>
            <i class="fa fa-angle-up ng-scope" v-if="!kind_open"></i>
          </a>
        </div>
      </div>
      <div class="sl-wrap" v-if="good_list.total > 0">
      <div class="sl-key f14">品牌：</div>
      <div class="sl-value" >
         <span v-for="(brand_temp, index) in brand_exp_arr" >
          <div class="sl-filter" @click="click_brand_exp(brand_temp.br_id, index)">
            <a class="text-num" v-text="brand_temp.br_name_cn"></a>
            <span><i class="fa fa-close"></i></span>
          </div>
        </span>
        <ul :class="show_brand">
          <li @click="restore('brand')"><a>全部</a></li>
          <li v-for="(item, index) in list_brand" v-if="item.br_name_cn" @click="click_brand(item.br_id, index)" :title="item.br_name_cn">
            <a v-text="item.br_name_cn"></a>
          </li>
        </ul>
      </div>
      <div class="sl-clear"></div>
      <div class="sl-ext" v-if="list_brand.length>17">
        <a @click="click_brand_more">
          <span v-text="brand_open?'更多':'收起'"></span>
          <i class="fa fa-angle-down ng-scope" v-if="brand_open"></i>
          <i class="fa fa-angle-up ng-scope" v-if="!brand_open"></i>
        </a>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        show_filter: true,
        kind_open: true,
        brand_open: true,
        show_kind: 'list-inline',
        show_brand: 'list-inline',
        filter: {},
        kind_arr: [],
        brand_arr: [],
        kind_exp_arr: [],
        brand_exp_arr: []
      }
    },
    watch: {
      $route: function (val, oldVal) {
        this.filter = {}
        this.kind_arr = []
        this.brand_arr = []
        this.kind_exp_arr = []
        this.brand_exp_arr = []
      }
    },
    computed: {
      list_kinds () {
        return this.$store.state.pcb.search.kinds
      },
      list_kind () {
        return this.list_kinds.data
      },
      list_brands () {
        return this.$store.state.pcb.search.brands
      },
      list_brand () {
        return this.list_brands.data
      },
      good_lists () {
        return this.$store.state.pcb.search.list
      },
      good_list () {
        return this.good_lists.data
      },
      list_data_brands () {
        return this.good_list.brands
      }
    },
    methods: {
      click_kind_more: function (event) {
        if (this.kind_open) {
          this.show_kind = 'list-inline2'
        } else {
          this.show_kind = 'list-inline'
        }
        this.kind_open = !this.kind_open
      },
      click_brand_more: function (event) {
        if (this.brand_open) {
          this.show_brand = 'list-inline2'
        } else {
          this.show_brand = 'list-inline'
        }
        this.brand_open = !this.brand_open
      },
      click_kind: function (id, index) {
        this.kind_arr.push(id)
        this.$emit('kindFilterEvent', this.kind_arr)
        this.kind_exp_arr.push(this.list_kind[index])
        this.kind_exp_arr[this.kind_exp_arr.length - 1].index = index
        this.list_kind[index] = ''
      },
      click_brand: function (id, index) {
        this.brand_arr.push(id)
        this.$emit('brandFilterEvent', this.brand_arr)
        this.brand_exp_arr.push(this.list_brand[index])
        this.brand_exp_arr[this.brand_exp_arr.length - 1].index = index
        this.list_brand[index] = ''
      },
      click_kind_exp: function (id, index) {
        let idx = this.getIndex(this.kind_arr, id)
        this.list_kind[this.kind_exp_arr[index].index] = this.kind_exp_arr[index]
        this.kind_arr.splice(idx, 1)
        this.$emit('kindFilterEvent', this.kind_arr)
        this.kind_exp_arr.splice(index, 1)
      },
      click_brand_exp: function (id, index) {
        let idx = this.getIndex(this.brand_arr, id)
        this.list_brand[this.brand_exp_arr[index].index] = this.brand_exp_arr[index]
        this.brand_arr.splice(idx, 1)
        this.$emit('brandFilterEvent', this.brand_arr)
        this.brand_exp_arr.splice(index, 1)
      },
      restore: function (name) {
        if (name === 'kind') {
          this.list_kind.concat(this.kind_exp_arr)
          this.kind_exp_arr = []
          this.kind_arr = []
          this.$emit('kindFilterEvent', this.kind_arr)
        } else if (name === 'brand') {
          this.list_brand.concat(this.brand_exp_arr)
          this.brand_exp_arr = []
          this.brand_arr = []
          this.$emit('brandFilterEvent', this.brand_arr)
        }
      },
      getIndex: function (arr, obj) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] === obj) {
            return i
          }
        }
        return -1
      }
    }
  }
</script>
<style scoped>
  .show-filter{
    position: relative;
    left: 1100px;
    top: -10px;
    color: #5078cb;
    border: 1px solid #5078cb;
    padding: 3px 8px;
    background: #fff;
  }
  #searchResult .selector >div{
    margin-bottom: 20px;
    border-top: 2px solid #6493ff;
  }
  #searchResult .selector .sl-wrap {
    position: relative;
    padding: 10px 15px;
    font-size: 12px;
    line-height: 30px;
    border: 1px solid #d4e1ff;
    border-top: none;
    border-bottom: 1px dashed #d4e1ff;
  }
  #searchResult .selector .sl-wrap:last-child {
    border-bottom: 1px solid #d4e1ff;
  }
  #searchResult .selector .sl-wrap .sl-key {
    float: left;
  }
  .f14 {
    font-size: 14px;
  }
  #searchResult .selector .sl-wrap .sl-value {
    margin-left: 78px;
    margin-right: 50px;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter {
    display: inline-block;
    position: relative;
    line-height: 22px;
    padding-left: 10px;
    padding-right: 30px;
    border: 1px solid #5078cb;
    color: #5078cb;
    cursor: pointer;
    height: 22px;
    margin-right: 10px;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter a{
    color: #666;
    text-decoration: none;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter span{
    display: inline-block;
    position: absolute;
    right: 0;
    top: -1px;
    width: 20px;
    text-align: center;
    background: #5078cb;
    color: #fff;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover {
    border: 1px solid #ea1e23;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover a{
    color: #ea1e23;
  }
  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover span{
    background: #ea1e23;
  }
  #searchResult .selector .sl-wrap .sl-clear {
    clear: both;
  }
  #searchResult .selector .sl-wrap .sl-ext {
    width: 40px;
    top: 5px;
    position: absolute;
    right: 0;
  }

  .list-inline {
    max-height: 60px;
    overflow: hidden;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
  }
  .list-inline2 {
    height: 100%;
    overflow: hidden;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
  }

  #searchResult .selector .sl-wrap .sl-value li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 20px;
    width: 10%;
    height: 23px;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #fff;
  }
  #searchResult .selector .sl-wrap .sl-value ul  a{
    color: #666;
  }
  #searchResult .selector .sl-wrap .sl-value li:hover {
    border: 1px solid #5078cb;
    color: #5078cb;
  }
  #searchResult .selector .sl-wrap .sl-value li:hover a {
    color: #5078cb;
  }
  .sl-ext a{
    color: black;
  }
  .sl-ext a:hover{
    color: #5078cb;
    text-decoration: none;
  }

</style>