src/api/index.js

@@ -1,9 +1,3 @@
-/**
- * @author: Clay
- * @date: 2022/1/14 13:26
- * @description：index
- * @email: clay@hchyun.com
- */
 import request from '@/utils/request'
 
 // 获取首页轮播图
@@ -30,5 +24,40 @@ export function getArticleInfo(id) {
     }
   })
 }
-
+// 获取文章列表
+export function getArticleList(data) {
+  return request({
+    url: '/articlelist',
+    method: 'post',
+    data:data
+  })
+}
+// 获取产品分类
+export function getGoodsCategory(id) {
+  return request({
+    url: '/goods_category',
+    method: 'post',
+    data:{
+      id:id
+    }
+  })
+}
+// 获取产品列表
+export function getGoodsList(data) {
+  return request({
+    url: '/goodslist',
+    method: 'post',
+    data:data
+  })
+}
+// 获取产品详情
+export function getGoodsInfo(goodsid) {
+  return request({
+    url: '/goodsinfo',
+    method: 'post',
+    data:{
+      goodsid:goodsid
+    }
+  })
+}
 

src/components/NewsCenter.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="newsCenter">
+    <a href="/about_us">
       <div class="news_bg">
       </div>
+    </a>
     <!--    <el-row type="flex" >-->
     <!--      <el-col :span="4"></el-col>-->
     <!--      <el-col :span="16">-->

src/components/PicturesBox.vue

@@ -9,7 +9,7 @@
             <div class="item">
               <a>
                 <span class="pic" v-if="type!==22">
-                  <img :src="item.imgUrl" alt="">
+                  <img :src="item.image" alt="">
                 </span>
                 <el-image
                   v-if="type===22"
@@ -17,7 +17,7 @@
                   :preview-src-list="item.bigSrc">
                 </el-image>
                 <span class="info" v-if="type===22">{{ item.word }}</span>
-                <span class="inf" v-if="type!==22">{{ item.word }}</span>
+                <span class="inf" v-if="type!==22">{{ item.name }}</span>
                 <span class="size" v-if="type!==22">{{ item.date }}</span>
               </a>
             </div>

src/components/ProductsTabsItem.vue

@@ -4,7 +4,7 @@
     <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
     <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
       <el-tabs v-if="title===1" v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title">
+        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title" >
           关于我们
         </el-tab-pane>
       </el-tabs>
@@ -13,11 +13,18 @@
           {{ title === 0 ? '' : item.title  }}
         </el-tab-pane>
       </el-tabs>
+      <el-tabs v-if="title===9" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane v-for="(item,index) in productTabs" :key="index" :label="item.name">
+          {{item.name}}
+        </el-tab-pane>
+      </el-tabs>
     </el-col>
   </el-row>
 </template>
 
 <script>
