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'">
    <supplier-list></supplier-list>
  </template>
</div>
</template>
<script>
  import { GoodList, ResultTitle, ForwardGoodsList, SupplierList } 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,
      SupplierList
//      DetailBrand
    },
    watch: {
      '$route.query': {
        handler: function (val) {
          this.key = val.w
          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>