邓洁 : 修改bug

Reviewed-on: #22

package.json

@@ -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": {

public/index.html

@@ -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() {

src/components/FastFindProducts.vue

@@ -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是参数的名称
+          }
+        });
+      }
     }
   }
 };

src/components/NewsCenter.vue

@@ -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;
+        }
+      }
     }
   }
 

src/components/PicturesBox.vue

@@ -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;

src/main.js

@@ -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: {

src/router/index.js

@@ -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',

src/views/aboutUs/index.vue

@@ -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)
         }
       }
     }

src/views/attractAndJoin/index.vue

@@ -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 {

src/views/contactUs/index.vue

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

src/views/header/index.vue

@@ -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;

src/views/imageDisplay/index.vue

@@ -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
+          }
+        });
       }
     },
     //分页

src/views/index/index.vue

@@ -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>

src/views/news/detail.vue

@@ -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>

src/views/news/index.vue

@@ -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) {

src/views/productsCenter/detail.vue

@@ -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;

src/views/productsCenter/index.vue

@@ -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, "");
     }
   }
 };