clay
/
ceramic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: clay:1a4e811672a1e04f15b5e158e67af33b7c21f15a
Branches Tags
clay:master
clay:dj
..
compare: clay:1028f801d878b4f6647dd0cf23aec6e4946878ef
Branches Tags
clay:dj
clay:master

No commits in common. "1a4e811672a1e04f15b5e158e67af33b7c21f15a" and "1028f801d878b4f6647dd0cf23aec6e4946878ef" have entirely different histories.
1a4e811672 ... 1028f801d8

18 changed files with 282 additions and 452 deletions
Show Stats Expand all files Collapse all files

1
package.json
View File

@ -20,7 +20,6 @@
"script-ext-html-webpack-plugin": "^2.1.5", "script-ext-html-webpack-plugin": "^2.1.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-i18n": "^8.26.7", "vue-i18n": "^8.26.7",
"vue-meta": "^2.4.0",
"vue-router": "^3.2.0" "vue-router": "^3.2.0"
}, },
"devDependencies": { "devDependencies": {

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">--> <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
<title>蒙彼利瓷砖 | 广东蒙彼利陶瓷有限公司</title> <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
<script> <script>
fnResize(); fnResize();
window.onresize = function() { window.onresize = function() {

BIN
src/assets/index/b1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

24
src/components/FastFindProducts.vue
View File

@ -97,23 +97,13 @@ export default {
} }
}, },
handleChangeMenu(childrenItem) { handleChangeMenu(childrenItem) {
if(childrenItem.id){ this.$router.push({
this.$router.push({ path: "/products_center", //跳转的路由
path: "/products_center", //跳转的路由 query: { //跳转路由的参数
query: { //跳转路由的参数 menu: childrenItem.id,
menu: childrenItem.id, menuTitle:childrenItem.title//前面的type是参数的名称
menuTitle:childrenItem.title//前面的type是参数的名称 }
} });
});
}else {
this.$router.push({
path: "/products_center", //跳转的路由
query: { //跳转路由的参数
menu: 1,
menuTitle:childrenItem.title//前面的type是参数的名称
}
});
}
} }
} }
}; };

65
src/components/NewsCenter.vue
View File

@ -1,15 +1,10 @@
<template> <template>
<div class="newsCenter"> <div class="newsCenter">
<div class="news_bg"> <a href="/about_us">
<div class="news_title"> <div class="news_bg">
<div>MENGBILI</div> <img src="../assets/index/b1.jpg" alt="">
<div>CERAMIC WORLD</div>
<div>蒙彼利陶瓷 一 艺术无处不在</div>
<div class="case_more">
<a href="/about_us">READ MORE</a>
</div>
</div> </div>
</div> </a>
<div class="newsWidth"> <div class="newsWidth">
<div class="news_left"> <div class="news_left">
<div class="items"> <div class="items">
@ -88,20 +83,20 @@ export default {
this.itemList = res.data.list; this.itemList = res.data.list;
}); });
}, },
methods: { methods:{
handleChangeMenu(item) { handleChangeMenu(item){
this.$router.push({ this.$router.push({
path: "/news", //跳转的路由 path: "/news", //跳转的路由
query: { //跳转路由的参数 query: { //跳转路由的参数
menu: item.id menu: item.id,
} }
}); });
}, },
handleToDetail(item) { handleToDetail(item){
this.$router.push({ this.$router.push({
path: "/news", //跳转的路由 path: "/news", //跳转的路由
query: { //跳转路由的参数 query: { //跳转路由的参数
newsId: item.id menuDetail: item.id,
} }
}); });
} }
@ -126,46 +121,10 @@ export default {
min-width: 1300px; min-width: 1300px;
.news_bg { .news_bg {
//min-width: 1300px; img {
background: #ffffff url('../assets/index/cbg0.jpg') no-repeat center 0;
background-size: cover;
height: 380px;
.news_title {
position: relative;
display: block;
width: 100%; width: 100%;
float: left; height: 380px;
padding: 100px 0 80px; object-fit: cover;
text-align: center;
> div:first-child {
font-size: 40px;
color: #ffffff;
font-weight: 700;
}
> div:nth-child(2) {
font-size: 40px;
color: #ffffff;
font-weight: 700;
}
> div:nth-child(3) {
font-size: 18px;
color: #eceaea;
}
.case_more {
margin: 30px 0 0;
a {
color: #ffffff;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
font-size: 14px;
border: 1px solid #ffffff;
}
}
} }
} }

