390 lines
12 KiB
Vue
390 lines
12 KiB
Vue
<template>
|
||
<div class="products_center">
|
||
<!--标签栏 -->
|
||
<ProductsTabsItem :title="9" :product-tabs="productTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||
<!-- 分类栏-->
|
||
<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.stop="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.stop="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.stop="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-show="showNull">
|
||
暂时没有数据！
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||
import Pagination from "@/components/Pagination";
|
||
import PicturesBox from "@/components/PicturesBox";
|
||
import {getGoodsCategory, getGoodsList, getPublicData} from "../../api";
|
||
|
||
export default {
|
||
name: "index",
|
||
metaInfo() {
|
||
return {
|
||
title: "产品中心 | " + localStorage.getItem("corporate_name")
|
||
};
|
||
},
|
||
components: {PicturesBox, Pagination, ProductsTabsItem},
|
||
data() {
|
||
return {
|
||
showNull: false,
|
||
showPagination: true,
|
||
classifyList: [],
|
||
spaceList: [],
|
||
styleList: [],
|
||
pageSize: 12,
|
||
total: 0,
|
||
imgList: [],
|
||
classIndex: "",
|
||
productTabs: []
|
||
};
|
||
},
|
||
watch: {
|
||
$route(to) {
|
||
//点击产品中心的一级分类切换
|
||
if (to.query.menu !== undefined && to.query.classify === undefined && to.query.style === undefined && to.query.space === undefined) {
|
||
console.log("点击产品中心的一级分类切换");
|
||
//改变二级分类
|
||
for (let i = 0; i < this.productTabs.length; i++) {
|
||
if (this.productTabs[i].id == to.query.menu) {
|
||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||
}
|
||
}
|
||
this.getCategory(to.query.menu);
|
||
//获取产品列表
|
||
this.getList(to.query.menu, 1, this.pageSize);
|
||
}
|
||
if (to.query.classify == 0) {
|
||
if (to.query.style == "全部") {
|
||
this.getList(to.query.menu, 1, this.pageSize, 0, to.query.space);
|
||
if (to.query.space == "全部") {
|
||
this.getList(to.query.menu, 1, this.pageSize, 0, 0);
|
||
}
|
||
} else if (to.query.space == "全部") {
|
||
this.getList(to.query.menu, 1, this.pageSize, to.query.style, 0);
|
||
if (to.query.style == "全部") {
|
||
this.getList(to.query.menu, 1, this.pageSize, 0, 0);
|
||
}
|
||
} else {
|
||
this.getList(to.query.menu, 1, this.pageSize, to.query.style, to.query.space);
|
||
}
|
||
} else if (to.query.classify != 0) {
|
||
if (to.query.style == "全部") {
|
||
this.getList(to.query.classify, 1, this.pageSize, 0, to.query.space);
|
||
if (to.query.space == "全部") {
|
||
this.getList(to.query.classify, 1, this.pageSize, 0, 0);
|
||
}
|
||
} else if (to.query.space == "全部") {
|
||
this.getList(to.query.classify, 1, this.pageSize, to.query.style, 0);
|
||
if (to.query.style == "全部") {
|
||
this.getList(to.query.classify, 1, this.pageSize, 0, 0);
|
||
}
|
||
} else {
|
||
this.getList(to.query.classify, 1, this.pageSize, to.query.style, to.query.space);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//点击分类,字体颜色变红
|
||
beforeUpdate() {
|
||
if (this.$route.query.menu) {
|
||
for (let i = 0; i < this.productTabs.length; i++) {
|
||
if (this.productTabs[i].id == this.$route.query.menu) {
|
||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||
}
|
||
}
|
||
}
|
||
if (this.$route.query.classify) {
|
||
for (let i = 0; i < this.classifyList.length; i++) {
|
||
const red = document.getElementById("classify_" + i);
|
||
if (this.classifyList[i].id == this.$route.query.classify) {
|
||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||
} else {
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < this.classifyList.length; i++) {
|
||
const red = document.getElementById("classify_" + i);
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
if (this.$route.query.space || this.$route.query.menuTitle) {
|
||
for (let i = 0; i < this.spaceList.length; i++) {
|
||
const red = document.getElementById("space_" + i);
|
||
if (this.spaceList[i].title == this.$route.query.space) {
|
||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||
} else if (this.spaceList[i].title == this.$route.query.menuTitle) {
|
||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||
this.getList(this.$route.query.menu, 1, this.pageSize, "", this.$route.query.menuTitle);
|
||
} else {
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < this.spaceList.length; i++) {
|
||
const red = document.getElementById("space_" + i);
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
if (this.$route.query.style || this.$route.query.menuTitle) {
|
||
for (let i = 0; i < this.styleList.length; i++) {
|
||
const red = document.getElementById("style_" + i);
|
||
if (this.styleList[i].title == this.$route.query.style) {
|
||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||
} else if (this.styleList[i].title == this.$route.query.menuTitle) {
|
||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||
this.getList(this.$route.query.menu, 1, this.pageSize, this.$route.query.menuTitle, "");
|
||
} else {
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < this.styleList.length; i++) {
|
||
const red = document.getElementById("style_" + i);
|
||
red.style = "color: #000!important;";
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
//获取一级分类和空间和风格数据
|
||
getPublicData().then(res => {
|
||
this.productTabs = res.data.goodscategory_list;
|
||
this.spaceList = [
|
||
{
|
||
title: "全部"
|
||
},
|
||
...res.data.space_list
|
||
];
|
||
this.styleList = [
|
||
{
|
||
title: "全部"
|
||
},
|
||
...res.data.style_list
|
||
];
|
||
});
|
||
|
||
//点击了空间风格,之后重新加载, 内容不变
|
||
if (this.$route.query.menu) {
|
||
this.getCategory(this.$route.query.menu);
|
||
this.getList(this.$route.query.menu, 1, this.pageSize, this.$route.query.style, this.$route.query.space);
|
||
} else if (this.$route.query.menu == undefined) {
|
||
//进入页面时, 获取第一个列表的类别
|
||
this.getCategory(1);
|
||
this.getList(1, 1, this.pageSize);
|
||
}
|
||
},
|
||
methods: {
|
||
//获取二级分类
|
||
getCategory(category) {
|
||
getGoodsCategory(category).then(res => {
|
||
this.classifyList = [
|
||
{
|
||
id: 0,
|
||
name: "全部"
|
||
},
|
||
...res.data.categorylist
|
||
];
|
||
});
|
||
},
|
||
//获取产品列表
|
||
getList(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;
|
||
} else {
|
||
this.showNull = false;
|
||
this.showPagination = true;
|
||
}
|
||
});
|
||
},
|
||
//点击一级分类切换数据及切换不同二级分类
|
||
handleClick(tab) {
|
||
let index = parseInt(tab.index) + 1;
|
||
this.classIndex = index;
|
||
this.$router.push({
|
||
path: "/products_center",
|
||
query: {
|
||
menu: index
|
||
}
|
||
});
|
||
this.getCategory(index);
|
||
this.getGoodsList(index, 1, this.pageSize);
|
||
},
|
||
//产品分页
|
||
handleChangePage(value) {
|
||
this.getGoodsList(this.classIndex, value, this.pageSize);
|
||
},
|
||
//点击二级分类,筛选产品数据
|
||
changeClassify(item) {
|
||
let menu = this.$route.query.menu;
|
||
let space = this.$route.query.space;
|
||
let style = this.$route.query.style;
|
||
if (menu === undefined) {
|
||
const menuOne = 1;
|
||
menu = menuOne;
|
||
}
|
||
if (space === undefined || space === "全部") {
|
||
const menuOne = 0;
|
||
space = menuOne;
|
||
}
|
||
if (style === undefined || style === "全部") {
|
||
const menuOne = 0;
|
||
style = menuOne;
|
||
}
|
||
this.$router.push({
|
||
path: `/products_center?menu=${menu}&space=${space}&style=${style}`,
|
||
query: {
|
||
classify: item.id
|
||
}
|
||
});
|
||
},
|
||
//点击空间分类,筛选产品数据
|
||
changeSpace(item) {
|
||
let menu = this.$route.query.menu;
|
||
let style = this.$route.query.style;
|
||
let classify = this.$route.query.classify;
|
||
if (menu === undefined) {
|
||
const menuOne = 1;
|
||
menu = menuOne;
|
||
}
|
||
if (style === undefined) {
|
||
const menuOne = 0;
|
||
style = menuOne;
|
||
}
|
||
if (classify === undefined) {
|
||
const menuOne = 0;
|
||
classify = menuOne;
|
||
}
|
||
this.$router.push({
|
||
path: `/products_center?menu=${menu}&classify=${classify}&style=${style}`,
|
||
query: {
|
||
space: item.title
|
||
}
|
||
});
|
||
},
|
||
//点击风格分类,筛选产品数据
|
||
changeStyle(item) {
|
||
let menu = this.$route.query.menu;
|
||
let space = this.$route.query.space;
|
||
let classify = this.$route.query.classify;
|
||
if (menu === undefined) {
|
||
const menuOne = 1;
|
||
menu = menuOne;
|
||
}
|
||
if (space === undefined) {
|
||
const menuOne = 0;
|
||
space = menuOne;
|
||
}
|
||
if (classify === undefined) {
|
||
const menuOne = 0;
|
||
classify = menuOne;
|
||
}
|
||
this.$router.push({
|
||
path: `/products_center?menu=${menu}&classify=${classify}&space=${space}`,
|
||
query: {
|
||
style: item.title
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
* {
|
||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||
}
|
||
|
||
.becomeRed {
|
||
color: #f00;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.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>
|