diff --git a/src/router/index.js b/src/router/index.js index 7707cd5..17b9bc7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -47,6 +47,12 @@ const routes = [ name: 'products_center', component: () => import('../views/productsCenter/index') }, + { + path: '/products_center/:menu/:menuTitle', + name: 'products_center', + props:true, + component: () => import('../views/productsCenter/index') + }, { path: '/products_detail', name: 'products_detail', diff --git a/src/views/productsCenter/index.vue b/src/views/productsCenter/index.vue index fc06188..6d233cc 100644 --- a/src/views/productsCenter/index.vue +++ b/src/views/productsCenter/index.vue @@ -38,7 +38,7 @@ -
+
暂时没有数据!
@@ -69,7 +69,7 @@ export default { }, watch: { $route(to) { - if (to.query.menu) { + if (to.query.menu!==undefined&&to.query.classify===undefined&&to.query.style===undefined&&to.query.space===undefined) { for (let i = 0; i < this.productTabs.length; i++) { if (this.productTabs[i].id == to.query.menu) { this.$refs.ProductsTabsItem.activeName = i + ""; @@ -88,6 +88,12 @@ export default { this.imgList = res.data.list; }); } + + if(to.query.classify!==0&&to.query.classify!==undefined){ + this.getGoodsList(to.query.classify, 1, this.pageSize, to.query.style, to.query.space); + } else if (to.query.classify == 0) { + this.getGoodsList(to.query.menu, 1, this.pageSize, to.query.style, to.query.space); + } } }, beforeUpdate() { @@ -98,34 +104,59 @@ export default { } } } - if (this.$route.query.menuTitle) { + if (this.$route.query.classify) { for (let i = 0; i < this.classifyList.length; i++) { const red = document.getElementById("classify_" + i); - if (this.classifyList[i].name == this.$route.query.menuTitle) { + 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) { for (let i = 0; i < this.spaceList.length; i++) { const red = document.getElementById("space_" + i); - if (this.spaceList[i].title == this.$route.query.menuTitle) { + if (this.spaceList[i].title == this.$route.query.space) { red.style = "color: #f00!important;text-decoration: underline!important;"; } 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) { for (let i = 0; i < this.styleList.length; i++) { const red = document.getElementById("style_" + i); - if (this.styleList[i].title == this.$route.query.menuTitle) { + if (this.styleList[i].title == this.$route.query.style) { red.style = "color: #f00!important;text-decoration: underline!important;"; } 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() { + if(this.$route.query.menu&&this.$route.query.space){ + getGoodsCategory(this.$route.query.menu).then(res => { + this.classifyList = res.data.categorylist; + }); + this.getGoodsList(this.classIndex, 1, this.pageSize, "", this.$route.query.space); + } getPublicData().then(res => { this.productTabs = res.data.goodscategory_list; }); @@ -134,18 +165,18 @@ export default { this.spaceList = res.data.space_list; this.styleList = res.data.style_list; }); - if (this.$route.query.menu) { + if (this.$route.query.menu&&this.$route.query.space==undefined) { //进入页面时, 获取第一个列表的类别 getGoodsCategory(this.$route.query.menu).then(res => { this.classifyList = res.data.categorylist; }); this.getGoodsList(this.$route.query.menu, 1, this.pageSize); - } else { + }else if (this.$route.query.menu==undefined&&this.$route.query.space==undefined){ //进入页面时, 获取第一个列表的类别 getGoodsCategory(1).then(res => { this.classifyList = res.data.categorylist; }); - this.getGoodsList(0, 1, this.pageSize); + this.getGoodsList(1, 1, this.pageSize); } }, methods: { @@ -160,9 +191,12 @@ export default { }).then(res => { this.total = res.data.count; this.imgList = res.data.list; - if (res.data.list.length === 0) { + if (res.data.list.length == 0) { this.showNull = true; this.showPagination = false; + }else { + this.showNull = false; + this.showPagination = true; } }); }, @@ -170,6 +204,12 @@ export default { handleClick(tab) { let index = parseInt(tab.index) + 1; this.classIndex = index; + this.$router.push({ + path: "/products_center", + query: { + menu: index + } + }); getGoodsCategory(index).then(res => { this.classifyList = res.data.categorylist; }); @@ -181,33 +221,126 @@ export default { }, //点击二级分类,筛选产品数据 changeClassify(item) { - this.$router.push({ - path: "/products_center", - query: { - menuTitle: item.name - } - }); - this.getGoodsList(item.id, 1, this.pageSize); + 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){ + const menuOne=0 + space=menuOne + }if(style===undefined){ + const menuOne=0 + style=menuOne + } + // if(space==undefined&&style==undefined){ + // this.$router.push({ + // path: '/products_center', + // query: { + // classify: item.name + // } + // }); + // }else if(style==undefined){ + // this.$router.push({ + // path: `/products_center?menu=${menu}&space=${space}`, + // query: { + // classify: item.name + // } + // }); + // }else if(space==undefined){ + // this.$router.push({ + // path: `/products_center?menu=${menu}&style=${style}`, + // query: { + // classify: item.name + // } + // }); + // }else { + this.$router.push({ + path: `/products_center?menu=${menu}&space=${space}&style=${style}`, + query: { + classify: item.id + } + }); + // } + // this.getGoodsList(item.id, 1, this.pageSize); }, //点击空间分类,筛选产品数据 changeSpace(item) { - this.$router.push({ - path: "/products_center", - query: { - menuTitle: item.title - } - }); - this.getGoodsList(this.classIndex, 1, this.pageSize, "", item.title); + 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 + } + // if(style!==undefined){ + // this.$router.push({ + // path: `/products_center?menu=${menu}&style=${style}`, + // query: { + // space: item.title + // } + // }); + // }else if(style==undefined&&classify==undefined){ + // this.$router.push({ + // path: `/products_center?menu=${menu}`, + // query: { + // space: item.title + // } + // }); + // }else if(style!==undefined&&space!==undefined){ + this.$router.push({ + path: `/products_center?menu=${menu}&classify=${classify}&style=${style}`, + query: { + space: item.title + } + }); + // } + // this.getGoodsList(this.classIndex, 1, this.pageSize, "", 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", + path: `/products_center?menu=${menu}&classify=${classify}&space=${space}`, query: { - menuTitle: item.title + style: item.title } }); - this.getGoodsList(this.classIndex, 1, this.pageSize, item.title, ""); + // if(space!==undefined){ + // this.$router.push({ + // path: `/products_center?menu=${menu}&space=${space}`, + // query: { + // style: item.title + // } + // }); + // }else { + // this.$router.push({ + // path: `/products_center?menu=${menu}`, + // query: { + // style: item.title + // } + // }); + // } + // this.getGoodsList(this.classIndex, 1, this.pageSize, item.title, ""); } } };