6
src/components/PicturesBox.vue
View File

@ -85,12 +85,6 @@ export default {
} }
}); });
} else if (this.type == 11) { } else if (this.type == 11) {
this.$router.push({
path: "/news", //跳转的路由
query: { //跳转路由的参数
newsId: item.id //前面的type是参数的名称
}
});
this.$emit("getNewsIdClick", item.id); this.$emit("getNewsIdClick", item.id);
} else if (this.type == 22) { } else if (this.type == 22) {
this.showMask = true; this.showMask = true;

2
src/main.js
View File

@ -5,7 +5,6 @@ import router from './router'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css'; import 'element-ui/lib/theme-chalk/display.css';
import VueMeta from 'vue-meta'
//要添加的代码 //要添加的代码
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
@ -20,7 +19,6 @@ router.beforeEach((to, from, next) => {
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(VueMeta)
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {

6
src/router/index.js
View File

@ -47,6 +47,12 @@ const routes = [
name: 'products_center', name: 'products_center',
component: () => import('../views/productsCenter/index') component: () => import('../views/productsCenter/index')
}, },
{
path: '/products_center/:menu/:menuTitle',
name: 'products_center',
props:true,
component: () => import('../views/productsCenter/index')
},
{ {
path: '/products_detail', path: '/products_detail',
name: 'products_detail', name: 'products_detail',

44
src/views/aboutUs/index.vue
View File

@ -24,17 +24,11 @@ import {getArticleInfo} from "@/api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title: this.aboutName+" | " + localStorage.getItem("corporate_name")
};
},
components: {ProductsTabsItem}, components: {ProductsTabsItem},
data() { data() {
return { return {
aboutTabs: [], aboutTabs: [],
pList: [], pList: []
aboutName:''
}; };
}, },
watch:{ watch:{
@ -44,7 +38,10 @@ export default {
this.$refs.ProductsTabsItem.activeName= i+''; this.$refs.ProductsTabsItem.activeName= i+'';
} }
} }
this.getInfo(to.query.menu) getArticleInfo(to.query.menu).then(res => {
this.aboutTabs = res.data.articlelist;
this.pList = res.data.articleinfo.content;
});
} }
}, },
beforeUpdate() { beforeUpdate() {
@ -57,33 +54,26 @@ export default {
mounted() { mounted() {
if(this.$route.query.menu){ if(this.$route.query.menu){
//获取关于我们的数据 //获取关于我们的数据
this.getInfo(this.$route.query.menu) getArticleInfo(this.$route.query.menu).then(res => {
this.aboutTabs = res.data.articlelist;
this.pList = res.data.articleinfo.content;
});
}else { }else {
this.getInfo(1) getArticleInfo(1).then(res => {
this.aboutTabs = res.data.articlelist;
this.pList = res.data.articleinfo.content;
});
} }
}, },
methods: { methods: {
//封装文章详情请求
getInfo(infoId){
getArticleInfo(infoId).then(res => {
this.aboutTabs = res.data.articlelist;
this.pList = res.data.articleinfo.content;
if(infoId===1){
this.aboutName=this.aboutTabs[0].title
}
});
},
handleClick(tab) { handleClick(tab) {
for (let i = 0; i < this.aboutTabs.length; i++) { for (let i = 0; i < this.aboutTabs.length; i++) {
console.log('this.aboutTabs[i].id',this.aboutTabs[i].id);
if (this.aboutTabs[i].title === tab._props.label) { if (this.aboutTabs[i].title === tab._props.label) {
this.$router.push({ getArticleInfo(this.aboutTabs[i].id).then(res => {
path: "/about_us", this.aboutTabs = res.data.articlelist;
query: { this.pList = res.data.articleinfo.content;
menu: this.aboutTabs[i].id,
}
}); });
this.aboutName=this.aboutTabs[i].title
this.getInfo(this.aboutTabs[i].id)
} }
} }
} }

7
src/views/attractAndJoin/index.vue
View File

@ -25,15 +25,10 @@
<script> <script>
import ProductsTabsItem from "@/components/ProductsTabsItem"; import ProductsTabsItem from "@/components/ProductsTabsItem";
import {getArticleInfo} from "@/api"; import {getArticleInfo, getPublicData} from "@/api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title:'招商加盟 | '+localStorage.getItem('corporate_name')
};
},
components: {ProductsTabsItem}, components: {ProductsTabsItem},
data() { data() {
return { return {

5
src/views/contactUs/index.vue
View File

@ -28,11 +28,6 @@ import {getPublicData} from "@/api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title:'联系我们 | '+localStorage.getItem('corporate_name')
};
},
components: {ProductsTabsItem}, components: {ProductsTabsItem},
data() { data() {
return { return {

18
src/views/header/index.vue
View File

@ -4,7 +4,7 @@
<div class="upHeaderBox"> <div class="upHeaderBox">
<div class="up_header"> <div class="up_header">
<span class="up_left"> <span class="up_left">
蒙彼利瓷砖 —— 拒绝千篇一律，艺术无处不在 艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
</span> </span>
<span class="up_right"> <span class="up_right">
{{ corporate_name }} {{ corporate_name }}
@ -14,7 +14,8 @@
<div class="down_header"> <div class="down_header">
<div class="down_left"> <div class="down_left">
<a href="/"> <a href="/">
<img :src="logo" alt=""/> <el-image
:src="logo"></el-image>
</a> </a>
</div> </div>
<div class="down_right"> <div class="down_right">
@ -129,7 +130,6 @@ export default {
}, },
mounted() { mounted() {
getPublicData().then(res => { getPublicData().then(res => {
localStorage.setItem('corporate_name',res.data.corporate_name)
this.logo = res.data.logo; this.logo = res.data.logo;
this.corporate_name = res.data.corporate_name; this.corporate_name = res.data.corporate_name;
this.navList[1].children = res.data.aboutus; this.navList[1].children = res.data.aboutus;
@ -250,11 +250,12 @@ export default {
.down_left { .down_left {
position: absolute; position: absolute;
float: left; float: left;
height: 85px;
img { /deep/ .el-image {
width: 100%; .el-image__inner {
height: 100%; width: 323px !important;
height: 85px !important;
}
} }
> a:hover:after { > a:hover:after {
@ -273,9 +274,8 @@ export default {
> .nav { > .nav {
position: relative; position: relative;
display: inline; display: inline;
float: left;
width: 100px; width: 100px;
//margin-right: 10px; float: left;
> .nav_item { > .nav_item {
color: #fff; color: #fff;

17
src/views/imageDisplay/index.vue
View File

@ -24,11 +24,6 @@ import {getArticleList} from "@/api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title: "形象展示 | " + localStorage.getItem("corporate_name")
};
},
components: {ProductsTabsItem, PicturesBox,Pagination}, components: {ProductsTabsItem, PicturesBox,Pagination},
data() { data() {
return { return {
@ -91,20 +86,8 @@ export default {
this.classIndex = parseInt(tab.index); this.classIndex = parseInt(tab.index);
if (tab.index == 0) { if (tab.index == 0) {
this.getArticleList(2, this.page, this.limit); this.getArticleList(2, this.page, this.limit);
this.$router.push({
path: "/image_display",
query: {
menu: 2
}
});
} else if (tab.index == 1) { } else if (tab.index == 1) {
this.getArticleList(8, this.page, this.limit); this.getArticleList(8, this.page, this.limit);
this.$router.push({
path: "/image_display",
query: {
menu: 8
}
});
} }
}, },
//分页 //分页

5
src/views/index/index.vue
View File

@ -21,11 +21,6 @@ import NewsCenter from "@/components/NewsCenter";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title:'蒙彼利瓷砖 | '+localStorage.getItem('corporate_name')
};
},
components: {NewsCenter, AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel} components: {NewsCenter, AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
} }
</script> </script>

56
src/views/news/detail.vue
View File

@ -15,20 +15,15 @@
</div> </div>
<div class="shares"> <div class="shares">
分享到： 分享到：
<span @click="shareToMicroblog()"> <span @click="shareToMicroblog()">
<img src="@/assets/weibo.png" alt=""/> <img src="@/assets/weibo.png" alt=""/>
</span> </span>
<span @click="shareToQQRom()"> <span @click="shareToQQRom()">
<img src="@/assets/QQKJ.png" alt=""/> <img src="@/assets/QQKJ.png" alt=""/>
</span> </span>
</div> </div>
</div> </div>
<div class="detail_content"> <div class="html_text" v-html="htmlStr"></div>
<div class="title">
{{ detail_title }}
</div>
<div class="html_text" v-html="htmlStr"></div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -40,31 +35,24 @@ import {getArticleInfo} from "@/api";
export default { export default {
name: "detail", name: "detail",
metaInfo() {
return {
title: this.detail_title + " | " + localStorage.getItem("corporate_name")
};
},
props: { props: {
newsId: Number, newsId: Number,
classIndex: Number classIndex: Number
}, },
data() { data() {
return { return {
tabs_title: "公司新闻", tabs_title: '公司新闻',
htmlStr: "", htmlStr: '',
detail_title: "" }
};
}, },
mounted() { mounted() {
if (this.classIndex == 1) { if(this.classIndex==1){
this.tabs_title = "行业动态"; this.tabs_title='行业动态'
} else if (this.classIndex == 2) { }else if(this.classIndex==2){
this.tabs_title = "瓷砖百科"; this.tabs_title='瓷砖百科'
} }
getArticleInfo(this.newsId).then(res => { getArticleInfo(this.newsId).then(res => {
this.detail_title = res.data.articleinfo.title; this.htmlStr=res.data.articleinfo.content
this.htmlStr = res.data.articleinfo.content;
}); });
}, },
methods: { methods: {
@ -93,29 +81,26 @@ export default {
// "&summary=" + // "&summary=" +
// this.sysInfo // this.sysInfo
); );
} },
} }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/deep/ .el-breadcrumb { /deep/.el-breadcrumb {
margin-top: 2px; margin-top: 2px;
} }
/deep/.el-breadcrumb__inner.is-link:hover {
/deep/ .el-breadcrumb__inner.is-link:hover { color: #333!important;
color: #333 !important;
text-decoration: underline; text-decoration: underline;
} }
.news_detail { .news_detail {
padding: 40px 0; padding: 40px 0;
.detail { .detail {
.html_text { .html_text{
padding: 45px; padding: 45px;
} }
.detail_top { .detail_top {
width: 100%; width: 100%;
height: 20px; height: 20px;
@ -140,13 +125,6 @@ export default {
} }
} }
.detail_content {
.title {
padding: 30px 0;
font-size: 25px;
text-align: center;
}
}
} }
} }
</style> </style>

29
src/views/news/index.vue
View File

@ -29,11 +29,6 @@ import {getArticleList} from "@/api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title:'新闻资讯 | '+localStorage.getItem('corporate_name')
};
},
components: {Detail, PicturesBox, Pagination, ProductsTabsItem}, components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
data() { data() {
return { return {
@ -76,11 +71,6 @@ export default {
this.$refs.ProductsTabsItem.activeName = i + ""; this.$refs.ProductsTabsItem.activeName = i + "";
} }
} }
if(this.$route.query.newsId!==undefined){
this.newsId = this.$route.query.newsId;
this.showDetail = true;
this.showImage = false;
}
}, },
mounted() { mounted() {
if(this.$route.query.menuDetail){ if(this.$route.query.menuDetail){
@ -120,30 +110,11 @@ export default {
this.classIndex = parseInt(tab.index); this.classIndex = parseInt(tab.index);
if (tab.index == 0) { if (tab.index == 0) {
this.getArticleList(5, this.page, this.limit); this.getArticleList(5, this.page, this.limit);
this.$router.push({
path: "/news",
query: {
menu: 5
}
});
} else if (tab.index == 1) { } else if (tab.index == 1) {
this.getArticleList(6, this.page, this.limit); this.getArticleList(6, this.page, this.limit);
this.$router.push({
path: "/news",
query: {
menu: 6
}
});
} else if (tab.index == 2) { } else if (tab.index == 2) {
this.getArticleList(7, this.page, this.limit); this.getArticleList(7, this.page, this.limit);
this.$router.push({
path: "/news",
query: {
menu: 7
}
});
} }
}, },
//新闻分页 //新闻分页
handleChangePage(value) { handleChangePage(value) {

148
src/views/productsCenter/detail.vue
View File

@ -10,12 +10,12 @@
</div> </div>
<div class="img_right"> <div class="img_right">
<div class="title"> <div class="title">
产品名称：{{ detailList.name }} 产品名称：{{detailList.name}}
</div> </div>
<div class="space_style"> <div class="space_style">
<p>产品分类：{{ classifyName }}</p> <p>产品分类：{{classifyName}}</p>
<p>适用空间：{{ detailList.space }}</p> <p>适用空间：{{detailList.space}}</p>
<p>所属风格：{{ detailList.style }}</p> <p>所属风格：{{detailList.style}}</p>
</div> </div>
<div class="img_part"> <div class="img_part">
<ul> <ul>
@ -29,7 +29,7 @@
<span @click="shareToMicroblog()"> <span @click="shareToMicroblog()">
<img src="@/assets/weibo.png" alt=""/> <img src="@/assets/weibo.png" alt=""/>
</span> </span>
<span @click="shareToQQRom()"> <span @click="shareToQQRom()">
<img src="@/assets/QQKJ.png" alt=""/> <img src="@/assets/QQKJ.png" alt=""/>
</span> </span>
</div> </div>
@ -44,10 +44,10 @@
<div class="same_title">同类产品推荐</div> <div class="same_title">同类产品推荐</div>
<div> <div>
<ul> <ul>
<li v-for="(item,index) in goodsList" :key="index" @click="handleClickSameProducts(item)"> <li v-for="(item,index) in goodsList" :key="index">
<div class="sameItem"> <div class="sameItem">
<img :src="item.image" alt=""/> <img :src="item.image" alt=""/>
<div class="info">{{ item.name }}</div> <div class="info">{{item.name}}</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -63,107 +63,79 @@
</template> </template>
<script> <script>
import {getGoodsInfo, getGoodsList} from "@/api"; import ProductsTabsItem from "@/components/ProductsTabsItem";
import {getGoodsInfo, getGoodsList, getPublicData} from "@/api";
export default { export default {
name: "detail", name: "detail",
metaInfo() {
return {
title: this.detailList.name + " | " + localStorage.getItem("corporate_name")
};
},
data() { data() {
return { return {
showNull: false, showNull:false,
mainSrc: "", mainSrc: '',
detailList: [], detailList:[],
imgList: [], imgList: [],
classifyName: "", classifyName:'',
goodsList: [], goodsList:[],
allGoodList: [] allGoodList:[]
}; }
}, },
mounted() { mounted() {
this.getGoodsInfo(this.$route.query.classid); this.getGoodsInfo(this.$route.query.classid)
this.getGoodsList(); this.getGoodsList()
}, },
methods: { methods: {
//点击同类产品推荐
handleClickSameProducts(item) {
this.$router.push({
path: "/products_detail", //跳转的路由
query: { //跳转路由的参数
classid: item.id
}
});
this.getGoodsInfo(item.id);
},
//获取产品列表 //获取产品列表
getGoodsList() { getGoodsList(){
getGoodsList({ getGoodsList({
classid: 1, classid:1,
page: 1, page:1,
limit: 50 limit:50,
}).then(res => { }).then(res => {
this.allGoodList = res.data.list; this.allGoodList=res.data.list
}); });
}, },
//获取产品详情 //获取产品详情
getGoodsInfo(classid) { getGoodsInfo(classid){
getGoodsInfo(classid).then(res => { getGoodsInfo(classid).then(res => {
if (res.data.goods_lists) { if(res.data.goods_lists){
this.goodsList = res.data.goods_lists; this.goodsList=res.data.goods_lists
} }
if (res.data.goods_lists.length == 0) { if(res.data.goods_lists.length==0){
this.showNull = true; this.showNull=true
} else {
this.showNull = false;
} }
if (res.data.info) { if(res.data.info){
this.detailList = res.data.info; this.detailList = res.data.info
this.classifyName = res.data.info.goods_category.name; this.classifyName = res.data.info.goods_category.name
} }
if (res.data.img_list) { if(res.data.img_list){
this.imgList = res.data.img_list; this.imgList = res.data.img_list
if (this.imgList[0]) { if(this.imgList[0]){
this.mainSrc = this.imgList[0].ori_image; this.mainSrc=this.imgList[0].ori_image
} }
} }
}); });
}, },
//上一款产品 //上一款产品
prevProduct(id) { prevProduct(id){
const middleId = id - 1; const middleId=id-1
this.$router.push({
path: "/products_detail", //跳转的路由
query: { //跳转路由的参数
classid: middleId
}
});
for (let i = 0; i < this.allGoodList.length; i++) { for (let i = 0; i < this.allGoodList.length; i++) {
if (this.allGoodList[i].id === middleId) { if(this.allGoodList[i].id===middleId){
this.getGoodsInfo(middleId); this.getGoodsInfo(middleId)
} }
} }
}, },
//下一款产品 //下一款产品
nextProduct(id) { nextProduct(id){
const middleId = id + 1; const middleId=id+1
this.$router.push({
path: "/products_detail", //跳转的路由
query: { //跳转路由的参数
classid: middleId
}
});
for (let i = 0; i < this.allGoodList.length; i++) { for (let i = 0; i < this.allGoodList.length; i++) {
if (this.allGoodList[i].id === middleId) { if(this.allGoodList[i].id===middleId){
this.getGoodsInfo(middleId); this.getGoodsInfo(middleId)
} }
} }
}, },
//点击小图切换主览图 //点击小图切换主览图
changeMainImg(index) { changeMainImg(index) {
this.mainSrc = this.imgList[index].ori_image; this.mainSrc = this.imgList[index].ori_image
}, },
/** /**
* 分享到微博 * 分享到微博
@ -190,23 +162,21 @@ export default {
// "&summary=" + // "&summary=" +
// this.sysInfo // this.sysInfo
); );
} },
} }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* { * {
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif; font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
} }
.nullData{
.nullData {
display: block; display: block;
height: 150px; height: 150px;
line-height: 150px; line-height: 150px;
text-align: center; text-align: center;
} }
/deep/ .el-button:focus, .el-button:hover { /deep/ .el-button:focus, .el-button:hover {
color: #333; color: #333;
border-color: #ddd; border-color: #ddd;
@ -300,9 +270,8 @@ export default {
.shares { .shares {
display: flex; display: flex;
line-height: 35px; line-height: 35px;
span{
span { img{
img {
cursor: pointer; cursor: pointer;
} }
} }
@ -311,11 +280,10 @@ export default {
} }
} }
.sameProducts { .sameProducts{
padding: 50px 0; padding: 50px 0;
background-color: #f4f4f4; background-color: #f4f4f4;
.same_title{
.same_title {
display: inline; display: inline;
width: 100%; width: 100%;
float: left; float: left;
@ -324,26 +292,22 @@ export default {
font-size: 18px; font-size: 18px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
ul{
ul { li{
li {
display: inline; display: inline;
width: 20%; width: 20%;
float: left; float: left;
cursor: pointer; cursor: pointer;
.sameItem{
.sameItem {
display: block; display: block;
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
background-color: #fff; background-color: #fff;
img{
img {
width: 100%; width: 100%;
} }
.info{
.info {
padding: 5px 0 5px 0; padding: 5px 0 5px 0;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;

299
src/views/productsCenter/index.vue
View File

@ -48,15 +48,10 @@
import ProductsTabsItem from "@/components/ProductsTabsItem"; import ProductsTabsItem from "@/components/ProductsTabsItem";
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
import PicturesBox from "@/components/PicturesBox"; import PicturesBox from "@/components/PicturesBox";
import {getGoodsCategory, getGoodsList, getPublicData} from "../../api"; import {getPublicData, getGoodsCategory, getGoodsList} from "../../api";
export default { export default {
name: "index", name: "index",
metaInfo() {
return {
title: "产品中心 | " + localStorage.getItem("corporate_name")
};
},
components: {PicturesBox, Pagination, ProductsTabsItem}, components: {PicturesBox, Pagination, ProductsTabsItem},
data() { data() {
return { return {
@ -74,51 +69,33 @@ export default {
}, },
watch: { watch: {
$route(to) { $route(to) {
//点击产品中心的一级分类切换 if (to.query.menu!==undefined&&to.query.classify===undefined&&to.query.style===undefined&&to.query.space===undefined) {
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++) { for (let i = 0; i < this.productTabs.length; i++) {
if (this.productTabs[i].id == to.query.menu) { if (this.productTabs[i].id == to.query.menu) {
this.$refs.ProductsTabsItem.activeName = i + ""; this.$refs.ProductsTabsItem.activeName = i + "";
} }
} }
this.getCategory(to.query.menu); getGoodsCategory(to.query.menu).then(res => {
this.classifyList = res.data.categorylist;
});
//获取产品列表 //获取产品列表
this.getList(to.query.menu, 1, this.pageSize); getGoodsList({
classid: to.query.menu,
page: 1,
limit: this.pageSize
}).then(res => {
this.total = res.data.count;
this.imgList = res.data.list;
});
} }
if (to.query.classify == 0) {
if (to.query.style == "全部") { if(to.query.classify!==0&&to.query.classify!==undefined){
this.getList(to.query.menu, 1, this.pageSize, 0, to.query.space); this.getGoodsList(to.query.classify, 1, this.pageSize, to.query.style, to.query.space);
if (to.query.space == "全部") { } else if (to.query.classify == 0) {
this.getList(to.query.menu, 1, this.pageSize, 0, 0); this.getGoodsList(to.query.menu, 1, this.pageSize, to.query.style, to.query.space);
}
} 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() { beforeUpdate() {
if (this.$route.query.menu) { if (this.$route.query.menu) {
for (let i = 0; i < this.productTabs.length; i++) { for (let i = 0; i < this.productTabs.length; i++) {
@ -136,43 +113,37 @@ export default {
red.style = "color: #000!important;"; red.style = "color: #000!important;";
} }
} }
} else { }else {
for (let i = 0; i < this.classifyList.length; i++) { for (let i = 0; i < this.classifyList.length; i++) {
const red = document.getElementById("classify_" + i); const red = document.getElementById("classify_" + i);
red.style = "color: #000!important;"; red.style = "color: #000!important;";
} }
} }
if (this.$route.query.space || this.$route.query.menuTitle) { if (this.$route.query.space) {
for (let i = 0; i < this.spaceList.length; i++) { for (let i = 0; i < this.spaceList.length; i++) {
const red = document.getElementById("space_" + i); const red = document.getElementById("space_" + i);
if (this.spaceList[i].title == this.$route.query.space) { if (this.spaceList[i].title == this.$route.query.space) {
red.style = "color: #f00!important;text-decoration: underline!important;"; 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 { } else {
red.style = "color: #000!important;"; red.style = "color: #000!important;";
} }
} }
} else { }else {
for (let i = 0; i < this.spaceList.length; i++) { for (let i = 0; i < this.spaceList.length; i++) {
const red = document.getElementById("space_" + i); const red = document.getElementById("space_" + i);
red.style = "color: #000!important;"; red.style = "color: #000!important;";
} }
} }
if (this.$route.query.style || this.$route.query.menuTitle) { if (this.$route.query.style) {
for (let i = 0; i < this.styleList.length; i++) { for (let i = 0; i < this.styleList.length; i++) {
const red = document.getElementById("style_" + i); const red = document.getElementById("style_" + i);
if (this.styleList[i].title == this.$route.query.style) { if (this.styleList[i].title == this.$route.query.style) {
red.style = "color: #f00!important;text-decoration: underline!important;"; 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 { } else {
red.style = "color: #000!important;"; red.style = "color: #000!important;";
} }
} }
} else { }else {
for (let i = 0; i < this.styleList.length; i++) { for (let i = 0; i < this.styleList.length; i++) {
const red = document.getElementById("style_" + i); const red = document.getElementById("style_" + i);
red.style = "color: #000!important;"; red.style = "color: #000!important;";
@ -180,48 +151,37 @@ export default {
} }
}, },
mounted() { 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 => { getPublicData().then(res => {
this.productTabs = res.data.goodscategory_list; this.productTabs = res.data.goodscategory_list;
this.spaceList = [
{
title: "全部"
},
...res.data.space_list
];
this.styleList = [
{
title: "全部"
},
...res.data.style_list
];
}); });
//获取空间和风格数据
//点击了空间风格,之后重新加载, 内容不变 getPublicData().then(res => {
if (this.$route.query.menu) { this.spaceList = res.data.space_list;
this.getCategory(this.$route.query.menu); this.styleList = res.data.style_list;
this.getList(this.$route.query.menu, 1, this.pageSize, this.$route.query.style, this.$route.query.space); });
} else if (this.$route.query.menu == undefined) { if (this.$route.query.menu&&this.$route.query.space==undefined) {
//进入页面时, 获取第一个列表的类别 //进入页面时, 获取第一个列表的类别
this.getCategory(1); getGoodsCategory(this.$route.query.menu).then(res => {
this.getList(1, 1, this.pageSize); this.classifyList = res.data.categorylist;
});
this.getGoodsList(this.$route.query.menu, 1, this.pageSize);
}else if (this.$route.query.menu==undefined&&this.$route.query.space==undefined){
//进入页面时, 获取第一个列表的类别
getGoodsCategory(1).then(res => {
this.classifyList = res.data.categorylist;
});
this.getGoodsList(1, 1, this.pageSize);
} }
}, },
methods: { methods: {
//获取二级分类
getCategory(category) {
getGoodsCategory(category).then(res => {
this.classifyList = [
{
id: 0,
name: "全部"
},
...res.data.categorylist
];
});
},
//获取产品列表 //获取产品列表
getList(classid, page, limit, stylename, spacename) { getGoodsList(classid, page, limit, stylename, spacename) {
getGoodsList({ getGoodsList({
classid: classid, classid: classid,
page: page, page: page,
@ -234,7 +194,7 @@ export default {
if (res.data.list.length == 0) { if (res.data.list.length == 0) {
this.showNull = true; this.showNull = true;
this.showPagination = false; this.showPagination = false;
} else { }else {
this.showNull = false; this.showNull = false;
this.showPagination = true; this.showPagination = true;
} }
@ -250,7 +210,9 @@ export default {
menu: index menu: index
} }
}); });
this.getCategory(index); getGoodsCategory(index).then(res => {
this.classifyList = res.data.categorylist;
});
this.getGoodsList(index, 1, this.pageSize); this.getGoodsList(index, 1, this.pageSize);
}, },
//产品分页 //产品分页
@ -259,68 +221,103 @@ export default {
}, },
//点击二级分类,筛选产品数据 //点击二级分类,筛选产品数据
changeClassify(item) { changeClassify(item) {
let menu = this.$route.query.menu; let menu=this.$route.query.menu
let space = this.$route.query.space; let space=this.$route.query.space
let style = this.$route.query.style; let style=this.$route.query.style
if (menu === undefined) { if(menu===undefined){
const menuOne = 1; const menuOne=1
menu = menuOne; menu=menuOne
}if(space===undefined){
const menuOne=0
space=menuOne
}if(style===undefined){
const menuOne=0
style=menuOne
} }
if (space === undefined || space === "全部") { // if(space==undefined&&style==undefined){
const menuOne = 0; // this.$router.push({
space = menuOne; // path: '/products_center',
} // query: {
if (style === undefined || style === "全部") { // classify: item.name
const menuOne = 0; // }
style = menuOne; // });
} // }else if(style==undefined){
this.$router.push({ // this.$router.push({
path: `/products_center?menu=${menu}&space=${space}&style=${style}`, // path: `/products_center?menu=${menu}&space=${space}`,
query: { // query: {
classify: item.id // 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) { changeSpace(item) {
let menu = this.$route.query.menu; let menu=this.$route.query.menu
let style = this.$route.query.style; let style=this.$route.query.style
let classify = this.$route.query.classify; let classify=this.$route.query.classify
if (menu === undefined) { if(menu===undefined){
const menuOne = 1; const menuOne=1
menu = menuOne; menu=menuOne
}if(style===undefined){
const menuOne=0
style=menuOne
}if(classify===undefined){
const menuOne=0
classify=menuOne
} }
if (style === undefined) { // if(style!==undefined){
const menuOne = 0; // this.$router.push({
style = menuOne; // path: `/products_center?menu=${menu}&style=${style}`,
} // query: {
if (classify === undefined) { // space: item.title
const menuOne = 0; // }
classify = menuOne; // });
} // }else if(style==undefined&&classify==undefined){
this.$router.push({ // this.$router.push({
path: `/products_center?menu=${menu}&classify=${classify}&style=${style}`, // path: `/products_center?menu=${menu}`,
query: { // query: {
space: item.title // 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) { changeStyle(item) {
let menu = this.$route.query.menu; let menu=this.$route.query.menu
let space = this.$route.query.space; let space=this.$route.query.space
let classify = this.$route.query.classify; let classify=this.$route.query.classify
if (menu === undefined) { if(menu===undefined){
const menuOne = 1; const menuOne=1
menu = menuOne; menu=menuOne
} } if(space===undefined){
if (space === undefined) { const menuOne=0
const menuOne = 0; space=menuOne
space = menuOne; } if(classify===undefined){
} const menuOne=0
if (classify === undefined) { classify=menuOne
const menuOne = 0;
classify = menuOne;
} }
this.$router.push({ this.$router.push({
path: `/products_center?menu=${menu}&classify=${classify}&space=${space}`, path: `/products_center?menu=${menu}&classify=${classify}&space=${space}`,
@ -328,6 +325,22 @@ export default {
style: item.title style: 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, "");
} }
} }
}; };