ceramic/src/views/productsCenter/index.vue

<template>
  <div class="products_center">
    <!--标签栏 -->
    <ProductsTabsItem :title="9" :fatherMethod="handleClick"/>
    <!-- 分类栏-->
    <div class="product_types">
      <el-row type="flex">
        <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
        <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
          <div class="spaceList">
            <strong>分类：</strong>
            <ul>
              <li v-for="(item,index) in classifyList" @click="changeClassify(item,index)" :id="'classify_'+index">{{ item.name }}</li>
            </ul>
          </div>
          <div class="spaceList">
            <strong>空间：</strong>
            <ul>
              <li v-for="(item,index) in spaceList" @click="changeSpace(item,index)" :id="'space_'+index">{{ item.title }}</li>
            </ul>
          </div>
          <div class="spaceList">
            <strong>风格：</strong>
            <ul>
              <li v-for="(item,index) in styleList" @click="changeStyle(item,index)" :id="'style_'+index">{{ item.title }}</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--图片栏-->
    <PicturesBox :image-list="imgList" :type="33"/>
    <Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage" v-if="showPagination"/>
    <div class="nullData" v-if="showNull">
      暂时没有数据！
    </div>
  </div>
</template>

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";
import Pagination from "@/components/Pagination";
import PicturesBox from "@/components/PicturesBox";
import {getPublicData, getGoodsCategory, getGoodsList} from "../../api";

export default {
  name: "index",
  components: {PicturesBox, Pagination, ProductsTabsItem},
  data() {
    return {
      showNull:false,
      showPagination:true,
      classifyList: [],
      spaceList: [],
      styleList: [],
      pageSize:12,
      total:0,
      imgList: [],
      classIndex:''
    }
  },
  mounted() {
    //获取空间和风格数据
    getPublicData().then(res => {
      this.spaceList = res.data.space_list
      this.styleList = res.data.style_list
    });
    //进入页面时, 获取第一个列表的类别
    getGoodsCategory(1).then(res => {
      this.classifyList = res.data.categorylist
    });
    //获取产品列表
    getGoodsList({
      classid:0,
      page:1,
      limit:this.pageSize,
    }).then(res => {
      this.total=res.data.count
      this.imgList=res.data.list
    });
  },
  methods: {
    //获取产品列表
    getGoodsList(classid,page,limit,stylename,spacename){
      getGoodsList({
        classid:classid,
        page:page,
        limit:limit,
        stylename:stylename,
        spacename:spacename,
      }).then(res => {
        this.total=res.data.count
        this.imgList=res.data.list
        if(res.data.list.length===0){
          this.showNull=true
          this.showPagination=false
        }
      });
    },
    //点击一级分类切换数据及切换不同二级分类
    handleClick(tab) {
      let index = parseInt(tab.index) + 1
      this.classIndex=index
      getGoodsCategory(index).then(res => {
        this.classifyList = res.data.categorylist
      });
      this.getGoodsList(index,1,this.pageSize)
    },
    //产品分页
    handleChangePage(value){
      this.getGoodsList(this.classIndex,value,this.pageSize)
    },
    //点击二级分类,筛选产品数据
    changeClassify(item,index){
      this.getGoodsList(item.id,1,this.pageSize)
      document.getElementById('classify_'+index).style="color: #f00;text-decoration: underline;"
    },
    //点击空间分类,筛选产品数据
    changeSpace(item,index){
      this.getGoodsList(this.classIndex,1,this.pageSize,'',item.title)
      document.getElementById('space_'+index).style="color: #f00;text-decoration: underline;"
    },
    //点击风格分类,筛选产品数据
    changeStyle(item,index){
      this.getGoodsList(this.classIndex,1,this.pageSize,item.title,'')
      document.getElementById('style_'+index).style="color: #f00;text-decoration: underline;"
    }
  }
}
</script>

<style scoped lang="scss">
* {
  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}
.nullData{
  display: block;
  height: 300px;
  line-height: 300px;
  text-align: center;
}
.products_center {
  min-width: 1300px;

  .product_types {
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    background-color: #fff;

    .spaceList {
      padding: 6px 0;
      border-bottom: 1px dotted #e9e9e9;
      display: flex;
      line-height: 36px;
      height: 36px;
      font-size: 14px;

      strong {
        font-weight: bold;
      }

      ul {
        display: flex;

        li {
          margin-right: 15px;
          cursor: pointer;
        }

        li:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

</style>