mall-web-ssr/pages/pcb/search/_keyword.vue

<template>
  <div class="container" id="searchResult">
    <detail-brand></detail-brand>
    <result-title :keyword="key" :page="nowPage"></result-title>
    <kind @kindFilterEvent="listenKindFilter"
          @brandFilterEvent="listenBrandFilter"
    ></kind>
    <good-list @pageEvent="listenPage"
               @sortEvent="listenSort"
               @filterPriceEvent="listenPriceFilter"
    ></good-list>
  </div>
</template>
<script>
  import { GoodList, Kind, ResultTitle, DetailBrand } from '~components/pcb'
  export default{
    layout: 'pcb',
    data () {
      return {
        key: this.$route.query.w,
        pageSize: 15,
        nowPage: 1,
        sorting: {},
        filter: {},
        paramJSON: {}
      }
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('pcb/searchForKinds', {collectedField: 'goods_kind', keyword: route.query.w, filters: {}}),
        store.dispatch('pcb/searchForBrands', {collectedField: 'goods_brand', keyword: route.query.w, filters: {}}),
        store.dispatch('pcb/searchForList', {count: 15, filter: {}, keyword: route.query.w, page: 1, sorting: {}})
      ])
    },
    watch: {
      '$route.query.w': {
        handler: function (val) {
          this.key = val
          this.reloadAll()
        },
        immediate: false
      }
    },
    components: {
      ResultTitle,
      Kind,
      GoodList,
      DetailBrand
    },
    methods: {
      reloadAll: function () {
        this.filter = {}
        this.sorting = {}
        this.paramJSON = {}
        this.reloadList()
        this.reloadKind()
        this.reloadBrand()
      },
      reloadList: function () {
        if (this.sorting === {}) {
          this.sorting = {}
        }
        this.$store.dispatch('pcb/searchForList', {count: this.pageSize, filter: this.filter, keyword: this.$route.query.w, page: this.nowPage, sorting: this.sorting})
      },
      reloadKind: function () {
        if (!this.filter.goods_kindId) {
          this.$store.dispatch('pcb/searchForKinds', {collectedField: 'goods_kind', keyword: this.$route.query.w, filters: this.paramJSON})
        }
      },
      reloadBrand: function () {
        if (!this.filter.goods_brandId) {
          this.$store.dispatch('pcb/searchForBrands', {collectedField: 'goods_brand', keyword: this.$route.query.w, filters: this.paramJSON})
        }
      },
      listenPage: function (nPage) {
        this.nowPage = nPage
        this.reloadList()
      },
      listenSort: function (sortType) {
        this.sorting = sortType
        this.reloadList()
      },
      listenPriceFilter: function (filterType) {
        if (filterType.goods_minpricermb) {
          this.filter.goods_minpricermb = filterType.goods_minpricermb
        } else {
          delete this.filter.goods_minpricermb
        }
        if (filterType.goods_maxpricermb) {
          this.filter.goods_maxpricermb = filterType.goods_maxpricermb
        } else {
          delete this.filter.goods_maxpricermb
        }
        this.reloadList()
      },
      listenKindFilter: function (kindarr) {
        this.nowPage = 1
        if (kindarr.length === 0) {
          delete this.filter.goods_kindId
          delete this.paramJSON.goods_kindid
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
        } else {
          this.filter.goods_kindId = kindarr
          this.paramJSON.goods_kindid = kindarr
          this.reloadBrand()
          this.reloadList()
        }
      },
      listenBrandFilter: function (brandarr) {
        this.nowPage = 1
        if (brandarr.length === 0) {
          delete this.filter.goods_brandId
          delete this.paramJSON.goods_brandid
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
        } else {
          this.filter.goods_brandId = brandarr
          this.paramJSON.goods_brandid = brandarr
          this.reloadKind()
          this.reloadList()
        }
      }
    }
  }
</script>