mall4pc-bbc/pages/list.vue

<template>
  <div class="list search-list">
    <!-- 分类筛选 -->
    <CategroySidebar ref="categroySidebar"/>
    <!-- /分类筛选 -->
    <div class="content">
      <div class="crumbs" v-if="categoryId">
        <nuxt-link to="/" class="item-a">{{$t('commonHead.home')}}</nuxt-link>
        <span class="arrow" v-if="categoryId">></span>
        <template v-for="cate in parentCategoryList">
          <span @click="changeCategory(0, cate.categoryId)" class="item-a" v-if="categoryParentId === cate.categoryId">{{
            cate.categoryName
          }}</span>
        </template>
        <!-- <span class="arrow" v-if="categoryId">></span> -->
        <template v-for="cate in categoryList">
          <span  class="item-span" v-if="categoryId === cate.categoryId">
            <span class="arrow">></span>
            {{ cate.categoryName }}
          </span>
        </template>
        <span class="arrow" v-if="keyword">></span>
        <template>
          <span class="item-span" v-if="keyword">{{ keyword }}</span>
          <span class="item-span" v-if="keyword">{{ keyword }}</span>
        </template>
      </div>
      <div class="crumbs" v-else>
        <nuxt-link to="/" class="item-a">{{$t('commonHead.home')}}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span center" v-if="keyword">{{ keyword }}</span>
        <span class="item-span" v-if="st == 0">{{$t('commonHead.productList')}}</span>
        <span class="item-span" v-if="st == 1">{{$t('commonHead.newProducts')}}</span>
        <span class="item-span" v-if="st == 4">{{$t('commonHead.couponPooling')}}</span>
      </div>
      <div class="goods-sort" v-if="!st">
        <div class="sort-con categorys">
          <div class="name">{{$t('classification')}}：</div>
          <div class="group">
            <span
              class="item"
              :class="[{ active: !categoryParentId }]"
              @click="changeCategory(-1, 0)"
              >{{$t('all')}}</span
            >
            <!-- <span class="item">热卖推荐</span> -->
            <span
              v-for="cate in parentCategoryList"
              :key="cate.categoryId"
              :class="[
                'item',
                categoryParentId == cate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(0, cate.categoryId)"
              >{{ cate.categoryName }}</span
            >
          </div>
        </div>
        <div
          class="sort-con categorys"
          v-show="categoryList.length && categoryParentId"
        >
          <div class="name">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div class="group">
            <span
              v-for="subCate in categoryList"
              :key="subCate.categoryId"
              :class="[
                'item',
                categoryId == subCate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(1, subCate.categoryId)"
              >{{ subCate.categoryName }}</span
            >
          </div>
        </div>
        <div
          class="sort-con categorys"
          v-show="thCategoryList.length && categoryId"
        >
          <div class="name">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div class="group">
            <span
              v-for="threeCate in thCategoryList"
              :key="threeCate.categoryId"
              :class="[
                'item',
                thCategoryId == threeCate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(2, threeCate.categoryId)"
              >{{ threeCate.categoryName }}</span
            >
          </div>
        </div>

        <!-- <div class="sort-con distribution">
          <div class="name">配送：</div>
          <div class="group">
            <span class="item active">全部</span>
            <span class="item">包邮</span>
            <span class="item">货到付款</span>
          </div>
        </div>-->
        <div class="sort-con sorts">
          <div class="name">{{$t('sort')}}：</div>
          <div class="group">
            <span
              :class="['item', sortType == '' ? 'active' : '']"
              @click="onStsTap('')"
              >{{$t('default')}}</span
            >
            <span
              :class="['item', sortType == 'sales' ? 'active' : '']"
              @click="onStsTap('sales')"
            >
              {{$t('sales')}}
              <i class="arrow-up" v-if="sort == 3 && sortType == 'sales'"></i>
              <i class="arrow-down" v-if="sort == 2 && sortType == 'sales'"></i>
            </span>
            <span
              :class="['item', sortType == 'price' ? 'active' : '']"
              @click="onStsTap('price')"
            >
              {{$t('price')}}
              <i class="arrow-up" v-if="sort == 5 && sortType == 'price'"></i>
              <i class="arrow-down" v-if="sort == 4 && sortType == 'price'"></i>
            </span>
            <!-- <span :class="['item',sts==3?'active':'']" @click="onStsTap(3)">收藏</span> -->
          </div>
        </div>
      </div>
      <div class="goods-list">
        <!-- 全部 -->
        <ProdItem :pale-list="dataList" :list-type="1" :page-type="1" />
        <!-- 页码 -->
        <pagination
          v-model="current"
          :pages="pages"
          @changePage="getSearchProdPage"
        ></pagination>
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script>

