新增新闻页面

components/Link.vue

+<template>
+  <div>
+    <!-- 外部链接跳转 -->
+    <a :href="item.href" target="_blank" v-if="item.href"><slot /></a>
+    <!-- 站内跳转 -->
+    <nuxt-link :to="item.path" v-else-if="item.path"><slot /></nuxt-link>
+    <!-- 事件 -->
+    <span v-else-if="item.onClick" @click="item.onClick"><slot /></span>
+    <template v-else><slot /></template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { item: { type: Object } }
+}
+</script>

components/Search.vue

@@ -4,9 +4,7 @@
       <h2 class="hot-search__title">热门搜索</h2>
       <ul class="hot-search__list">
         <li v-for="(item, index) in hotList" :key="index">
-          <nuxt-link :to="item.path" v-if="item.path">{{ item.name }}</nuxt-link>
-          <a :href="item.href" v-else-if="item.href" target="_blank">{{ item.name }}</a>
-          <template v-else>{{ item.name }}</template>
+          <app-link :item="item">{{ item.name }}</app-link>
         </li>
       </ul>
     </div>
@@ -14,7 +12,9 @@
 </template>
 
 <script>
+import AppLink from '@/components/Link'
 export default {
+  components: { AppLink },
   data() {
     return {
       hotList: [

components/TreeItem.vue

@@ -2,13 +2,7 @@
   <li class="tree-item">
     <div class="cell" :class="{ bold: isFolder }" @click="toggle">
       <div class="cell-title">
-        <!-- 站内跳转 -->
-        <nuxt-link :to="item.path" v-if="item.path">{{ item.name }}</nuxt-link>
-        <!-- 外部链接跳转 -->
-        <a :href="item.href" target="_blank" v-else-if="item.href">{{ item.name }}</a>
-        <!-- 事件 -->
-        <div @click="item.onClick" v-else-if="item.onClick">{{ item.name }}</div>
-        <template v-else>{{ item.name }}</template>
+        <app-link :item="item">{{ item.name }}</app-link>
       </div>
       <div class="cell-icon" v-if="isFolder">
         <van-icon name="arrow-up" v-if="isOpen" />
@@ -23,10 +17,10 @@
 
 
 <script>
+import AppLink from '@/components/Link'
 export default {
-  props: {
-    item: Object
-  },
+  props: { item: Object },
+  components: { AppLink },
   data: function () {
     return {
       isOpen: false

components/about/NewsItem.vue

 <template>
   <div class="news-item">
-    <div class="news-item-pic"></div>
-    <div class="news-item-content">
-      <div class="news-item-content__date"></div>
-      <div class="news-item-content__title"></div>
-    </div>
+    <nuxt-link :to="`/about/news/${item.id}`">
+      <img :src="item.photo_uri" class="news-item-pic" v-if="item.photo_uri" />
+      <div class="news-item-content">
+        <div class="news-item-content__date">{{ formatDate(item.created_time) }}</div>
+        <div class="news-item-content__title">{{ item.title }}</div>
+        <div class="news-item-content__text">{{ item.summary }}</div>
+      </div>
+    </nuxt-link>
   </div>
 </template>
 
 <script>
 export default {
   props: { item: { type: Object } },
-  methods: {}
+  methods: {
+    formatDate(value) {
+      const date = new Date(value)
+      return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .news-item {
+  margin-bottom: 0.1rem;
   background-color: #fff;
 }
 .news-item-pic {
-  height: 2.99rem;
+  display: block;
+  width: 100%;
+  // height: 2.99rem;
+  object-fit: cover;
+}
+.news-item-content {
+  padding: 0.18rem;
+}
+.news-item-content__date {
+  font-size: 0.1rem;
+  color: #aa1941;
+  line-height: 0.16rem;
+}
+.news-item-content__title {
+  margin-top: 0.1rem;
+  font-size: 0.14rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 0.24rem;
+}
+.news-item-content__text {
+  margin-top: 0.2rem;
+  font-size: 0.1rem;
+  color: #424242;
+  line-height: 0.2rem;
 }
 </style>

components/home/Banner.vue

 <template>
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
     <template v-for="(item, index) in list">
-      <van-swipe-item :key="index"><img :src="item.src" class="banner-img" /></van-swipe-item>
+      <van-swipe-item :key="index">
+        <nuxt-link :to="`/about/news/${item.id}`"><img :src="item.photo_uri" class="banner-img" /></nuxt-link>
+      </van-swipe-item>
     </template>
   </van-swipe>
 </template>
@@ -13,11 +15,9 @@ export default {
       list: []
     }
   },
-  fetch() {
-    this.list = [
-      { src: '/images/banner.png', href: '' },
-      { src: '/images/banner.png', href: '' }
-    ]
+  async fetch() {
+    const params = { page: 1, per_page: 100, type: 69, project_id: 1013 }
+    this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
   }
 }
 </script>

components/home/Degree.vue

@@ -15,8 +15,10 @@
       <template v-for="(item, index) in data">
         <ul class="tab-right" :key="index" v-if="indexActive === index">
           <li :key="cIndex + 'c'" v-for="(cItem, cIndex) in item.content">
-            <img :src="cItem.icon" class="icon" />
-            <div class="text" v-html="cItem.text"></div>
+            <app-link :item="cItem">
+              <img :src="cItem.icon" class="icon" />
+              <div class="text" v-html="cItem.text"></div>
+            </app-link>
           </li>
         </ul>
       </template>
@@ -24,7 +26,10 @@
   </div>
 </template>
 <script>
+import AppLink from '@/components/Link'
+
 export default {
+  components: { AppLink },
   data() {
     return {
       indexActive: 0,
@@ -36,7 +41,7 @@ export default {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8b32a69e26a4d20eaddc8bb3d6f4ccc5.png',
               text: '海外留学<br />SHMS',
-              path: ''
+              onClick: this.showTips
             }
           ]
         },
@@ -47,25 +52,25 @@ export default {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/69fc809f95bd7985e13827a6dcd4dcd1.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ac6cde3fb04de4c3478d02e7572fe9c9.png',
               text: '金融硕士<br />MSF',
-              path: ''
+              href: 'https://kelley.ezijing.com'
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/ac66fee3cad3cca2b4b38ef3cceed9dc.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8fe0f6c8995847dee420e70a21da4d3f.png',
-              text: '教育学硕士<br />MED',
-              path: ''
+              text: '教育学硕士MED<br />（早教-蒙台梭利）',
+              href: 'https://cu.ezijing.com'
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/aa2c06a74a470cbee1443e66bb6bc981.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/db8ca58d8032f32a77a7a9deea9b417b.png',
               text: '应用心理学<br />硕士MAP',
-              path: ''
+              href: 'https://ciis.ezijing.com'
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/70748b8e679e7b3f40310635d9f3bae7.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/49f4eb2509433e42555754f74a4dcae2.png',
               text: '未来金融<br />领袖计划',
-              path: ''
+              href: 'https://cfflp.ezijing.com'
             }
           ]
         },
@@ -76,19 +81,19 @@ export default {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/17ef11bc534aadf1d8e3b94fd6d4350f.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0d2ea39ee5d40200a6f513db2e9b88de.png',
               text: '通用MBA',
-              path: ''
+              onClick: this.showTips
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/a23695e5428a3d5e0a2f47f7d36ebb14.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/a2c4b8a1f799b35f04ed618f7b47b9c1.png',
               text: '金融MBA',
-              path: ''
+              href: 'https://sofia.ezijing.com'
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/709ab2dd245369c16631a8d9ebe67006.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/29917e1f3d47ca9381b5e0c397e1f082.png',
-              text: '酒店与旅游工<br/>商管理MBA',
-              path: ''
+              text: '酒店与旅游工商<br/>管理MBA',
+              href: 'https://shms.ezijing.com'
             }
           ]
         },
@@ -99,13 +104,13 @@ export default {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/841ff657ca26c0f26da3e24d799ae2a5.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/5785a4d37264a8293b956a3f065f11cf.png',
               text: '心理学博士<br/>（即将推出）',
-              path: ''
+              onClick: this.showTips
             },
             {
               icon: 'https://zws-imgs-pub.ezijing.com/static/public/aebf1f65a324cff54eb9466bf2fd0b66.png',
               iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/526bebd1d9279c19895c5c4f1a3cfcce.png',
               text: '工商管理学博士<br/>（即将推出）',
-              path: ''
+              onClick: this.showTips
             }
           ]
         }
@@ -115,6 +120,9 @@ export default {
   methods: {
     changeIndex(n) {
       this.indexActive = n
+    },
+    showTips() {
+      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
     }
   }
 }

components/home/Post.vue

 <template>
   <card title="项目公告">
-    <template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
+    <template #header-aside><nuxt-link to="/about/news">查看更多+</nuxt-link></template>
     <div class="future">
       <div class="future-left">即将开始的<br />课程日期</div>
       <div class="future-right">
@@ -11,13 +11,15 @@
       </div>
     </div>
     <div class="list">
-      <div class="list-item" v-for="(item, index) in list" :key="index">
-        <div class="list-item__date">
-          <p class="t1">{{ formatMD(item.created_time) }}</p>
-          <p class="t2">{{ formatYY(item.created_time) }}</p>
+      <nuxt-link :to="`/about/news/${item.id}`" v-for="(item, index) in list" :key="index">
+        <div class="list-item">
+          <div class="list-item__date">
+            <p class="t1">{{ formatMD(item.created_time) }}</p>
+            <p class="t2">{{ formatYY(item.created_time) }}</p>
+          </div>
+          <div class="list-item__title">{{ item.title }}</div>
         </div>
-        <div class="list-item__title">{{ item.title }}</div>
-      </div>
+      </nuxt-link>
     </div>
   </card>
 </template>
@@ -32,10 +34,7 @@ export default {
         { title: 'KELLEY商学院金融硕士（MSF）开学典礼', created_time: '2020-01-22 14:41:08' },
         { title: '酒店管理HMBA报名截止日', created_time: '2020-01-22 14:41:08' }
       ],
-      list: [
-        { title: '清华、交大等名校本硕博齐聚，全美第一在线金融硕士盛大开学！', created_time: '2020-01-22 14:41:08' },
-        { title: '紫荆·国际金融人才论坛重磅发布“中国未来金融领袖计划”', created_time: '2020-01-22 14:41:08' }
-      ]
+      list: []
     }
   },
   methods: {
@@ -55,7 +54,10 @@ export default {
       return date.getMonth() + 1 + '/' + date.getDate()
     }
   },
-  fetch() {}
+  async fetch() {
+    const params = { page: 1, per_page: 100, type: 75, project_id: 1013 }
+    this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
+  }
 }
 </script>
 

components/home/Service.vue

@@ -3,39 +3,63 @@
     <div class="service-hd">教育服务</div>
     <ul class="service-bd">
       <li v-for="(item, index) in data" :key="index">
-        <img :src="item.icon" class="icon" />
-        <div class="text" v-html="item.text"></div>
+        <app-link :item="item">
+          <img :src="item.icon" class="icon" />
+          <div class="text" v-html="item.text"></div>
+        </app-link>
       </li>
     </ul>
   </div>
 </template>
 <script>
+import AppLink from '@/components/Link'
 export default {
+  components: { AppLink },
   data() {
     return {
       data: [
         {
-          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/3118a654ec7f92a52b7d04f2f1f5989a.png',
           text: '1+X',
-          path: ''
+          href: 'https://x.ezijing.com'
         },
         {
-          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/7bea5e01e4e4c92e104bb1d73d313500.png',
           text: '专业共建',
-          path: ''
+          onClick: this.showTips
         },
         {
-          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6db512b8b2b4501651e6f9bc520d7379.png',
           text: '校企合作',
-          path: ''
+          onClick: this.showTips
         },
         {
-          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/0e5522064d9070290b3d541a485d469f.png',
           text: '产业学院',
-          path: ''
+          onClick: this.showTips
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/0912f621abe188ccc84df6520a8fecf9.png',
+          text: '双高建设',
+          onClick: this.showTips
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6cf5b6010dd7d35a80d4acc270db8a86.png',
+          text: '在线教育<br />解决方案',
+          onClick: this.showTips
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/9603456c7edb101ec5469f92e9e21553.png',
+          text: '更多',
+          onClick: this.showTips
         }
       ]
     }
+  },
+  methods: {
+    showTips() {
+      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
+    }
   }
 }
 </script>
@@ -53,8 +77,11 @@ export default {
 }
 .service-bd {
   display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
   li {
-    width: 0.78rem;
+    min-width: 0.78rem;
     height: 1.1rem;
     background: #fff;
     cursor: pointer;

nuxt.config.js

@@ -6,6 +6,9 @@ if (process.env.NODE_ENV === 'production') {
 }
 export default {
   ...config,
+  axios: {
+    baseURL: 'https://project-api.ezijing.com'
+  },
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: '紫荆教育-在线MBA课程-MBA在线课程-专业金融在线教育品牌',

pages/about/news/_id.vue

+<template>
+  <div>
+    <tab-nav active="3"></tab-nav>
+    <div class="main-content news-detail">
+      <div class="back" @click="back">&lt;返回</div>
+      <div class="date">{{ formatDate(data.created_time) }}</div>
+      <h1 class="title">{{ data.title }}</h1>
+      <div v-html="data.content"></div>
+    </div>
+    <div class="related">
+      <h2 class="title">相关推荐</h2>
+      <news-item v-for="item in list" :item="item" :key="item.id"></news-item>
+      <div class="more"><nuxt-link to="/about/news">查看更多</nuxt-link></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabNav from '@/components/about/TabNav'
+import NewsItem from '@/components/about/NewsItem'
+export default {
+  components: { TabNav, NewsItem },
+  data() {
+    return {
+      data: {},
+      list: []
+    }
+  },
+  computed: {
+    pid() {
+      return this.$route.params.id
+    }
+  },
+  async asyncData({ $axios, params }) {
+    // 新闻详情
+    const data = await $axios.$get(`/api/zws/v1/cms/news/${params.id}`).then(res => res)
+    // 相关推荐
+    const requestParams = { page: 1, per_page: 100, type: 74, project_id: 1013 }
+    const list = await $axios.$get('/api/zws/v1/cms/news', { params: requestParams }).then(res => res)
+
+    return { data, list }
+  },
+  methods: {
+    formatDate(value) {
+      const date = new Date(value)
+      return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
+    },
+    back() {
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.news-detail {
+  padding: 0.2rem 0.15rem;
+  background-color: #fff;
+  border-top: 1px solid #e6e6e6;
+  .back {
+    font-size: 0.1rem;
+    color: #424242;
+    cursor: pointer;
+  }
+  .date {
+    margin-top: 0.15rem;
+    font-size: 0.1rem;
+    color: #9b9b9b;
+  }
+  .title {
+    margin: 0.1rem 0;
+    padding: 0 0 0.1rem;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+}
+.related {
+  margin: 0 0.15rem;
+  .title {
+    padding: 0.2rem 0;
+    font-size: 0.14rem;
+    color: #333;
+  }
+  .more {
+    margin: 0.1rem auto 0.2rem;
+    width: 0.82rem;
+    height: 0.2rem;
+    font-size: 0.1rem;
+    color: #424242;
+    line-height: 0.2rem;
+    text-align: center;
+    border: 1px solid #d3d3d3;
+    border-radius: 0.04rem;
+  }
+}
+</style>

pages/about/news/index.vue

@@ -5,16 +5,33 @@
       src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
       class="main-banner"
     />
+    <div class="news-list">
+      <news-item v-for="item in list" :item="item" :key="item.id"></news-item>
+    </div>
   </div>
 </template>
 
 <script>
 import TabNav from '@/components/about/TabNav'
+import NewsItem from '@/components/about/NewsItem'
 export default {
   props: { acitve: String },
-  components: { TabNav }
+  components: { TabNav, NewsItem },
+  data() {
+    return {
+      list: []
+    }
+  },
+  async asyncData({ $axios }) {
+    const params = { page: 1, per_page: 100, type: 74, project_id: 1013 }
+    const list = await $axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
+    return { list }
+  }
 }
 </script>
 
-<style>
+<style lang="scss">
+.news-list {
+  margin: 0.2rem 0.15rem;
+}
 </style>