+import {getPublicData} from "@/api";
+
 export default {
   name: "TabsItem",
   props: {
@@ -25,40 +32,7 @@ export default {
     tabList: {
       type: Array,
       default: ()=>{
-        return  [
+        return []
-          {
-            label: '全部',
-            name: 'first'
-          },
-          {
-            label: '瓷抛大理石',
-            name: 'second'
-          }, {
-            label: '通体大理石',
-            name: 'third'
-          }, {
-            label: '中板通体大理石',
-            name: 'four'
-          }, {
-            label: '大板通体大理石',
-            name: 'five'
-          }, {
-            label: '银河系大板',
-            name: 'six'
-          }, {
-            label: '仿古砖600x600',
-            name: 'seven'
-          }, {
-            label: '金刚大理石',
-            name: 'eight'
-          }, {
-            label: '岩板',
-            name: 'nine'
-          }, {
-            label: '微水泥',
-            name: 'ten'
-          }
-        ]
       }
     },
     fatherMethod:{
@@ -68,9 +42,15 @@ export default {
   },
   data() {
     return {
-      activeName: '0'
+      activeName: '0',
+      productTabs:[]
     }
   },
+  created() {
+    getPublicData().then(res => {
+      this.productTabs=res.data.goodscategory_list
+    });
+  },
   methods: {
     handleClick(tab){
       if(this.fatherMethod){

src/views/aboutUs/index.vue

@@ -9,34 +9,8 @@
       <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
       <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
         <div class="introduce" id="introduce">
-<!--          <p v-for="(item,index) in pList" :key="index">-->
           <span v-html="pList"></span>
-<!--          </p>-->
         </div>
-<!--        <div class="introduce band" id="band">-->
-<!--          <p v-for="(item,index) in bandList" :key="index">-->
-<!--            <span>{{ item.text1 }}</span>-->
-<!--            <span>{{ item.text2 }}</span>-->
-<!--          </p>-->
-<!--        </div>-->
-<!--        <div class="introduce band" id="ideas">-->
-<!--          <p v-for="(item,index) in ideaList" :key="index">-->
-<!--            <span>{{ item.text1 }}</span>-->
-<!--            <span>{{ item.text2 }}</span>-->
-<!--            <span>{{ item.text3 }}</span>-->
-<!--          </p>-->
-<!--        </div>-->
-<!--        <div class="culture" id="culture">-->
-<!--          <div id="culture_content" v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">-->
-<!--            <div class="culture_img">-->
-<!--              <img :src="item.src" alt=""/>-->
-<!--            </div>-->
-<!--            <div class="culture_right">-->
-<!--              <span>{{ item.text1 }}</span>-->
-<!--              <span>{{ item.text2 }}</span>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
       </el-col>
     </el-row>
   </div>
@@ -52,109 +26,25 @@ export default {
   data() {
     return {
       aboutTabs: [],
-      pList: [],
+      pList: []
-      bandList: [
-        {
-          text1: '品牌主张：把人文注入生活、品鉴艺术魅力、享受知性人生',
-          text2: '艺鹏主张利用空间的创新，把人们的生活从物质的享受，升华到一个精神享受境界。主张把人文元素通过空间存在的表现形式注入到生活中，而使生活处在一种艺术的魅力氛围中，静静品味人生的点点滴滴。'
-        },
-        {
-          text1: '品牌气质：高贵、艺术、完美、人文、知性',
-          text2: '高贵是艺鹏的外在气氛你，艺术是艺鹏的表现形象。完美是艺鹏的目标追求，人文是艺鹏的品牌内涵，知性是艺鹏的人生解读。'
-        }, {
-          text1: '品牌文化：人文创新完美艺术空间、知性引领高贵时尚潮流',
-          text2: '艺鹏以人文的魅力运用到空间创造中，使空间艺术趋于一种完美境界；艺鹏的这种知性艺术手法，对空间、对人生、都是一种旗帜性的标榜；是一种领先于时代的思想和品位追求也必将引领时尚的潮流，把人生导向高贵的商品高度。'
-        }, {
-          text1: '品牌理念：提升人居生活品味、打造知性时尚空间',
-          text2: '艺鹏的最终宗旨是提升人居生活品味，过程是打造知性时尚的空间。通过空间的打造和创新，来承载生活的无限美好和梦想。'
-        }, {
-          text1: '产品思路：以人文思维、专注陶瓷科技；做高端、知性的文化陶瓷',
-          text2: '艺鹏不为产品而做产品，艺鹏使用一种艺术的追求来雕琢空间，传承人文精神，通过陶瓷的科技创新来实现；突破传统的空间文化，提倡文化陶瓷的新理念，打造一种高端的，知性人生。'
-        },
-      ],
-      ideaList: [
-        {
-          text1: '企业文化宣言',
-          text2: '以文化文本，凝聚人才，铸造精品，历练价值，成就品牌'
-        },
-        {
-          text1: '企业文化核心',
-          text2: '团队致胜，倡导自我奋斗，自我超越；通过团队协作实现企业与员工的共同发展，建立共同价值信仰，以共同目标为行动的出发点与落脚点；在职能效率的基础上加强团队协作，互为包容那个，互为扶助，求和力，提效率实现客户、经销商、员工、社会以及企业自身的多方共赢。'
-        }, {
-          text1: '企业精神',
-          text2: '团结、敬业、务实、创新'
-        }, {
-          text1: '企业目标',
-          text2: '以成为中国建筑陶瓷行业顶级制造商为目标，以顶尖科技与创新思想为两翼，致力将中国建陶推向世界，打造百年世界品牌。'
-        }, {
-          text1: '企业风格',
-          text2: '实实在在做人，踏踏实实做事；真真切切承诺，切切实实服务。'
-        }, {
-          text1: '企业经营方针',
-          text2: '专注本业，以客为尊；持续发展，多赢共荣。'
-        }, {
-          text1: '工作作风',
-          text2: '快速反应，日事日毕，不找借口，全力以赴。  品牌定位：艺术创新、诗化人生；高端文艺、知性陶瓷',
-          text3: '艺鹏是一种建立在艺术上的诗画人生，有着诗的气质，又有着画的美感；在此的延续上，艺鹏展示的是一种高端的文艺，是一种人生的智慧之美。这就是艺鹏的知性本质之所在。也是艺鹏区别于其他品牌的个性所在。'
-        }
-      ],
-      cultureList: [
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351034036451.jpg',
-          text1: '互 信',
-          text2: '互相信任，企业与员工、消费者、合作伙伴、供应商相互之间需形成良好的信任基础，做到心口如一，言行一致，才能以行取信。内部信任，重在塑造企业文化环境，使员工与企业之间达成心理契约， 外部信任，重在建立真实坦诚的合作关系，使其与企业达成一致的思想意识。'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351088324141.jpg',
-          text1: '责 任',
-          text2: '责任担当，全体员工具有强烈的责任意识，卓越的责任能力，自觉的责任行为，建立完整有序、纵横交错的责任链，勇于承担责任，主动把责任转化为自觉行动，转化为推动企业发展的统一意识，转化为推动工作的强劲动力，做到对社会负责，对企业负责，对客户负责，对同事负责，对自己负责。树立责任意识，以感恩的心态回馈社会。'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351138654829.jpg',
-          text1: '创 新',
-          text2: '持续改善工艺、产品、管理等各方面，我们以先进的理念，灵活应变的品牌策略，勇于拼搏不断完善的心态，创造出高品质产品；结合公司自身状况，以一点一滴的改善和进步，积聚成公司跨越式的发展；我们将加大激励改善创新机制，鼓励员工勇于开拓超越自我，以顾客需求为导向，不断推出先进独特的，极赋时代感的产品及服务。'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351185978147.jpg',
-          text1: '共 赢',
-          text2: '携手共赢，携手式合作的基础，共赢式合作的目的；树立协作共赢，合作精神，与合作伙伴共同成长，相互尊重和信任，共享成果，是我们企业和客户共同追求的目标；宽容待人，与客户及伙伴风雨同舟，携手开拓陶瓷行业的新空间和新市场，共同实现互利和双赢。'
-        }
-      ]
     }
   },
   mounted() {
     //获取关于我们的数据
     getArticleInfo(1).then(res => {
       this.aboutTabs = res.data.articlelist;
-      this.pList=res.data.articleinfo.content
+      this.pList = res.data.articleinfo.content
     });
   },
   methods: {
     handleClick(tab) {
-      const introduce = document.getElementById('introduce');
+      for (let i = 0; i < this.aboutTabs.length; i++) {
-      const band = document.getElementById('band');
+        if (this.aboutTabs[i].title === tab._props.label) {
-      const ideas = document.getElementById('ideas');
+          getArticleInfo(this.aboutTabs[i].id).then(res => {
-      const culture = document.getElementById('culture');
+            this.aboutTabs = res.data.articlelist;
-      if (tab.index == 0) {
+            this.pList = res.data.articleinfo.content
-        introduce.style.display = "block"
+          });
-        band.style.display = "none"
+        }
-        ideas.style.display = "none"
-        culture.style.display = "none"
-      } else if (tab.index == 1) {
-        introduce.style.display = "none"
-        band.style.display = "block"
-        ideas.style.display = "none"
-        culture.style.display = "none"
-      } else if (tab.index == 2) {
-        introduce.style.display = "none"
-        band.style.display = "none"
-        ideas.style.display = "block"
-        culture.style.display = "none"
-      } else if (tab.index == 3) {
-        introduce.style.display = "none"
-        band.style.display = "none"
-        ideas.style.display = "none"
-        culture.style.display = "block"
       }
     }
   }
@@ -164,7 +54,7 @@ export default {
 <style scoped lang="scss">
 @media only screen and (max-width: 1660px) {
   .culture_img {
-    img{
+    img {
       width: 550px !important;
     }
   }
@@ -172,11 +62,12 @@ export default {
 
 @media only screen and (max-width: 1480px) {
   .culture_img {
-    img{
+    img {
       width: 500px !important;
     }
   }
 }
+
 #band {
   display: none;
 }

src/views/attractAndJoin/index.vue

@@ -14,9 +14,7 @@
             支持策略 / SUPPORT STRATEGY
           </div>
           <div style="font-size: 16px;padding-bottom: 25px">
-<!--            <p v-for="(item,index) in supportList" :key="index" style="">-->
             <span v-html="supportList"></span>
-<!--            </p>-->
           </div>
         </div>
         <!--加盟条件-->
@@ -24,10 +22,8 @@
           <div class="support_title">
             加盟条件 / FRANCHISE CONDITIONS
           </div>
-          <div style="font-size: 16px">
+          <div style="font-size: 16px;padding-bottom: 25px">
-            <p v-for="(item,index) in joinList" :key="index" style="padding-bottom: 25px">
+            <span v-html="joinList"></span>
-              {{item.text}}
-            </p>
           </div>
         </div>
       </el-col>
@@ -41,19 +37,15 @@ import {getArticleInfo, getPublicData} from "@/api";
 
 export default {
   name: "index",
-  components:{ProductsTabsItem},
+  components: {ProductsTabsItem},
   data() {
     return {
       joinTab: [],
-      supportList:[
+      supportList: [],
-        {text:'艺鹏瓷砖对合作伙伴的支持策略：'},
+      joinList: [
-        {text:'1、形象店的装修补贴支持'},
+        {text: '艺鹏瓷砖合作加盟条件：'},
-        {text:'有些经销商由于初期实力薄弱，进货以后也许没有多少钱可以装修店面，所以艺鹏瓷砖为您提供有力的形象店装修补贴支持，让您的漂亮店面从此可以昂首挺胸。：'}
+        {text: '1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
-      ],
+        {text: '2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
-      joinList:[
-        {text:'艺鹏瓷砖合作加盟条件：'},
-        {text:'1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
-        {text:'2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
       ]
     }
   },
@@ -61,7 +53,7 @@ export default {
     //获取招商加盟的数据
     getArticleInfo(4).then(res => {
       this.joinTab = res.data.articlelist;
-      this.supportList=res.data.articleinfo.content
+      this.supportList = res.data.articleinfo.content
     });
   },
   methods: {
@@ -81,7 +73,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-#join{
+#join {
   display: none;
 }
 

src/views/header/index.vue

@@ -60,7 +60,7 @@ export default {
   name: "index",
   data() {
     return {
-      logo:'http://www.yipengtaoci.com/images/logo.png',
+      logo:'',
       corporate_name:'',
       navList: [
         {
@@ -171,9 +171,10 @@ export default {
   },
   mounted() {
     getPublicData().then(res => {
-      console.log('公共数据',res.data);
+      // console.log('公共数据',res.data);
       this.logo = res.data.logo;
       this.corporate_name = res.data.corporate_name;
+      // this.navList[2].children=res.data.goodscategory_list
       // sessionStorage.setItem("lang", res.data.corporate_name)
     });
     let header_bg = document.getElementById('header_bg')

src/views/news/detail.vue

@@ -31,14 +31,21 @@
 </template>
 
 <script>
+import {getArticleInfo} from "@/api";
+
 export default {
   name: "detail",
   data() {
     return {
       tabs_title: '公司新闻',
-      htmlStr: '<h1>公司新闻公司新闻</h1>',
+      htmlStr: '',
     }
   },
+  mounted() {
+    getArticleInfo(6).then(res => {
+      this.htmlStr=res.data.articleinfo.content
+    });
+  },
   methods: {
     /**
      * 分享到微博

src/views/news/index.vue

@@ -35,13 +35,13 @@ export default {
       ceramic:false,
       newsTab: [
         {
-          label: '公司新闻',
+          title: '公司新闻',
           name: 'first'
         }, {
-          label: '行业动态',
+          title: '行业动态',
           name: 'second'
         }, {
-          label: '瓷砖百科',
+          title: '瓷砖百科',
           name: 'third'
         },
       ],

src/views/productsCenter/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="products_center">
     <!--标签栏 -->
-    <ProductsTabsItem />
+    <ProductsTabsItem :title="9" :fatherMethod="handleClick"/>
     <!-- 分类栏-->
     <div class="product_types">
       <el-row type="flex">
@@ -10,7 +10,7 @@
           <div class="classifyList spaceList">
             <strong>分类：</strong>
             <ul>
-              <li v-for="item in classifyList">{{ item.title }}</li>
+              <li v-for="item in classifyList">{{ item.name }}</li>
             </ul>
           </div>
           <div class="spaceList">
@@ -30,7 +30,7 @@
     </div>
     <!--图片栏-->
     <PicturesBox :image-list="imgList" :type="33"/>
-    <Pagination :currentPage="1" :total="320" :pageSize="10"/>
+    <Pagination :currentPage="1" :total="total" :pageSize="pageSize"/>
   </div>
 </template>
 
@@ -38,129 +38,57 @@
 import ProductsTabsItem from "@/components/ProductsTabsItem";
 import Pagination from "@/components/Pagination";
 import PicturesBox from "@/components/PicturesBox";
+import {getPublicData, getGoodsCategory, getGoodsList} from "../../api";
 
 export default {
   name: "index",
   components: {PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      classifyList: [
+      classifyList: [],
-        {
+      spaceList: [],
-          title: '13MM瓷抛大理石'
+      styleList: [],
-        },
+      pageSize:10,
-        {
+      total:0,
-          title: '11MM瓷抛大理石'
+      imgList: []
     }
-      ],
-      spaceList: [
-        {
-          title: '全部'
-        }, {
-          title: '客厅瓷砖'
-        }, {
-          title: '厨房瓷砖'
-        }, {
-          title: '卫浴瓷砖'
-        }, {
-          title: '书房瓷砖'
-        }, {
-          title: '卧室瓷砖'
-        }, {
-          title: '餐厅瓷砖'
-        }, {
-          title: '走廊瓷砖'
-        }, {
-          title: '大厅瓷砖'
-        }
-      ],
-      styleList: [
-        {
-          title: '全部'
   },
-        {
+  mounted() {
-          title: '简约风格'
+    //获取空间和风格数据
+    getPublicData().then(res => {
+      this.spaceList = res.data.space_list
+      this.styleList = res.data.style_list
+    });
+    //进入页面时, 获取第一个列表的类别
+    getGoodsCategory(1).then(res => {
+      this.classifyList = res.data.categorylist
+    });
+    //获取产品列表
+    getGoodsList({
+      classid:0,
+      page:1,
+      limit:this.pageSize,
+    }).then(res => {
+      // this.total=res.data.count
+      this.imgList=res.data.list
+    });
   },
-        {
+  methods: {
-          title: '新中式风格'
+    handleClick(tab) {
-        },
+      let index = parseInt(tab.index) + 1
-        {
+      getGoodsCategory(index).then(res => {
-          title: '欧式风格'
+        this.classifyList = res.data.categorylist
-        }, {
+      });
-          title: '古典风格'
-        }, {
-          title: '田园风格'
-        }, {
-          title: '工业风格'
-        }
-      ],
-      imgList: [
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
-          word: "WH715T039",
-          date: "750x1500MM大板时代"
-        }
-      ]
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+* {
+  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
+}
+
 .products_center {
   min-width: 1300px;