update 新闻 + 导航

components/header.vue

@@ -6,7 +6,7 @@
           <i></i>
         </a>
         <el-menu
-          :default-active="activeIndex"
+          :default-active="activeNav"
           class="el-menu-demo"
           mode="horizontal"
           :router="false"
@@ -36,7 +36,8 @@
 </template>
 
 <script>
-  import mtaLink from '~/components/mtaLink/index';
+  import mtaLink        from '~/components/mtaLink/index';
+  import { mapGetters } from 'vuex';
 
   let _ = require('lodash');
   export default {
@@ -44,16 +45,14 @@
     components: {
       mtaLink,
     },
-    props:      {
-      activeNav: { // 默认选中的 路径 与组件中的index相互对应
-        type:    String,
-        require: true,
-        default: '0',
+    computed: {
+      activeNav() {
+        return this.getActiveNav;
       },
+      ...mapGetters(['getActiveNav'])
     },
     data() {
       return {
-        activeIndex: this.activeNav,
         headerArr:   [
           {
             content: '首页',
@@ -79,11 +78,11 @@
             keyPath:  '/news',
             children: [],
           },
-    /*      {
-            content:  '帮助中心',
-            keyPath:  '/helpCenter',
-            children: [],
-          },*/
+          /*      {
+                  content:  '帮助中心',
+                  keyPath:  '/helpCenter',
+                  children: [],
+                },*/
           {
             content:  '关于我们',
             keyPath:  '/introduction',
@@ -93,49 +92,5 @@
         ],
       };
     },
-    watch:      {
-      // 监听
-      '$route.path': {
-        handler(newVal, oldVal) {
-          this.activeIndexSync();
-        },
-        immediate: true,
-      },
-      /*    $route: {
-            handler: function(val, oldVal){
-              debugger;
-              this.activeIndexSync();
-            },
-            // 深度观察监听
-            deep: true
-          }*/
-    },
-    methods:    {
-
-      activeIndexSync() {
-        const path = this.$route.path;
-        const idx = _.findIndex(this.headerArr, function (o) {
-          return o.keyPath === path;
-        });
-        if (idx > -1) {
-          this.activeIndex = this.headerArr[idx].keyPath;
-        } else {
-          for (const header of this.headerArr) {
-            if (header.children) {
-              const idx2 = _.findIndex(header.children, function (o) {
-                return o.keyPath === path;
-              });
-              if (idx2 > -1) {
-                this.activeIndex = header.keyPath;
-                return;
-              }
-            }
-          }
-        }
-      },
-    },
-    mounted() {
-      console.log('head:', this.$route.query)
-    },
   };
 </script>

components/news/NewsList.vue

@@ -0,0 +1,60 @@
+<template>
+  <li>
+    <div class="newsInfor-img-box" :style="{backgroundImage: 'url(' + newsData.pic ||newsInforImg + ')'}"></div>
+    <div class="newsInfor-list-content">
+      <h5>{{newsData.title}}</h5>
+      <div><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
+      </div>
+      <p>{{newsData.intro}}</p>
+      <a :href="`${baseUrl}/news/${newsData.iiId}`" >
+        <span @click.prevent="checkInfo(newsData)">
+          了解更多
+        </span>
+      </a>
+
+    </div>
+  </li>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name:     'NewList',
+    props:    {
+      newsData: {
+        type:    Object,
+        default: () => {
+        },
+      },
+    },
+    data() {
+      return {
+        newsInforImg: require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
+      };
+    },
+    computed: {
+      baseUrl() {
+        return this.getBaseUrl;
+      },
+      ...mapGetters(['getBaseUrl']),
+    },
+    methods:  {
+      checkInfo(data) {
+        // console.log(window.localtion.href);
+        // console.log(self.localtion.href);
+        // console.log(document.URL);
+        const opt = {
+          id: data.iiId,
+        };
+        this.$router.push({ name: 'news-id', params: opt });
+
+        this.$emit('know-more', data);
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

nuxt.config.js

@@ -58,6 +58,12 @@ export default {
   ** Nuxt.js dev-modules
   */
   buildModules: [],
+  /**
+   * 环境变量设置 新闻 拼路径时的根级别路径 多用于a标签 href属性
+   */
+  env: {
+    baseUrl: 'http://localhost:3000'
+  },
   /*
   ** Nuxt.js modules
   */
@@ -73,6 +79,10 @@ export default {
   },
   // server: {
   //   port: 3000, // default: 3000
+  //   host: '192.168.0.79' // default: localhost,
+  // },
+  // server: {
+  //   port: 3000, // default: 3000
   //   host: '192.168.0.179' // default: localhost,
   // },
   // server: {
@@ -81,6 +91,7 @@ export default {
   // },
   axios:        {
     // baseURL: isDev ? dev.baseURL : pro.baseURL
+    // baseURL: 'http://182.92.186.22:83/api',
     baseURL: 'http://192.168.0.179:82/api',
     // baseURL: 'http://182.92.186.22:83/api', // Used as fallback if no runtime config is provided
   },

pages/courseware/index.vue

@@ -154,8 +154,10 @@
   export default {
     name:       'courseware',
     layout:'templateB',
-    async asyncData({ $axios, query }) {
-      console.log('query2:', query);
+    async asyncData({ $axios, store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/courseware');
+
       let [res1,res2] =  await Promise.all([
                                              await $axios.$post(`/home/news/carousel`,{'newsClassifyId':2}).then(res=>{
                                                return res

pages/examsystem/index.vue

@@ -96,9 +96,9 @@
   export default {
     name:       'examsystem',
     layout:'templateB',
-    components: {
-    },
-    props:      {
+    asyncData({ store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/examsystem');
     },
     data() {
       return {

pages/index.vue

@@ -214,19 +214,19 @@
     <div class="client-industry-information">
       <h4 class="client-title">新闻资讯</h4>
       <div class="information-carousel-box">
-          <el-carousel :interval="4000" arrow="always">
-        <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
-          <div
-            class="industry-img-box"
-            :style="{ backgroundImage: 'url(' + item.pic + ')' }"
-          ></div>
-          <div class="industry-content-box">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.intro }}</p>
-            <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
+        <el-carousel :interval="4000" arrow="always">
+          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
+            <div
+              class="industry-img-box"
+              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
+            ></div>
+            <div class="industry-content-box">
+              <h5>{{ item.title }}</h5>
+              <p>{{ item.intro }}</p>
+              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
 
@@ -309,61 +309,63 @@
 <script>
 
   export default {
-    name: 'index',
-    layout:'templateA',
+    name:       'index',
+    layout:     'templateA',
     watchQuery: true,
-    async fetch({$axios, store, query}) {
-      console.log('query =>', query)
+    async fetch({ $axios, store, query }) {
       try {
         const { data } = await $axios.post('/home/links/list');
         store.commit('SetFooterYouQingLianJie', data.data.data);
-      } catch(e) {
+      } catch (e) {
 
       }
 
     },
-    async asyncData({ $axios, query }) {
-      console.log('query2:', query);
-      let [res1,res2] =  await Promise.all([
-      await $axios.$post(`/home/news/carousel`,{'newsClassifyId':1}).then(res=>{
-        return res
-      }),
-                                                ])
-      return {topCarousels : res1.data.data,
+    async asyncData({ $axios, store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/');
 
-      }
+      let [res1, res2] = await Promise.all([
+                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 1 }).then(res => {
+                                               return res;
+                                             }),
+                                           ]);
+      return {
+        topCarousels: res1.data.data,
+
+      };
     },
     data() {
       return {
         topCarousels2: [],
         // 需求img
-        bannerTelImg: require(`~/static/images/client/index/index-banner-screen.png`),
-        linkImg1: require(`~/static/images/client/index/index-link-img1.svg`),
-        linkImg2: require(`~/static/images/client/index/index-link-img2.svg`),
-        linkImg3: require(`~/static/images/client/index/index-link-img3.svg`),
-        linkImg4: require(`~/static/images/client/index/index-link-img4.svg`),
-        demandImg1: require(`~/static/images/client/index/index-demand-img1.png`),
-        demandImg2: require(`~/static/images/client/index/index-demand-img2.png`),
-        demandImg3: require(`~/static/images/client/index/index-demand-img3.png`),
-        demandImg4: require(`~/static/images/client/index/index-demand-img4.png`),
-        demandImg5: require(`~/static/images/client/index/index-demand-img5.png`),
-        demandImg6: require(`~/static/images/client/index/index-demand-img6.png`),
-        demandImg7: require(`~/static/images/client/index/index-demand-img7.png`),
-        demandImg8: require(`~/static/images/client/index/index-demand-img8.png`),
-        demandImg9: require(`~/static/images/client/index/index-demand-img9.png`),
-        demandImg10: require(`~/static/images/client/index/index-demand-img10.png`),
-        demandImg11: require(`~/static/images/client/index/index-demand-img11.png`),
-        demandImg12: require(`~/static/images/client/index/index-demand-img12.png`),
+        bannerTelImg:  require(`~/static/images/client/index/index-banner-screen.png`),
+        linkImg1:      require(`~/static/images/client/index/index-link-img1.svg`),
+        linkImg2:      require(`~/static/images/client/index/index-link-img2.svg`),
+        linkImg3:      require(`~/static/images/client/index/index-link-img3.svg`),
+        linkImg4:      require(`~/static/images/client/index/index-link-img4.svg`),
+        demandImg1:    require(`~/static/images/client/index/index-demand-img1.png`),
+        demandImg2:    require(`~/static/images/client/index/index-demand-img2.png`),
+        demandImg3:    require(`~/static/images/client/index/index-demand-img3.png`),
+        demandImg4:    require(`~/static/images/client/index/index-demand-img4.png`),
+        demandImg5:    require(`~/static/images/client/index/index-demand-img5.png`),
+        demandImg6:    require(`~/static/images/client/index/index-demand-img6.png`),
+        demandImg7:    require(`~/static/images/client/index/index-demand-img7.png`),
+        demandImg8:    require(`~/static/images/client/index/index-demand-img8.png`),
+        demandImg9:    require(`~/static/images/client/index/index-demand-img9.png`),
+        demandImg10:   require(`~/static/images/client/index/index-demand-img10.png`),
+        demandImg11:   require(`~/static/images/client/index/index-demand-img11.png`),
+        demandImg12:   require(`~/static/images/client/index/index-demand-img12.png`),
         // 客户logo
-        customerImg1: require(`~/static/images/client/index/index-customer-img1.png`),
-        customerImg2: require(`~/static/images/client/index/index-customer-img2.png`),
-        customerImg3: require(`~/static/images/client/index/index-customer-img3.png`),
-        customerImg4: require(`~/static/images/client/index/index-customer-img4.png`),
-        customerImg5: require(`~/static/images/client/index/index-customer-img5.png`),
-        customerImg6: require(`~/static/images/client/index/index-customer-img6.png`),
-        customerImg7: require(`~/static/images/client/index/index-customer-img7.png`),
-        customerImg8: require(`~/static/images/client/index/index-customer-img8.png`),
-        customerImg9: require(`~/static/images/client/index/index-customer-img9.png`),
+        customerImg1:  require(`~/static/images/client/index/index-customer-img1.png`),
+        customerImg2:  require(`~/static/images/client/index/index-customer-img2.png`),
+        customerImg3:  require(`~/static/images/client/index/index-customer-img3.png`),
+        customerImg4:  require(`~/static/images/client/index/index-customer-img4.png`),
+        customerImg5:  require(`~/static/images/client/index/index-customer-img5.png`),
+        customerImg6:  require(`~/static/images/client/index/index-customer-img6.png`),
+        customerImg7:  require(`~/static/images/client/index/index-customer-img7.png`),
+        customerImg8:  require(`~/static/images/client/index/index-customer-img8.png`),
+        customerImg9:  require(`~/static/images/client/index/index-customer-img9.png`),
         customerImg10: require(`~/static/images/client/index/index-customer-img10.png`),
         customerImg11: require(`~/static/images/client/index/index-customer-img11.png`),
         customerImg12: require(`~/static/images/client/index/index-customer-img12.png`),
@@ -376,23 +378,23 @@
         customerImg19: require(`~/static/images/client/index/index-customer-img19.png`),
         customerImg20: require(`~/static/images/client/index/index-customer-img20.png`),
         // 证书图片
-        certImg1: require(`~/static/images/client/index/index-cert-img1.jpg`),
-        certImg2: require(`~/static/images/client/index/index-cert-img2.jpg`),
-        certImg3: require(`~/static/images/client/index/index-cert-img3.jpg`),
-        certImg4: require(`~/static/images/client/index/index-cert-img4.jpg`),
-        certImg5: require(`~/static/images/client/index/index-cert-img5.jpg`),
-        certImg6: require(`~/static/images/client/index/index-cert-img6.jpg`),
-        certImg7: require(`~/static/images/client/index/index-cert-img7.jpg`),
-        certImg8: require(`~/static/images/client/index/index-cert-img8.jpg`),
-        activeIndex: '首页',
-      }
+        certImg1:      require(`~/static/images/client/index/index-cert-img1.jpg`),
+        certImg2:      require(`~/static/images/client/index/index-cert-img2.jpg`),
+        certImg3:      require(`~/static/images/client/index/index-cert-img3.jpg`),
+        certImg4:      require(`~/static/images/client/index/index-cert-img4.jpg`),
+        certImg5:      require(`~/static/images/client/index/index-cert-img5.jpg`),
+        certImg6:      require(`~/static/images/client/index/index-cert-img6.jpg`),
+        certImg7:      require(`~/static/images/client/index/index-cert-img7.jpg`),
+        certImg8:      require(`~/static/images/client/index/index-cert-img8.jpg`),
+        activeIndex:   '首页',
+      };
     },
-    methods: {
+    methods:    {
       checkInfo() {
-        this.$router.push({ name: 'introduction' })
+        this.$router.push({ name: 'introduction' });
       },
     },
-  }
+  };
 </script>
 
 <style></style>

pages/introduction/index.vue

@@ -9,7 +9,8 @@
         <h4 class="client-title mb40">公司简介</h4>
         <div class="company-profile-left">
           <p>大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。</p>
-          <p>公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
+          <p>
+            公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
         </div>
         <div class="company-profile-right"><img :src="companyProfileImg" alt="公司简介"></div>
       </div>
@@ -50,39 +51,53 @@
       <div class="client-container fn-clear">
         <div class="development-right">
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2020年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2020年</p></h4>
             <p><i>4月</i><span>麦塔SaaS版产品发布</span></p>
             <p><i>8月</i><span>企业用户已突破15万</span></p>
           </div>
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2016年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2016年</p></h4>
             <p><i>8月</i><span>麦塔3.0产品发布</span></p>
             <p><i>12月</i><span>企业用户突破4万</span></p>
           </div>
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2012年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2012年</p></h4>
             <p><i>3月</i><span>与步步高展开合作</span></p>
             <p><i>6月</i><span>麦塔网校版正式研发成功</span></p>
           </div>
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2008年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2008年</p></h4>
             <p><i>3月</i><span>栋科软件正式注册成立</span></p>
             <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
           </div>
         </div>
         <div class="development-left">
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2018年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2018年</p></h4>
             <p><span>麦塔4.0产品发布</span><i>7月</i></p>
             <p><span>10年多媒体设计经验，课程开发时长超2万小时</span><i>12月</i></p>
           </div>
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2014年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2014年</p></h4>
             <p><span>麦塔2.0产品发布</span><i>5月</i></p>
             <p><span>企业用户累计3000</span><i>11月</i></p>
           </div>
           <div class="development-content">
-            <h4><div><span><i></i></span></div><p>2010年</p></h4>
+            <h4>
+              <div><span><i></i></span></div>
+              <p>2010年</p></h4>
             <p><span>麦塔1.0考培系统发布</span><i>5月</i></p>
             <p><span>正式进军企培行业</span><i>6月</i></p>
           </div>
@@ -95,10 +110,14 @@
       <div class="client-container">
         <ul class="contact-container-box">
           <h4>联系我们</h4>
-          <li><i></i><span>咨询QQ</span><p>2956600477/3375245762</p></li>
-          <li><i></i><span>联系电话</span><p>400-052-2130</p></li>
-          <li><i></i><span>公司邮箱</span><p>service@llisoft.com</p></li>
-          <li><i></i><span>公司地址</span><p>大连市沙河口区数码路北段25号201室</p></li>
+          <li><i></i><span>咨询QQ</span>
+            <p>2956600477/3375245762</p></li>
+          <li><i></i><span>联系电话</span>
+            <p>400-052-2130</p></li>
+          <li><i></i><span>公司邮箱</span>
+            <p>service@llisoft.com</p></li>
+          <li><i></i><span>公司地址</span>
+            <p>大连市沙河口区数码路北段25号201室</p></li>
         </ul>
       </div>
     </div>
@@ -110,24 +129,22 @@
 
 <script>
   export default {
-    name:       'introduction',
-    layout:'templateB',
-    components: {
-    },
-    props:      {
+    name:     'introduction',
+    layout:   'templateB',
+    asyncData({ store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/trainsystem');
     },
     data() {
       return {
         // 公司简介图片
-        companyProfileImg:  require(`~/static/images/client/aboutUs/company-profile-img.png`),
-        brandIntroductionImg:  require(`~/static/images/client/aboutUs/aboutUs-logo.png`),
+        companyProfileImg:    require(`~/static/images/client/aboutUs/company-profile-img.png`),
+        brandIntroductionImg: require(`~/static/images/client/aboutUs/aboutUs-logo.png`),
         corporateCultureImg:  require(`~/static/images/client/aboutUs/corporate-culture-img.png`),
       };
     },
-    computed:   {},
-    methods:    {
-
-    },
+    computed: {},
+    methods:  {},
     created() {
 
     },

pages/news/_id.vue

@@ -1,32 +1,35 @@
 <template>
   <div class="client-details-page">
-    <MtaBreadcrumb></MtaBreadcrumb>
+
     <!-- 详情页 -->
     <div class="client-details-box">
 
       <!--行业资讯详情-->
       <div class="client-details-wrap">
         <h1>{{infoData.title}}</h1>
-        <p class="details-visits-box"><i></i><span>{{infoData.startTime}}</span><i type="visits"></i><span>{{infoData.visits}}</span></p>
+        <p class="details-visits-box"><i></i><span>{{infoData.startTime}}</span><i type="visits"></i><span>{{infoData.visits}}</span>
+        </p>
         <div class="client-content-box" v-html="infoData.content"></div>
-        <div class="client-details-pagination"><span>上一篇：职场同事可以作为朋友吗？</span><span>下一篇：HR如何帮助试用期员工快速融入团队</span></div>
+        <div class="client-details-pagination">
+          <a v-show="infoData.lastId" :href="`${baseUrl}/news/${infoData.lastId}`">
+            <span @click.prevent="changeNews(infoData.lastId)">上一篇：{{infoData.lastName}}</span>
+          </a>
+          <a v-show="infoData.nextId" :href="`${baseUrl}/news/${infoData.nextId}`">
+            <span @click.prevent="changeNews(infoData.nextId)">下一篇：{{infoData.nextName}}</span>
+          </a>
+        </div>
       </div>
 
       <!-- 最新新闻 -->
       <div class="latest-news-box">
         <h4>最新新闻</h4>
         <ul class="latest-news-list">
-          <li>
-            <a>HR如何帮助试用期员工快速融入团队</a>
-            <p class="details-visits-box"><i></i><span>2020-08-03</span><i type="visits"></i><span>1000</span></p>
-          </li>
-          <li>
-            <a>HR如何帮助试用期员工快速融入团队</a>
-            <p class="details-visits-box"><i></i><span>2020-08-03</span><i type="visits"></i><span>1000</span></p>
-          </li>
-          <li>
-            <a>HR如何帮助试用期员工快速融入团队</a>
-            <p class="details-visits-box"><i></i><span>2020-08-03</span><i type="visits"></i><span>1000</span></p>
+          <li v-for="(item, index) in newestData" :key="index">
+            <a :href="`${baseUrl}/news/${item.iiId}`">
+              <span @click.prevent="changeNews(item.iiId)">{{item.title}}</span>
+            </a>
+            <p class="details-visits-box"><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span>
+            </p>
           </li>
         </ul>
       </div>
@@ -36,35 +39,42 @@
 </template>
 
 <script>
-  export default {
-    name:       'news',
-    async asyncData({params,req,query}){
-
-      console.log(params);
-      console.log(req);
-      console.log(query);
-    },
-
+  import { mapGetters } from 'vuex';
 
-    components: {
-    },
-    props:      {
-    },
-    data() {
-      return {
-
-      };
-    },
-    computed:   {},
-    methods:    {
+  export default {
+    name:     'news_id',
+    layout:   'templateB',
+    async asyncData({ params, $axios, store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/news');
+      try {
+        const url = '/home/news/info';
+        const opt = {
+          iiId: params.id,
+        };
+        const res = await $axios.post(url, opt);
+        const url2 = '/home/news/newest';
+        const res2 = await $axios.post(url2);
 
-    },
-    created() {
 
+        return {
+          infoData:   res.data.data,
+          newestData: res2.data.data.data,
+        };
+      } catch (e) {
+        return {};
+      }
     },
-    mounted() {
+    computed: {
+      baseUrl() {
+        return this.getBaseUrl;
+      },
+      ...mapGetters(['getBaseUrl']),
     },
-    beforeDestroy() {
+    methods:  {
+      changeNews(id) {
+        this.$router.push({ name: 'news-id', params: { id } });
+      },
     },
   };
 </script>

pages/news/_name.vue

@@ -1,45 +0,0 @@
-<template>
-
-  <div>
-    <h2>12321321321</h2>
-  </div>
-
-
-</template>
-
-<script>
-  export default {
-    name:       'news',
-    async asyncData({params,req,query}){
-
-      console.log(params);
-      console.log(req);
-      console.log(query);
-    },
-
-
-    components: {
-    },
-    props:      {
-    },
-    data() {
-      return {
-
-      };
-    },
-    computed:   {},
-    methods:    {
-
-    },
-    created() {
-
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-<style>
-
-</style>

pages/news/index.vue

@@ -5,21 +5,21 @@
 
     <!-- 新闻资讯 -->
     <ul class="newsInfor-menu-ul">
-      <li :class="{'active':clicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in homeNewsClassify ">{{item.name}}</li>
+      <li style="cursor: pointer"
+          :class="{'active':activeIndex===index}"
+          @click="btnClick(item,index)"
+          :key="index"
+          v-for="(item,index) in newsClassifyData">
+        {{item.name}}
+      </li>
     </ul>
     <div class="client-container newsInfor-content-box">
       <ul class="newsInfor-content-ul">
-        <li v-for="(item,index) in newsList  " :key="index">
-          <div class="newsInfor-img-box" :style="{backgroundImage: 'url(' + item.pic ||newsInforImg + ')'}"></div>
-          <div class="newsInfor-list-content">
-            <h5>{{item.title}}</h5>
-            <div><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span>
-            </div>
-            <p>{{item.intro}}</p>
-            <a @click="checkInfo(item)">了解更多</a>
-          </div>
-        </li>
-      </ul >
+        <new-list
+          v-for="(item,index) in newsList"
+          :newsData="item"
+          :key="index"></new-list>
+      </ul>
       <div class="client-el-pagination">
         <el-pagination
           background
@@ -36,73 +36,89 @@
 </template>
 
 <script>
+  import NewList from '~/components/news/NewsList';
+
+  const defaultNewsClassifyId = 0;
   export default {
     name:       'news',
-    layout:'templateB',
+    layout:     'templateB',
     components: {
+      NewList,
     },
-    props:      {
+    async asyncData({ $axios, store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/news');
+      try {
+        const url = '/home/news/classify/list';
+        const res = await $axios.post(url);
+        const { data: { data } } = res;
+        const url2 = '/home/news/list';
+        const opt = {
+          page:           1,
+          size:           10,
+          newsClassifyId: data[0].newsClassifyId || defaultNewsClassifyId,
+        };
+
+        const res2 = await $axios.post(url2, opt);
+        const { data: { data: data2 } } = res2;
+        return {
+          newsList:          data2.data || [],
+          totalLists:        data2.total || defaultNewsClassifyId,
+          newsClassifyData:  data || [],
+          curNewsClassifyId: data[0].newsClassifyId || defaultNewsClassifyId,
+        };
+      } catch (e) {
+        return {
+          newsList:          [],
+          totalLists:        0,
+          newsClassifyData:  [],
+          curNewsClassifyId: defaultNewsClassifyId,
+        };
+      }
+
     },
     data() {
       return {
-        clicked:0,
+        clicked:          0,
         newsClassifyId:   null,
-        newsInforImg:     require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
-        newsList:         [], //后端返回的数组
         homeNewsClassify: [],
-        totalLists:         0,
-        currentPage:        1,
-        pageSize:           5,
+        totalLists:       0,
+        currentPage:      1,
+        pageSize:         5,
+        // 新闻分类数据
+        // newsClassifyData: [],
+        // 新闻数据
+        newsList:         [],
+        activeIndex:      0,
       };
     },
-    computed:   {},
     methods:    {
-      handleCurrentChange(val){
+      handleCurrentChange(val) {
         this.currentPage = val;
         this.getMessage();
-
-      },
-      tabSwitch(data,index){
-        this.clicked = index
-        this.newsClassifyId = data.newsClassifyId
-        this.getMessage();
-
       },
-      getMessage() {
-        let req = {
-          newsClassifyId:  this.newsClassifyId,
+      async getMessage() {
+        let opt = {
+          newsClassifyId: this.curNewsClassifyId,
           page:           this.currentPage,
-          size:            this.pageSize,
+          size:           this.pageSize,
         };
-       /* homeNewsList(req).then(res => {
-          if (res.code === 0) {
-            this.newsList = res.data.data;
-            this.totalLists = res.data.total
-          }
-        });*/
-
+        const url2 = '/home/news/list';
+        const res2 = await this.$axios.post(url2, opt);
+        this.newsList = res2.data.data.data;
+        this.totalLists = res2.data.data.total || defaultNewsClassifyId;
       },
-      getHomeNewsClassify() {
-        /*homeNewsClassifyList().then(res => {
-          if (res.code === 0) {
-            this.homeNewsClassify = res.data;
-            this.newsClassifyId = res.data[0].newsClassifyId
-            this.getMessage(res.data[0].newsClassifyId);
-          }
-        });*/
-
+      btnClick(data, index) {
+        this.activeIndex = index;
+        console.log(data);
+        this.curNewsClassifyId = data.newsClassifyId;
+        this.currentPage = 1;
+        this.getMessage();
       },
-     /* checkInfo(data) {
-        this.$router.push({ name: 'newsInforDetails', params: data });
-      },*/
-    },
-    created() {
-
     },
     mounted() {
-    },
-    beforeDestroy() {
-    },
+
+    }
   };
 </script>
 <style>

pages/trainsystem/index.vue

@@ -17,10 +17,14 @@
     <div class="client-container" style="margin-top: -54px">
       <h4 class="client-title">产品优势</h4>
       <ul class="train-product-advantages">
-        <li><img :src="trainAdvantagesImg1" alt="课程考试相结合"><h5>课程考试相结合</h5><p>视频指定时间添加试题，支持图片、PDF、音视频、office文档等</p></li>
-        <li><img :src="trainAdvantagesImg2" alt="随时随地学习"><h5>随时随地学习</h5><p>PC端与移动端无缝连接；支持APP和微信学习模式</p></li>
-        <li><img :src="trainAdvantagesImg3" alt="稳定安全的数据保护"><h5>稳定安全的数据保护</h5><p>采用多层次多安全防护措施，通过阿里渗透式测试</p></li>
-        <li><img :src="trainAdvantagesImg4" alt="量身定制"><h5>量身定制</h5><p>满足企业培训中的功能需求，定制企业专属功能</p></li>
+        <li><img :src="trainAdvantagesImg1" alt="课程考试相结合"><h5>课程考试相结合</h5>
+          <p>视频指定时间添加试题，支持图片、PDF、音视频、office文档等</p></li>
+        <li><img :src="trainAdvantagesImg2" alt="随时随地学习"><h5>随时随地学习</h5>
+          <p>PC端与移动端无缝连接；支持APP和微信学习模式</p></li>
+        <li><img :src="trainAdvantagesImg3" alt="稳定安全的数据保护"><h5>稳定安全的数据保护</h5>
+          <p>采用多层次多安全防护措施，通过阿里渗透式测试</p></li>
+        <li><img :src="trainAdvantagesImg4" alt="量身定制"><h5>量身定制</h5>
+          <p>满足企业培训中的功能需求，定制企业专属功能</p></li>
       </ul>
     </div>
 
@@ -29,14 +33,38 @@
       <div class="client-container">
         <h4 class="client-title">产品功能</h4>
         <ul class="product-function-box">
-          <li><div><i></i><h5>多层级独立管理</h5><p>满足多层级的组织架构，多级子公司运营的需求，针对企业复杂的组织架构，可设置不限层级的树状管理权限</p></div></li>
-          <li><div><i></i><h5>培训记录与监管</h5><p>登陆记录、学习时长、考核记录、学习状况实时监控、督学体系、学习能力分析体系强大</p></div></li>
-          <li><div><i></i><h5>随时随地学习</h5><p>适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p></div></li>
-          <li><div><i></i><h5>稳定安全的数据保护</h5><p>采用多层次多安全防护措施，顺利通过阿里渗透式测试，使系统最大限度地不被黑客和有意破坏者攻击</p></div></li>
-          <li><div><i></i><h5>完善的课程学习体系</h5><p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p></div></li>
-          <li><div><i></i><h5>功能丰富的在线考试</h5><p>强大的题库管理和丰富的考试控制功能，随机组卷考试，稳定大并发考试</p></div></li>
-          <li><div><i></i><h5>与第三方系统无缝集成</h5><p>基于Java语言开发Springcloud框架；支持人脸识别、单点登录、组织架构及用户数据的同步；支持与EAP/EIP、OA、HR系统的集成</p></div></li>
-          <li><div><i></i><h5>个性化定制</h5><p>界面自定义主题背景、品牌、logo，搭建您的专属在线培训平台</p></div></li>
+          <li>
+            <div><i></i><h5>多层级独立管理</h5>
+              <p>满足多层级的组织架构，多级子公司运营的需求，针对企业复杂的组织架构，可设置不限层级的树状管理权限</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>培训记录与监管</h5>
+              <p>登陆记录、学习时长、考核记录、学习状况实时监控、督学体系、学习能力分析体系强大</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>随时随地学习</h5>
+              <p>适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>稳定安全的数据保护</h5>
+              <p>采用多层次多安全防护措施，顺利通过阿里渗透式测试，使系统最大限度地不被黑客和有意破坏者攻击</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>完善的课程学习体系</h5>
+              <p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>功能丰富的在线考试</h5>
+              <p>强大的题库管理和丰富的考试控制功能，随机组卷考试，稳定大并发考试</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>与第三方系统无缝集成</h5>
+              <p>基于Java语言开发Springcloud框架；支持人脸识别、单点登录、组织架构及用户数据的同步；支持与EAP/EIP、OA、HR系统的集成</p></div>
+          </li>
+          <li>
+            <div><i></i><h5>个性化定制</h5>
+              <p>界面自定义主题背景、品牌、logo，搭建您的专属在线培训平台</p></div>
+          </li>
         </ul>
       </div>
     </div>
@@ -90,18 +118,18 @@
 
 <script>
   export default {
-    name:       'trainsystem',
-    layout:'templateB',
-    components: {
-    },
-    props:      {
+    name:     'trainsystem',
+    layout:   'templateB',
+    asyncData({ store }) {
+      // 设置选中菜单
+      store.commit('setActiveNav', '/trainsystem');
     },
     data() {
       return {
         productShowCarousels: [
-          {img:require(`~/static/images/client/train/product-show-img1.png`),title:"平台总览"},
-          {img:require(`~/static/images/client/train/product-show-img3.png`),title:"服务管理"},
-          {img:require(`~/static/images/client/train/product-show-img2.png`),title:"人员管理"}
+          { img: require(`~/static/images/client/train/product-show-img1.png`), title: '平台总览' },
+          { img: require(`~/static/images/client/train/product-show-img3.png`), title: '服务管理' },
+          { img: require(`~/static/images/client/train/product-show-img2.png`), title: '人员管理' },
         ],
         trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.svg`),
         trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.svg`),
@@ -109,10 +137,8 @@
         trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.svg`),
       };
     },
-    computed:   {},
-    methods:    {
-
-    },
+    computed: {},
+    methods:  {},
     created() {
 
     },

store/index.js

@@ -4,22 +4,31 @@
  */
 
 export const state = () => ({
-  headerMenu: [],
   FooterYouQingLianJie: [],
+  BASE_URL: process.env.baseUrl,
+  ActiveNav: '/'
 })
 
 export const getters = {
   getFooterYouQingLianJie(state) {
     return state.FooterYouQingLianJie;
   },
+  getBaseUrl(state) {
+    return state.BASE_URL;
+  },
+  getActiveNav(state) {
+    return state.ActiveNav;
+  }
 }
 
 
 export const mutations = {
-  SetHeadMenu(state, payload) {},
   SetFooterYouQingLianJie(state, payload) {
     state.FooterYouQingLianJie = payload;
   },
+  setActiveNav(state, payload) {
+    state.ActiveNav = payload;
+  }
 }