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

<template>
<div class="container" id="searchResult">
  <!--<detail-brand></detail-brand>-->
  <result-title :keyword="key" :page="nowPage" :count="count"></result-title>
  <!--  <kind @kindFilterEvent="listenKindFilter"
          @brandFilterEvent="listenBrandFilter"
          @typeFilterEvent="listenTypeFilter"
          @crnameFilterEvent="listenCrnameFilter"
          @crnameFlagEvent="listenCrnameFlag"
    ></kind>-->
  <div class="search-result-type">
    <span class="inline-block" :class="{active: resultType == 'current'}" @click="setResultType('current')">现货({{stockTotal}}条)</span>
    <span class="inline-block" :class="{active: resultType == 'forward'}" @click="setResultType('forward')">期货({{futureTotal}}条)</span>
  </div>
  <template v-if="searchType == 'component'">
    <good-list v-if="resultType === 'current'"
               @pageEvent="listenPage"
               @sortEvent="listenSort"
               @filterPriceEvent="listenPriceFilter"
               :crname_click_flag="crname_click_flag"
    ></good-list>
    <forward-goods-list v-else></forward-goods-list>
  </template>
  <template v-if="searchType == 'product'">
    123
  </template>
</div>
</template>
<script>
  import { GoodList, ResultTitle, ForwardGoodsList } from '~components/search'
//  import DetailBrand from '~components/search/DetailBrand.vue'
  export default{
    layout: 'main',
    data () {
      return {
        key: this.$route.query.w,
        pageSize: 10,
        nowPage: 1,
        sorting: {},
        filter: {},
        paramJSON: {},
        crname_click_flag: {
          rmb_click_flag: false,
          usd_click_flag: false
        },
        // 现货：current, 期货：forward
        resultType: 'current'
      }
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('searchData/searchForListNew', {count: 10, filter: {}, keyword: route.query.w, page: 1, type: route.query.type || 'component'})
      ])
    },
    components: {
      ResultTitle,
      GoodList,
      ForwardGoodsList
//      DetailBrand
    },
    watch: {
      '$route.query.w': {
        handler: function (val) {
          this.key = val
          this.reloadAll()
        },
        immediate: false
      }
    },
    computed: {
      searchType () {
        return this.$route.query.type || 'component'
      },
      goods () {
        return this.$store.state.searchData.searchList.listNew.data
      },
      stockTotal () {
        return this.goods.stock.total || 0
      },
      futureTotal () {
        return this.goods.futures.total || 0
      },
      count () {
        return this.stockTotal + this.futureTotal
      }
    },
    methods: {
      reloadAll: function () {
        this.filter = {}
        this.sorting = {}
        this.paramJSON = {}
        this.reloadList()
        this.reloadKind()
        this.reloadBrand()
        this.reloadStoreType()
        this.reloadCrname()
      },
      reloadList: function () {
        if (this.sorting === {}) {
          this.sorting = {}
        }
        this.$store.dispatch('searchData/searchForListNew', {count: this.pageSize, filter: this.filter, keyword: this.$route.query.w, page: this.nowPage, sorting: this.sorting, type: this.searchType})
      },
      reloadKind: function () {
        if (!this.filter.goods_kindId) {
          this.$store.dispatch('searchData/searchForKinds', {collectList: 'goods_kind', keyword: this.$route.query.w, paramJSON: this.paramJSON})
        }
      },
      reloadBrand: function () {
        if (!this.filter.goods_brandId) {
          this.$store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: this.$route.query.w, paramJSON: this.paramJSON})
        }
      },
      reloadStoreType: function () {
        if (!this.filter.goods_store_type) {
          this.$store.dispatch('searchData/searchForStoreType', {collectList: 'goods_store_type', keyword: this.$route.query.w, paramJSON: this.paramJSON})
        }
      },
      reloadCrname: function () {
        if (!this.filter.goods_crname) {
          this.$store.dispatch('searchData/searchForCrname', {collectList: 'goods_crname', keyword: this.$route.query.w, paramJSON: 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()
          this.reloadStoreType()
          this.reloadCrname()
        } else {
          this.filter.goods_kindId = kindarr
          this.paramJSON.goods_kindid = kindarr
          this.reloadBrand()
          this.reloadList()
          this.reloadStoreType()
          this.reloadCrname()
        }
      },
      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()
          this.reloadStoreType()
          this.reloadCrname()
        } else {
          this.filter.goods_brandId = brandarr
          this.paramJSON.goods_brandid = brandarr
          this.reloadKind()
          this.reloadList()
          this.reloadStoreType()
          this.reloadCrname()
        }
      },
      listenTypeFilter: function (typearr) {
        this.nowPage = 1
        if (typearr.length === 0) {
          delete this.filter.goods_store_type
          delete this.paramJSON.goods_store_type
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
          this.reloadCrname()
        } else {
          this.filter.goods_store_type = typearr
          this.paramJSON.goods_store_type = typearr
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
          this.reloadCrname()
        }
      },
      listenCrnameFilter: function (crnamearr) {
        this.nowPage = 1
        if (crnamearr.length === 0) {
          delete this.filter.goods_crname
          delete this.paramJSON.goods_crname
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
          this.reloadStoreType()
        } else {
          this.filter.goods_crname = crnamearr
          this.paramJSON.goods_crname = crnamearr
          this.reloadKind()
          this.reloadBrand()
          this.reloadList()
          this.reloadStoreType()
        }
      },
      listenCrnameFlag: function (obj) {
        if (obj.rmb_click_flag && obj.usd_click_flag) {
          this.crname_click_flag.rmb_click_flag = false
          this.crname_click_flag.usd_click_flag = false
        } else {
          this.crname_click_flag.rmb_click_flag = obj.rmb_click_flag
          this.crname_click_flag.usd_click_flag = obj.usd_click_flag
        }
      },
      setResultType: function (resultType) {
        this.resultType = resultType
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search-result-type {
    border-bottom: 2px solid #2e91f0;
    span {
      padding: 12px 37px;
      color: #666;
      font-size: 14px;
      border: 1px solid #ccc;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #2e91f0;
        border-color: #2e91f0;
      }
    }
  }
</style>