Compare commits
2 Commits
1028f801d8
...
1a4e811672
| Author | SHA1 | Date |
|---|---|---|
odjbin
|
1a4e811672 | |
dengjie
|
d73a8d6f2e |
|
|
@ -20,6 +20,7 @@
|
|||
"script-ext-html-webpack-plugin": "^2.1.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-i18n": "^8.26.7",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
|
||||
<title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
|
||||
<title>蒙彼利瓷砖 | 广东蒙彼利陶瓷有限公司</title>
|
||||
<script>
|
||||
fnResize();
|
||||
window.onresize = function() {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
|
|
@ -97,13 +97,23 @@ export default {
|
|||
}
|
||||
},
|
||||
handleChangeMenu(childrenItem) {
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: childrenItem.id,
|
||||
menuTitle:childrenItem.title//前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
if(childrenItem.id){
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: childrenItem.id,
|
||||
menuTitle:childrenItem.title//前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
}else {
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: 1,
|
||||
menuTitle:childrenItem.title//前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<template>
|
||||
<div class="newsCenter">
|
||||
<a href="/about_us">
|
||||
<div class="news_bg">
|
||||
<img src="../assets/index/b1.jpg" alt="">
|
||||
<div class="news_bg">
|
||||
<div class="news_title">
|
||||
<div>MENGBILI</div>
|
||||
<div>CERAMIC WORLD</div>
|
||||
<div>蒙彼利陶瓷 一 艺术无处不在</div>
|
||||
<div class="case_more">
|
||||
<a href="/about_us">READ MORE</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="newsWidth">
|
||||
<div class="news_left">
|
||||
<div class="items">
|
||||
|
|
@ -83,20 +88,20 @@ export default {
|
|||
this.itemList = res.data.list;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
handleChangeMenu(item){
|
||||
methods: {
|
||||
handleChangeMenu(item) {
|
||||
this.$router.push({
|
||||
path: "/news", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: item.id,
|
||||
menu: item.id
|
||||
}
|
||||
});
|
||||
},
|
||||
handleToDetail(item){
|
||||
handleToDetail(item) {
|
||||
this.$router.push({
|
||||
path: "/news", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menuDetail: item.id,
|
||||
newsId: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -121,10 +126,46 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
.news_bg {
|
||||
img {
|
||||
//min-width: 1300px;
|
||||
background: #ffffff url('../assets/index/cbg0.jpg') no-repeat center 0;
|
||||
background-size: cover;
|
||||
height: 380px;
|
||||
|
||||
.news_title {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
padding: 100px 0 80px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,6 +85,12 @@ export default {
|
|||
}
|
||||
});
|
||||
} else if (this.type == 11) {
|
||||
this.$router.push({
|
||||
path: "/news", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
newsId: item.id //前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
this.$emit("getNewsIdClick", item.id);
|
||||
} else if (this.type == 22) {
|
||||
this.showMask = true;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import router from './router'
|
|||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
import VueMeta from 'vue-meta'
|
||||
|
||||
//要添加的代码
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
|
@ -19,6 +20,7 @@ router.beforeEach((to, from, next) => {
|
|||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(VueMeta)
|
||||
Vue.use(Vuex)
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
|
|
|
|||
|
|
@ -47,12 +47,6 @@ 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',
|
||||
|
|
|
|||
|
|
@ -24,11 +24,17 @@ import {getArticleInfo} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.aboutName+" | " + localStorage.getItem("corporate_name")
|
||||
};
|
||||
},
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
aboutTabs: [],
|
||||
pList: []
|
||||
pList: [],
|
||||
aboutName:''
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
|
|
@ -38,10 +44,7 @@ export default {
|
|||
this.$refs.ProductsTabsItem.activeName= i+'';
|
||||
}
|
||||
}
|
||||
getArticleInfo(to.query.menu).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
this.getInfo(to.query.menu)
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
|
|
@ -54,26 +57,33 @@ export default {
|
|||
mounted() {
|
||||
if(this.$route.query.menu){
|
||||
//获取关于我们的数据
|
||||
getArticleInfo(this.$route.query.menu).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
this.getInfo(this.$route.query.menu)
|
||||
}else {
|
||||
getArticleInfo(1).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
this.getInfo(1)
|
||||
}
|
||||
},
|
||||
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) {
|
||||
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) {
|
||||
getArticleInfo(this.aboutTabs[i].id).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
this.$router.push({
|
||||
path: "/about_us",
|
||||
query: {
|
||||
menu: this.aboutTabs[i].id,
|
||||
}
|
||||
});
|
||||
this.aboutName=this.aboutTabs[i].title
|
||||
this.getInfo(this.aboutTabs[i].id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,15 @@
|
|||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import {getArticleInfo, getPublicData} from "@/api";
|
||||
import {getArticleInfo} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title:'招商加盟 | '+localStorage.getItem('corporate_name')
|
||||
};
|
||||
},
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,11 @@ import {getPublicData} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title:'联系我们 | '+localStorage.getItem('corporate_name')
|
||||
};
|
||||
},
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="upHeaderBox">
|
||||
<div class="up_header">
|
||||
<span class="up_left">
|
||||
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
蒙彼利瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
</span>
|
||||
<span class="up_right">
|
||||
{{ corporate_name }}
|
||||
|
|
@ -14,8 +14,7 @@
|
|||
<div class="down_header">
|
||||
<div class="down_left">
|
||||
<a href="/">
|
||||
<el-image
|
||||
:src="logo"></el-image>
|
||||
<img :src="logo" alt=""/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="down_right">
|
||||
|
|
@ -130,6 +129,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
getPublicData().then(res => {
|
||||
localStorage.setItem('corporate_name',res.data.corporate_name)
|
||||
this.logo = res.data.logo;
|
||||
this.corporate_name = res.data.corporate_name;
|
||||
this.navList[1].children = res.data.aboutus;
|
||||
|
|
@ -250,12 +250,11 @@ export default {
|
|||
.down_left {
|
||||
position: absolute;
|
||||
float: left;
|
||||
height: 85px;
|
||||
|
||||
/deep/ .el-image {
|
||||
.el-image__inner {
|
||||
width: 323px !important;
|
||||
height: 85px !important;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> a:hover:after {
|
||||
|
|
@ -274,8 +273,9 @@ export default {
|
|||
> .nav {
|
||||
position: relative;
|
||||
display: inline;
|
||||
width: 100px;
|
||||
float: left;
|
||||
width: 100px;
|
||||
//margin-right: 10px;
|
||||
|
||||
> .nav_item {
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,11 @@ import {getArticleList} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "形象展示 | " + localStorage.getItem("corporate_name")
|
||||
};
|
||||
},
|
||||
components: {ProductsTabsItem, PicturesBox,Pagination},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -86,8 +91,20 @@ export default {
|
|||
this.classIndex = parseInt(tab.index);
|
||||
if (tab.index == 0) {
|
||||
this.getArticleList(2, this.page, this.limit);
|
||||
this.$router.push({
|
||||
path: "/image_display",
|
||||
query: {
|
||||
menu: 2
|
||||
}
|
||||
});
|
||||
} else if (tab.index == 1) {
|
||||
this.getArticleList(8, this.page, this.limit);
|
||||
this.$router.push({
|
||||
path: "/image_display",
|
||||
query: {
|
||||
menu: 8
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//分页
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@ import NewsCenter from "@/components/NewsCenter";
|
|||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title:'蒙彼利瓷砖 | '+localStorage.getItem('corporate_name')
|
||||
};
|
||||
},
|
||||
components: {NewsCenter, AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,15 +15,20 @@
|
|||
</div>
|
||||
<div class="shares">
|
||||
分享到：
|
||||
<span @click="shareToMicroblog()">
|
||||
<span @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span @click="shareToQQRom()">
|
||||
<span @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="html_text" v-html="htmlStr"></div>
|
||||
<div class="detail_content">
|
||||
<div class="title">
|
||||
{{ detail_title }}
|
||||
</div>
|
||||
<div class="html_text" v-html="htmlStr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -35,24 +40,31 @@ import {getArticleInfo} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "detail",
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.detail_title + " | " + localStorage.getItem("corporate_name")
|
||||
};
|
||||
},
|
||||
props: {
|
||||
newsId: Number,
|
||||
classIndex: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs_title: '公司新闻',
|
||||
htmlStr: '',
|
||||
}
|
||||
tabs_title: "公司新闻",
|
||||
htmlStr: "",
|
||||
detail_title: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.classIndex==1){
|
||||
this.tabs_title='行业动态'
|
||||
}else if(this.classIndex==2){
|
||||
this.tabs_title='瓷砖百科'
|
||||
if (this.classIndex == 1) {
|
||||
this.tabs_title = "行业动态";
|
||||
} else if (this.classIndex == 2) {
|
||||
this.tabs_title = "瓷砖百科";
|
||||
}
|
||||
getArticleInfo(this.newsId).then(res => {
|
||||
this.htmlStr=res.data.articleinfo.content
|
||||
this.detail_title = res.data.articleinfo.title;
|
||||
this.htmlStr = res.data.articleinfo.content;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -81,26 +93,29 @@ export default {
|
|||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/.el-breadcrumb {
|
||||
/deep/ .el-breadcrumb {
|
||||
margin-top: 2px;
|
||||
}
|
||||
/deep/.el-breadcrumb__inner.is-link:hover {
|
||||
color: #333!important;
|
||||
|
||||
/deep/ .el-breadcrumb__inner.is-link:hover {
|
||||
color: #333 !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news_detail {
|
||||
padding: 40px 0;
|
||||
|
||||
.detail {
|
||||
.html_text{
|
||||
.html_text {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
.detail_top {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
@ -125,6 +140,13 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.detail_content {
|
||||
.title {
|
||||
padding: 30px 0;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@ import {getArticleList} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title:'新闻资讯 | '+localStorage.getItem('corporate_name')
|
||||
};
|
||||
},
|
||||
components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -71,6 +76,11 @@ export default {
|
|||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
if(this.$route.query.newsId!==undefined){
|
||||
this.newsId = this.$route.query.newsId;
|
||||
this.showDetail = true;
|
||||
this.showImage = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.$route.query.menuDetail){
|
||||
|
|
@ -110,11 +120,30 @@ export default {
|
|||
this.classIndex = parseInt(tab.index);
|
||||
if (tab.index == 0) {
|
||||
this.getArticleList(5, this.page, this.limit);
|
||||
this.$router.push({
|
||||
path: "/news",
|
||||
query: {
|
||||
menu: 5
|
||||
}
|
||||
});
|
||||
} else if (tab.index == 1) {
|
||||
this.getArticleList(6, this.page, this.limit);
|
||||
this.$router.push({
|
||||
path: "/news",
|
||||
query: {
|
||||
menu: 6
|
||||
}
|
||||
});
|
||||
} else if (tab.index == 2) {
|
||||
this.getArticleList(7, this.page, this.limit);
|
||||
this.$router.push({
|
||||
path: "/news",
|
||||
query: {
|
||||
menu: 7
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
//新闻分页
|
||||
handleChangePage(value) {
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
</div>
|
||||
<div class="img_right">
|
||||
<div class="title">
|
||||
产品名称：{{detailList.name}}
|
||||
产品名称：{{ detailList.name }}
|
||||
</div>
|
||||
<div class="space_style">
|
||||
<p>产品分类：{{classifyName}}</p>
|
||||
<p>适用空间：{{detailList.space}}</p>
|
||||
<p>所属风格：{{detailList.style}}</p>
|
||||
<p>产品分类：{{ classifyName }}</p>
|
||||
<p>适用空间：{{ detailList.space }}</p>
|
||||
<p>所属风格：{{ detailList.style }}</p>
|
||||
</div>
|
||||
<div class="img_part">
|
||||
<ul>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<span @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span @click="shareToQQRom()">
|
||||
<span @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -44,10 +44,10 @@
|
|||
<div class="same_title">同类产品推荐</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(item,index) in goodsList" :key="index">
|
||||
<li v-for="(item,index) in goodsList" :key="index" @click="handleClickSameProducts(item)">
|
||||
<div class="sameItem">
|
||||
<img :src="item.image" alt=""/>
|
||||
<div class="info">{{item.name}}</div>
|
||||
<div class="info">{{ item.name }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -63,79 +63,107 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import {getGoodsInfo, getGoodsList, getPublicData} from "@/api";
|
||||
import {getGoodsInfo, getGoodsList} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "detail",
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.detailList.name + " | " + localStorage.getItem("corporate_name")
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
mainSrc: '',
|
||||
detailList:[],
|
||||
showNull: false,
|
||||
mainSrc: "",
|
||||
detailList: [],
|
||||
imgList: [],
|
||||
classifyName:'',
|
||||
goodsList:[],
|
||||
allGoodList:[]
|
||||
}
|
||||
classifyName: "",
|
||||
goodsList: [],
|
||||
allGoodList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getGoodsInfo(this.$route.query.classid)
|
||||
this.getGoodsList()
|
||||
this.getGoodsInfo(this.$route.query.classid);
|
||||
this.getGoodsList();
|
||||
},
|
||||
methods: {
|
||||
//点击同类产品推荐
|
||||
handleClickSameProducts(item) {
|
||||
this.$router.push({
|
||||
path: "/products_detail", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
classid: item.id
|
||||
}
|
||||
});
|
||||
this.getGoodsInfo(item.id);
|
||||
},
|
||||
//获取产品列表
|
||||
getGoodsList(){
|
||||
getGoodsList() {
|
||||
getGoodsList({
|
||||
classid:1,
|
||||
page:1,
|
||||
limit:50,
|
||||
classid: 1,
|
||||
page: 1,
|
||||
limit: 50
|
||||
}).then(res => {
|
||||
this.allGoodList=res.data.list
|
||||
this.allGoodList = res.data.list;
|
||||
});
|
||||
},
|
||||
//获取产品详情
|
||||
getGoodsInfo(classid){
|
||||
getGoodsInfo(classid) {
|
||||
getGoodsInfo(classid).then(res => {
|
||||
if(res.data.goods_lists){
|
||||
this.goodsList=res.data.goods_lists
|
||||
if (res.data.goods_lists) {
|
||||
this.goodsList = res.data.goods_lists;
|
||||
}
|
||||
if(res.data.goods_lists.length==0){
|
||||
this.showNull=true
|
||||
if (res.data.goods_lists.length == 0) {
|
||||
this.showNull = true;
|
||||
} else {
|
||||
this.showNull = false;
|
||||
}
|
||||
if(res.data.info){
|
||||
this.detailList = res.data.info
|
||||
this.classifyName = res.data.info.goods_category.name
|
||||
if (res.data.info) {
|
||||
this.detailList = res.data.info;
|
||||
this.classifyName = res.data.info.goods_category.name;
|
||||
}
|
||||
if(res.data.img_list){
|
||||
this.imgList = res.data.img_list
|
||||
if(this.imgList[0]){
|
||||
this.mainSrc=this.imgList[0].ori_image
|
||||
if (res.data.img_list) {
|
||||
this.imgList = res.data.img_list;
|
||||
if (this.imgList[0]) {
|
||||
this.mainSrc = this.imgList[0].ori_image;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//上一款产品
|
||||
prevProduct(id){
|
||||
const middleId=id-1
|
||||
prevProduct(id) {
|
||||
const middleId = id - 1;
|
||||
this.$router.push({
|
||||
path: "/products_detail", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
classid: middleId
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < this.allGoodList.length; i++) {
|
||||
if(this.allGoodList[i].id===middleId){
|
||||
this.getGoodsInfo(middleId)
|
||||
if (this.allGoodList[i].id === middleId) {
|
||||
this.getGoodsInfo(middleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
//下一款产品
|
||||
nextProduct(id){
|
||||
const middleId=id+1
|
||||
nextProduct(id) {
|
||||
const middleId = id + 1;
|
||||
this.$router.push({
|
||||
path: "/products_detail", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
classid: middleId
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < this.allGoodList.length; i++) {
|
||||
if(this.allGoodList[i].id===middleId){
|
||||
this.getGoodsInfo(middleId)
|
||||
if (this.allGoodList[i].id === middleId) {
|
||||
this.getGoodsInfo(middleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
//点击小图切换主览图
|
||||
changeMainImg(index) {
|
||||
this.mainSrc = this.imgList[index].ori_image
|
||||
this.mainSrc = this.imgList[index].ori_image;
|
||||
},
|
||||
/**
|
||||
* 分享到微博
|
||||
|
|
@ -162,21 +190,23 @@ export default {
|
|||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
.nullData{
|
||||
|
||||
.nullData {
|
||||
display: block;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/deep/ .el-button:focus, .el-button:hover {
|
||||
color: #333;
|
||||
border-color: #ddd;
|
||||
|
|
@ -270,8 +300,9 @@ export default {
|
|||
.shares {
|
||||
display: flex;
|
||||
line-height: 35px;
|
||||
span{
|
||||
img{
|
||||
|
||||
span {
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -280,10 +311,11 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.sameProducts{
|
||||
.sameProducts {
|
||||
padding: 50px 0;
|
||||
background-color: #f4f4f4;
|
||||
.same_title{
|
||||
|
||||
.same_title {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
|
@ -292,22 +324,26 @@ export default {
|
|||
font-size: 18px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline;
|
||||
width: 20%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
.sameItem{
|
||||
|
||||
.sameItem {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.info{
|
||||
|
||||
.info {
|
||||
padding: 5px 0 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -48,10 +48,15 @@
|
|||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
import {getPublicData, getGoodsCategory, getGoodsList} from "../../api";
|
||||
import {getGoodsCategory, getGoodsList, getPublicData} from "../../api";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "产品中心 | " + localStorage.getItem("corporate_name")
|
||||
};
|
||||
},
|
||||
components: {PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -69,33 +74,51 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
$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++) {
|
||||
if (this.productTabs[i].id == to.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
getGoodsCategory(to.query.menu).then(res => {
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
this.getCategory(to.query.menu);
|
||||
//获取产品列表
|
||||
getGoodsList({
|
||||
classid: to.query.menu,
|
||||
page: 1,
|
||||
limit: this.pageSize
|
||||
}).then(res => {
|
||||
this.total = res.data.count;
|
||||
this.imgList = res.data.list;
|
||||
});
|
||||
this.getList(to.query.menu, 1, this.pageSize);
|
||||
}
|
||||
|
||||
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);
|
||||
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++) {
|
||||
|
|
@ -113,37 +136,43 @@ export default {
|
|||
red.style = "color: #000!important;";
|
||||
}
|
||||
}
|
||||
}else {
|
||||
} else {
|
||||
for (let i = 0; i < this.classifyList.length; i++) {
|
||||
const red = document.getElementById("classify_" + i);
|
||||
red.style = "color: #000!important;";
|
||||
red.style = "color: #000!important;";
|
||||
}
|
||||
}
|
||||
if (this.$route.query.space) {
|
||||
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 {
|
||||
} 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) {
|
||||
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 {
|
||||
} else {
|
||||
for (let i = 0; i < this.styleList.length; i++) {
|
||||
const red = document.getElementById("style_" + i);
|
||||
red.style = "color: #000!important;";
|
||||
|
|
@ -151,37 +180,48 @@ export default {
|
|||
}
|
||||
},
|
||||
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;
|
||||
this.spaceList = [
|
||||
{
|
||||
title: "全部"
|
||||
},
|
||||
...res.data.space_list
|
||||
];
|
||||
this.styleList = [
|
||||
{
|
||||
title: "全部"
|
||||
},
|
||||
...res.data.style_list
|
||||
];
|
||||
});
|
||||
//获取空间和风格数据
|
||||
getPublicData().then(res => {
|
||||
this.spaceList = res.data.space_list;
|
||||
this.styleList = res.data.style_list;
|
||||
});
|
||||
if (this.$route.query.menu&&this.$route.query.space==undefined) {
|
||||
|
||||
//点击了空间风格,之后重新加载, 内容不变
|
||||
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) {
|
||||
//进入页面时, 获取第一个列表的类别
|
||||
getGoodsCategory(this.$route.query.menu).then(res => {
|
||||
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);
|
||||
this.getCategory(1);
|
||||
this.getList(1, 1, this.pageSize);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取二级分类
|
||||
getCategory(category) {
|
||||
getGoodsCategory(category).then(res => {
|
||||
this.classifyList = [
|
||||
{
|
||||
id: 0,
|
||||
name: "全部"
|
||||
},
|
||||
...res.data.categorylist
|
||||
];
|
||||
});
|
||||
},
|
||||
//获取产品列表
|
||||
getGoodsList(classid, page, limit, stylename, spacename) {
|
||||
getList(classid, page, limit, stylename, spacename) {
|
||||
getGoodsList({
|
||||
classid: classid,
|
||||
page: page,
|
||||
|
|
@ -194,7 +234,7 @@ export default {
|
|||
if (res.data.list.length == 0) {
|
||||
this.showNull = true;
|
||||
this.showPagination = false;
|
||||
}else {
|
||||
} else {
|
||||
this.showNull = false;
|
||||
this.showPagination = true;
|
||||
}
|
||||
|
|
@ -210,9 +250,7 @@ export default {
|
|||
menu: index
|
||||
}
|
||||
});
|
||||
getGoodsCategory(index).then(res => {
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
this.getCategory(index);
|
||||
this.getGoodsList(index, 1, this.pageSize);
|
||||
},
|
||||
//产品分页
|
||||
|
|
@ -221,103 +259,68 @@ export default {
|
|||
},
|
||||
//点击二级分类,筛选产品数据
|
||||
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){
|
||||
const menuOne=0
|
||||
space=menuOne
|
||||
}if(style===undefined){
|
||||
const menuOne=0
|
||||
style=menuOne
|
||||
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&&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);
|
||||
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
|
||||
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){
|
||||
// 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);
|
||||
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
|
||||
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}`,
|
||||
|
|
@ -325,22 +328,6 @@ export default {
|
|||
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, "");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue