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>-->
  <brand-detail :supBrandObj="goods.brand" v-if="searchType == 'brand' && goods.brand"></brand-detail>
  <div class="search-result-type" v-if="!goods.content">
    <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 == 'kind' || searchType == 'store' || (searchType == 'brand' && goods.brand)">
    <supplier-list :resultType="resultType"></supplier-list>
  </template>
  <template v-if="searchType == 'brand' && !goods.brand">
    <brand-list></brand-list>
  </template>
  <page :total="currentCount" :page-size="pageSize"
        :current="nowPage" @childEvent="listenPage"></page>
  <div class="empty" v-if="currentCount === 0">
    <img src="/images/all/empty-cart.png" alt="">
    <span>暂无搜索结果</span>
  </div>
</div>
</template>
<script>
  import { GoodList, ResultTitle, ForwardGoodsList, SupplierList, BrandList } from '~components/search'
  import { BrandDetail } from '~components/product'
  import Page from '~components/common/page/pageComponent.vue'
//  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, keyword: route.query.w, page: 1, type: route.query.type || 'component'})
      ])
    },
    components: {
      ResultTitle,
      GoodList,
      ForwardGoodsList,
      SupplierList,
      Page,
      BrandList,
      BrandDetail
//      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 ? this.goods.stock.total : 0
      },
      // 期货数量
      futureTotal () {
        return this.goods.futures ? this.goods.futures.total : 0
      },
      // 当前分页数
      currentCount () {
        if (this.goods.content) {
          return this.goods.total
        } else {
          return this.resultType === 'current' ? this.stockTotal : this.futureTotal
        }
      },
      // 总数
      count () {
        if (this.goods.content) {
          return this.goods.total
        } else {
          return this.stockTotal + this.futureTotal
        }
      }
    },
    methods: {
      initParams: function () {
        this.resultType = 'current'
        this.nowPage = 1
      },
      reloadAll: function () {
        this.filter = {}
        this.sorting = {}
        this.paramJSON = {}
        this.reloadList()
//        this.reloadKind()
//        this.reloadBrand()
//        this.reloadStoreType()
//        this.reloadCrname()
      },
      reloadList: function () {
        let params = {
          count: this.pageSize,
          keyword: this.$route.query.w,
          page: this.nowPage,
          type: this.searchType
        }
        if (this.searchType === 'component') {
          params.filter = this.filter
          params.sorting = this.sorting
        }
        return this.$store.dispatch('searchData/searchForListNew', params)
      },
//      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
        return 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) {
        if (this.nowPage > 1) {
          this.listenPage(1).then(() => {
            this.resultType = resultType
          })
        } else {
          this.resultType = resultType
        }
//        this.listenPage(1).then(() => {
//          this.resultType = resultType
//        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  #searchResult {
    margin-bottom: 36px;
    .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;
        }
      }
    }
    .empty {
      text-align: center;
      height: 200px;
      line-height: 200px;
      border: 1px solid #e8e8e8;
      margin-bottom: 10px;
      span {
        color: #999;
        margin-left: 10px;
      }
    }
  }
</style>