import ProdItem from '~/components/prod-item'
import CategroySidebar from '~/components/categroy-sidebar'
import Pagination from '~/components/pagination'

export default {
  components: {
    ProdItem,
    CategroySidebar,
    Pagination
  },
  watchQuery: ['pn', 'cpid', 'cid', 'thCid', 'sort', 'ob', 'c', 'st', 'lang'],
  data () {
    return {
      st: 0,
      categoryParentId: null,
      thCategoryId: null,
      categoryId: null,
      goCurrent: this.$route.query.current,
      dataList: [],
      pages: 1, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      keyword: '', // 搜索关键字
      discountId: this.$route.query.discountId,  // 限时特惠id
      couponId: this.$route.query.couponId,   // 优惠券id
      sort: 0,
      lang: this.$route.query.lang,
      sortType: (!this.$route.query.sort || this.$route.query.sort==0) ? '' : (this.$route.query.sort == 4 || this.$route.query.sort == 5) ? 'price' : 'sales'
    }
  },
  computed: {
    parentCategoryList () {
      return this.$store.state.categoryHorizontal.parentCategoryList
    },
    categoryList () {
      return this.$store.state.categoryHorizontal.categoryList
    },
    thCategoryList () {
      return this.$store.state.categoryHorizontal.thCategoryList
    }
  },
  /**
   * st: 搜索方式 空为默认 1新品推荐 2
   * pn: 商品名称
   * cpid: 上级分类id
   * cid: 分类id
   * sort: 根据默认(0)/销量(1)/价格(2)排序
   * ob: 0正序 1倒序
   * c: 当前第几页
   * @param query
   */
  async asyncData ({ app, query }) {
    var param = {
      st: parseInt(query.st) || 0,
      current: parseInt(query.c) || 1,
      size: 12, // 每页显示多少条
    }
    var data = {}
    var url = ''
    if (param.st === 1) {
      url = '/prod/lastedProdPage'
      param = Object.assign({
        prodName: query.pn || '',
        categoryParentId: '',
        categoryId: '',
        thCategoryId: '',
        sort: 0,  // 这里的sort并不是排序 是 状态
        orderBy: 0, // 这里的orderby 才是状态
        current: 1, // 这里是页码
      }, param)

      data = Object.assign({}, param)
    } else if (param.st === 4) {
      url = '/coupon/prodListByCouponId'
      param = Object.assign({
        couponId: query.couponId,
        prodName: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        sort: parseInt(query.sort) || 0,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''
      data.categoryId = parseInt(query.cid) || ''
      data.thCategoryId = parseInt(query.thCid) || ''

    } else if (query.cpid && !query.cid && !query.thCid) {
      // url = '/search/searchProdPage'
      url = '/search/page'
      param = Object.assign({
        keyword: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        primaryCategoryId: query.cpid,
        sort: parseInt(query.sort) || null,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true,
        isActive: 1 // 过滤掉活动商品
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''

    } else if (query.cpid && query.cid && !query.thCid) {
      // url = '/search/searchProdPage'
      url = '/search/page'
      param = Object.assign({
        keyword: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        secondaryCategoryId: query.cid,
        sort: parseInt(query.sort) || null,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true,
        isActive: 1 // 过滤掉活动商品
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''
      data.categoryId = parseInt(query.cid) || ''

    } else {
      // url = '/search/searchProdPage'
      url = '/search/page'
      param = Object.assign({
        keyword: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        sort: parseInt(query.sort) || null,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true,
        isActive: 1 // 过滤掉活动商品
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''
      data.categoryId = parseInt(query.cid) || ''
      data.thCategoryId = parseInt(query.thCid) || ''
    }
    return await app.$axios.get(url, {
      params: param
    }).then((result) => {
      data.pages = result.data.pages
      data.dataList = result.data.records
      data.dataList = (query.st == 1 || query.st == 4) ? result.data.records : result.data.records[0].products
      return data
    })
  },

  watch: {
    categoryParentId () {
      this.getCategory(1)
    },
    categoryId () {
      this.getCategory(2)
    },

    $route (to, from) {
      if(this.$route.query.st==1){
        document.title = this.$t('commonHead.newProducts')
      }
      if(this.$route.query.st==0){
        document.title = this.$t('commonHead.productList')
      }
    },
    lang () {
      this.$refs.categroySidebar.getCategoryList()
    }

  },

  mounted () {
    if (this.st === 1) {
      document.title = this.$t('commonHead.newProducts')
    } else {
      document.title = this.$t('commonHead.productList')
    }
    if (!this.thCategoryId) {
      this.getCategory(0)
    } else {
      this.getCategory(0)
      this.getCategory(1)
      this.getCategory(2)
    }
    // if (this.categoryParentId && this.categoryId) {
    //   this.getCategory(1)
    //   this.getCategory(2)
    // }
    // this.getCategory(0)
    // // if (this.discountId) {
    // //   document.title = this.$t('commonHead.productList')
    // // }
  },
  methods: {
    /**
     * 获取分类
     * @param level 0 一级分类 1 二级分类
     * @param needSearch 是否需要搜索
     */
    getCategory (level) {
      var categoryParentId = 0
      if (level === 1) {
        categoryParentId = this.categoryParentId
      } else if (level === 2) {
        categoryParentId = this.categoryId
      }
      this.$axios.get('/category/categoryInfo?parentId=' + categoryParentId).then(({ data }) => {
        if (level === 1) {
          this.$store.commit('categoryHorizontal/initCategoryList', data)
        } else if (level == 2) { // 三级分类
          this.$store.commit('categoryHorizontal/initThCategoryList', data)
        } else {
          this.$store.commit('categoryHorizontal/initParentCategoryList', data)
        }
      })
    },

    /**
     * 改变分类
     * @param level 0 一级分类 1 二级分类 2三级分类
     * @param categoryId 分类id
     */
    changeCategory (level, categoryId) {
      if (level === -1) {
        this.categoryParentId = ''
        this.categoryId = ''
        this.$store.commit('categoryHorizontal/reomveCategoryList')
      } else if (level === 0) {
        this.categoryParentId = categoryId
        this.prodName = ''
        this.$store.commit('categoryHorizontal/reomveThCategoryList')
        this.getCategory(1)
      } else if (level === 1) {
        this.categoryId = categoryId
        this.getCategory(2)
      } else if (level === 2) {
        // this.categoryParentId = this.categoryId
        this.thCategoryId = categoryId
      }
      // if (level === -1 || level === 2) {
      //   this.getSearchProdPage(1)
      // }
      if (level === -1) {
        this.getSearchProdPage()
      }
      if (level === 0) {
        this.getSearchProdPage(1)
      }
      if (level === 1) {
        this.getSearchProdPage(1,2)
      }
      if (level === 2) {
        this.getSearchProdPage(1,2,3)
      }
    },
    /**
     * 请求商品列表
     */
    getSearchProdPage (current, cid, thcid) {
      if (current == undefined) {
        this.$router.push({
          path: '/list',
          query: {
            st: this.st,
          }
        })
      } else {
        this.$router.push({
          path: '/list',
          query: {
            st: this.st,
            couponId: this.couponId || '',
            cpid: this.categoryParentId || '',
            c: current,
            pn: this.prodName || this.keyword || '',
            cid: cid?this.categoryId:'',
            thCid: (cid && thcid)?this.thCategoryId:'',
            sort: this.sort || 0,
            ob: this.orderBy || 0
          }
        })
      }
    },
    /**
     * 切换排序
     * @param {Number/String} sortType 排序类型
     */
    onStsTap (sortType) {
      this.sortType = sortType
      if (!sortType) {
        this.sort = 0
      } else if (sortType=='sales') {
        this.sort = this.sort == 3 ? 2 : 3
      } else if (sortType=='price') {
        this.sort = this.sort == 5 ? 4 : 5
      }
      this.current = 1;
      this.getSearchProdPage(this.current)
      if (this.categoryParentId && this.categoryId && this.thCategoryId ) {
        this.getSearchProdPage(1,2,3)
      }
      else if (this.categoryParentId && this.categoryId) {
        this.getSearchProdPage(1,2)
      }
      else {
        this.getSearchProdPage(1)
      }
    }
  },
}
</script>

<style scoped src='~/assets/css/list.css'></style>
<style scoped>
.center{
  vertical-align: top ;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 1000px;
}
.el-pagination {
  text-align: right;
  padding: 0 30px;
  padding-top: 20px;
}
.pagination .el-pagination button,
.el-pagination span:not([class*='suffix']) {
  padding: 0 8px !important;
}
.pagination .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #fff !important;
}
.pagination .el-pagination__editor.el-input .el-input__inner {
  width: 30px !important;
}
</style>