0607

src/pages/ArtTrain/ArtTrain.vue

@@ -39,28 +39,83 @@ export default {
     return {
       classList: [],
       recommend: [],
-      character: {},
+      character: [],
-      health: {},
+      health: [],
-      photography: {}
+      photography: [],
+      page: {
+        page: 1,
+        rows: 8,
+        totalPage: 1,
+        newsDirectoriesId: '',
+        newsDirectoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
+      }
     }
   },
   methods: {
-    getArtData () {
+    getType: function () {
       var self = this
-      axios.get('/api/artTrain.json').then(function (res) {
+      axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
-        res = res.data
+        params: {
-        const data = res.data
+          directoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
-        console.log(data)
+        }
-        self.classList = data.classList
+      }).then(function (res) {
-        self.recommend = data.recommend
+        console.log(res)
-        self.character = data.character
+        self.classList = res.data
-        self.health = data.health
+      })
-        self.photography = data.photography
+    },
+    getCharacter: function () {
+      var self = this
+      axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 8,
+          newsDirectoriesId: 'af9229f6-6e32-4594-808d-74955362427d'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.recommend = res.data.rows
+        self.character = res.data.rows
+      })
+    },
+    getHealth: function () {
+      var self = this
+      axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 8,
+          newsDirectoriesId: 'ef97b165-ce82-47e4-8e3b-98ead4f6c1cc'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.health = res.data.rows
+      })
+    },
+    getPhotography: function () {
+      var self = this
+      axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 8,
+          newsDirectoriesId: '3b6f83b5-bcb4-4545-98d3-64e8cf596157'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.photography = res.data.rows
+        console.log(self.photography)
       })
     }
   },
   mounted () {
-    this.getArtData()
+    this.getType()
+    this.getCharacter()
+    this.getHealth()
+    this.getPhotography()
   }
 }
 </script>

src/pages/ArtTrain/components/Banner.vue

@@ -2,7 +2,7 @@
   <div class="train-banner">
     <div class="train-banner-content">
       <ul>
-        <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in classList" :key="list.id">{{list.name}}</router-link>
+        <router-link :to="{path: '/artTrainList/' + list.newsDirectoriesId}" tag="li" v-for="list in classList" :key="list.id">{{list.directoriesName}}</router-link>
       </ul>
     </div>
   </div>

src/pages/ArtTrain/components/Character.vue

@@ -1,35 +1,31 @@
 <template>
     <div class="character">
       <div class="character-title">
-        <h2>蒙古族特色</h2>
+        <h2>民族特色</h2>
-        <ul>
+        <router-link to="/artTrainList/af9229f6-6e32-4594-808d-74955362427d">MORE>></router-link>
-          <li class="active">全部</li>
-          <li v-for="list in character.characterType" :key="list.id">{{list.typeName}}</li>
-        </ul>
-        <router-link to="/artTrain">MORE>></router-link>
       </div>
       <div class="character-content">
         <div class="character-left">
-          <span>蒙古族特色</span>
+          <span>民族族特色</span>
           <div class="character-intro">
-            <p>{{character.characterText}}</p>
+            <p>蒙古文化是由蒙古民族创造的一种游牧文化。从13世纪开始蒙古人在成吉思汗的旗帜下再度统一草原部落，建立了疆域横跨欧亚的蒙古帝国，用国家形式重新整合各种社会力量，从而把部落与民族文化全面提高到了达到封建国家水准的“文明的进步状态”。成吉思汗的继承者们入主中原，建立了元朝。在历史的进程中元朝虽然消亡，但是从此形成的蒙古族却成为草原的主体民族，成为文化的承载者。</p>
           </div>
           </div>
         <div class="character-right">
           <ul>
-            <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in character.characterList" :key="list.id">
+            <li v-for="(list,idx) in character" :key="idx" @click="goDetail(list.templateRecordUrl)">
               <div class="recommend-img">
-                <img :src="list.classPoster" alt="">
+                <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
                 <img src="@/assets/images/play.svg" alt="" class="play-btn">
               </div>
               <div class="recommend-info">
-                <h3>{{list.className}}</h3>
+                <h3>{{list.newsContentTitle}}</h3>
                 <div class="recommend-info-bottom">
-                  <span>讲师：{{list.teacher}}</span>
+                  <span>讲师：{{list.newsContentAuthor}}</span>
-                  <i>{{list.view}}</i>
+                  <!--<i>{{list.view}}</i>-->
                 </div>
               </div>
-            </router-link>
+            </li>
           </ul>
         </div>
       </div>
@@ -40,11 +36,14 @@
 export default {
   name: 'Character',
   props: {
-    character: Object
+    character: Array
   },
   data () {
-    return {
+    return {}
-      selectedType: '00'
+  },
+  methods: {
+    goDetail: function (url) {
+      window.location.href = 'http://192.168.0.104/' + url
     }
   }
 }

src/pages/ArtTrain/components/Health.vue

@@ -2,34 +2,30 @@
   <div class="character">
     <div class="character-title">
       <h2>健康养生</h2>
-      <ul>
+      <router-link to="/artTrainList/ef97b165-ce82-47e4-8e3b-98ead4f6c1cc">MORE>></router-link>
-        <li :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</li>
-        <li v-for="list in health.healthType" :key="list.id" :class="{active: selectedType == list.id}" @click="selectedType = list.id">{{list.typeName}}</li>
-      </ul>
-      <router-link to="/artTrain">MORE>></router-link>
     </div>
     <div class="character-content">
       <div class="character-left">
         <span>健康养生</span>
         <div class="character-intro">
-          <p>{{health.healthText}}</p>
+          <p>养生指保养、调养、颐养生命。即以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、辟谷等多种方法,以期达到健康、长寿的目的。本、戏曲剧本在内。一般多取其广义的概念。戏剧人物的逼真性、戏剧冲突的尖锐性、戏剧场面的集中性、台词的口语化和动作性构成了戏剧文学的四大审美特征。</p>
         </div>
       </div>
       <div class="character-right">
         <ul>
-          <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in health.healthList" :key="list.id">
+          <li v-for="(list,idx) in health" :key="idx" @click="goDetail(list.templateRecordUrl)">
             <div class="recommend-img">
-              <img :src="list.classPoster" alt="">
+              <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
               <img src="@/assets/images/play.svg" alt="" class="play-btn">
             </div>
             <div class="recommend-info">
-              <h3>{{list.className}}</h3>
+              <h3>{{list.newsContentTitle}}</h3>
               <div class="recommend-info-bottom">
-                <span>讲师：{{list.teacher}}</span>
+                <span>讲师：{{list.newsContentAuthor}}</span>
-                <i>{{list.view}}</i>
+                <!--<i>{{list.view}}</i>-->
               </div>
             </div>
-          </router-link>
+          </li>
         </ul>
       </div>
     </div>
@@ -40,12 +36,17 @@
 export default {
   name: 'Health',
   props: {
-    health: Object
+    health: Array
   },
   data () {
     return {
       selectedType: '00'
     }
+  },
+  methods: {
+    goDetail: function (url) {
+      window.location.href = 'http://192.168.0.104/' + url
+    }
   }
 }
 </script>

src/pages/ArtTrain/components/Photography.vue

@@ -2,34 +2,30 @@
   <div class="character">
     <div class="character-title">
       <h2>摄影技巧</h2>
-      <ul>
+      <router-link to="/artTrainList/3b6f83b5-bcb4-4545-98d3-64e8cf596157">MORE>></router-link>
-        <li :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</li>
-        <li v-for="list in photography.photographyType" :key="list.id" :class="{active: selectedType == list.id}" @click="selectedType = list.id">{{list.typeName}}</li>
-      </ul>
-      <router-link to="/artTrain">MORE>></router-link>
     </div>
     <div class="character-content">
       <div class="character-left">
         <span>摄影技巧</span>
         <div class="character-intro">
-          <p>{{photography.photographyText}}</p>
+          <p>影视摄影从运动、色彩、光线，两极镜头等摄影造型元素入手，论述如何认识，运用它们去构造丰富的视觉造型语言。进而进行影视摄影创作。运动，是影视摄影最重要的造型元素，“是银幕造型的第一艺术特点”，也是影视摄影的生命。</p>
         </div>
       </div>
       <div class="character-right">
         <ul>
-          <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in photography.photographyList" :key="list.id">
+          <li v-for="(list,idx) in photography" :key="idx" @click="goDetail(list.templateRecordUrl)">
             <div class="recommend-img">
-              <img :src="list.classPoster" alt="">
+              <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
               <img src="@/assets/images/play.svg" alt="" class="play-btn">
             </div>
             <div class="recommend-info">
-              <h3>{{list.className}}</h3>
+              <h3>{{list.newsContentTitle}}</h3>
               <div class="recommend-info-bottom">
-                <span>讲师：{{list.teacher}}</span>
+                <span>讲师：{{list.newsContentAuthor}}</span>
-                <i>{{list.view}}</i>
+                <!--<i>{{list.view}}</i>-->
               </div>
             </div>
-          </router-link>
+          </li>
         </ul>
       </div>
     </div>
@@ -40,12 +36,17 @@
 export default {
   name: 'Photography',
   props: {
-    photography: Object
+    photography: Array
   },
   data () {
     return {
       selectedType: '00'
     }
+  },
+  methods: {
+    goDetail: function (url) {
+      window.location.href = 'http://192.168.0.104/' + url
+    }
   }
 }
 </script>

src/pages/ArtTrain/components/Recommend.vue

@@ -2,19 +2,19 @@
     <div class="recommend">
       <h2>推荐课程</h2>
       <ul>
-        <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in recommend" :key="list.id">
+        <li v-for="(list,idx) in recommend" :key="idx" @click="goDetail(list.templateRecordUrl)">
           <div class="recommend-img">
-            <img :src="list.classPoster" alt="">
+            <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
             <img src="@/assets/images/play.svg" alt="" class="play-btn">
           </div>
           <div class="recommend-info">
-            <h3>{{list.className}}</h3>
+            <h3>{{list.newsContentTitle}}</h3>
             <div class="recommend-info-bottom">
-              <span>讲师：{{list.teacher}}</span>
+              <span>讲师：{{list.newsContentAuthor}}</span>
-              <i>{{list.view}}</i>
+              <!--<i>{{list.view}}</i>-->
             </div>
           </div>
-        </router-link>
+        </li>
       </ul>
     </div>
 </template>
@@ -24,6 +24,12 @@ export default {
   name: 'Recommend',
   props: {
     recommend: Array
+  },
+  methods: {
+    goDetail: function (url) {
+      console.log(url)
+      window.location.href = 'http://192.168.0.104/' + url
+    }
   }
 }
 </script>

src/pages/ArtTrainList/ArtTrainList.vue

@@ -0,0 +1,306 @@
+<template>
+    <div>
+      <Header></Header>
+      <div class="location">
+        <div class="location-content">
+          您的位置：<router-link to="/">首页</router-link> > 艺术培训
+        </div>
+      </div>
+      <div class="type">
+        <div class="type-container">
+          <span>类型：</span>
+          <ul>
+            <li :class="{active: page.newsDirectoriesId == ''}" @click="changeType(null)">全部</li>
+            <li v-for="(btn,idx) in typeList" :key="idx" :class="{active: page.newsDirectoriesId == btn.newsDirectoriesId}" @click="changeType(btn.newsDirectoriesId)">{{btn.directoriesName}}</li>
+          </ul>
+        </div>
+      </div>
+      <div class="volunteer">
+        <ul v-if="hasData">
+          <li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list.templateRecordUrl)">
+            <div class="volunteer-img">
+              <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
+            </div>
+            <div class="volunteer-info">
+              <h3>{{list.newsContentTitle}}</h3>
+              <p>讲师：{{list.newsContentAuthor}}</p>
+            </div>
+          </li>
+        </ul>
+        <div class="no-data" v-else>
+          <img src="@/assets/images/no-data.png" alt="">
+        </div>
+      </div>
+      <div class="pager" v-if="hasData">
+        <span @click="paging(1)">首页</span>
+        <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+        <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+          <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+            {{cpage}}
+          </li>
+        </ul>
+        <ul v-if="page.totalPage > 5">
+          <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+            {{cpage}}
+          </li>
+          <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+            {{page.totalPage - 5 + cpage}}
+          </li>
+          <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+            {{page.page - (3 - cpage)}}
+          </li>
+        </ul>
+        <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+        <span @click="paging(page.totalPage)">尾页</span>
+        <input type="text" v-model="changePage" v-if="showJumpBtn">
+        <i v-if="showJumpBtn">/{{page.totalPage}}页</i>
+        <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
+      </div>
+      <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from '@/common/components/Header'
+import Footer from '@/common/components/Footer'
+import axios from 'axios'
+export default {
+  name: 'ArtTrainList',
+  components: {
+    Header,
+    Footer
+  },
+  data () {
+    return {
+      changePage: 1,
+      typeList: [],
+      classList: [],
+      page: {
+        page: 1,
+        rows: 8,
+        totalPage: 1,
+        newsDirectoriesId: '',
+        newsDirectoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
+      }
+    }
+  },
+  computed: {
+    showJumpBtn () {
+      return this.page.totalPage > 1
+    },
+    hasData () {
+      return this.classList.length > 0
+    }
+  },
+  methods: {
+    goDetail: function (url) {
+      window.location.href = 'http://192.168.0.104/' + url
+    },
+    doJumpPage: function () {
+      this.page.page = this.changePage
+      this.getList()
+    },
+    paging: function (page) {
+      this.page.page = page
+      this.getList()
+    },
+    changeType: function (type) {
+      if (type) {
+        this.page.newsDirectoriesId = type
+      } else {
+        this.page.newsDirectoriesId = ''
+      }
+      this.getList()
+    },
+    getType: function () {
+      var self = this
+      axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
+        params: {
+          directoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
+        }
+      }).then(function (res) {
+        self.typeList = res.data
+      })
+    },
+    getList: function () {
+      var self = this
+      axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
+        params: self.page
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.classList = res.data.rows
+        self.page.page = res.data.page
+        self.changePage = res.data.page
+        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+      })
+    }
+  },
+  mounted: function () {
+    this.page.newsDirectoriesId = this.$route.params.type
+    this.getType()
+    this.getList()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.location
+  background #e5e5e5
+  line-height 30px
+  .location-content
+    width 1200px
+    margin 0 auto
+    font-size 14px
+    color #565656
+.volunteer
+  width 1200px
+  margin 20px auto
+  ul
+    overflow hidden
+    min-height 400px
+    li
+      width 280px
+      float left
+      margin-right 20px
+      border 1px solid #a8a8a8
+      box-sizing border-box
+      margin-bottom 20px
+      cursor pointer
+      .volunteer-img
+        width 100%
+        height 185px
+        position relative
+        img
+          width 100%
+          height 100%
+        span
+          display block
+          width 70px
+          height 25px
+          line-height 25px
+          text-align center
+          color #fff
+          font-size 12px
+          background #999
+          border-bottom-left-radius 8px
+          border-bottom-right-radius 8px
+          position absolute
+          top 0
+          left 20px
+      .volunteer-info
+        padding 10px 20px
+        h3
+          font-size 18px
+          color #565656
+          font-weight normal
+          white-space nowrap
+          overflow hidden
+          text-overflow: ellipsis
+        p
+          font-size 14px
+          color #a8a8a8
+          line-height 30px
+        button
+          width 120px
+          height 30px
+          border none
+          background #01a9f8
+          border-radius 4px
+          color #fff
+          font-size 14px
+          display block
+          margin 0 auto
+          cursor pointer
+.type
+  padding 15px 0
+  background #f0f0f0
+  .type-container
+    width 1200px
+    margin 0 auto
+    overflow hidden
+    font-size 14px
+    color #565656
+    span
+      float left
+      line-height 30px
+    ul
+      overflow hidden
+      float left
+      margin-left 20px
+      li
+        float left
+        width 80px
+        height: 30px
+        text-align center
+        line-height 30px
+        cursor pointer
+        &.active
+          background #01a9f8
+          border-radius 4px
+          color #fff
+.pager
+  width 1200px
+  margin 20px auto
+  text-align center
+  font-size 0
+  span
+    display inline-block
+    padding 0 15px
+    line-height 25px
+    color #676767
+    border 1px solid #d2d2d2
+    font-size 14px
+    margin 0 5px
+    vertical-align middle
+    cursor pointer
+  ul
+    display inline-block
+    overflow hidden
+    vertical-align middle
+    li
+      width 45px
+      line-height 25px
+      float left
+      margin-right 10px
+      border 1px solid #d2d2d2
+      cursor pointer
+      text-align center
+      font-size 14px
+      color #676767
+      &.active
+        background #01a9f8
+        color #fff
+        border 1px solid #01a9f8
+      &:last-child
+        margin 0
+  input
+    width 50px
+    height 25px
+    border 1px solid #d2d2d2
+    text-align center
+    vertical-align middle
+  i
+    font-style normal
+    color #676767
+    font-size 14px
+    line-height 25px
+    display inline-block
+    vertical-align middle
+    margin 0 5px
+  button
+    border none
+    outline none
+    background #4792C2
+    width 50px
+    height 25px
+    vertical-align middle
+    color #fff
+    font-size 14px
+.no-data
+  padding 120px 0
+  text-align center
+  img
+    width 200px
+</style>

src/pages/Exhibition/Exhibition.vue

@@ -6,46 +6,52 @@
           您的位置：<router-link to="/">首页</router-link> > 展览展示
         </div>
       </div>
-      <div class="select">
+      <!--<div class="select">-->
-        <div class="select-container">
+        <!--<div class="select-container">-->
-          <div class="select-line">
+          <!--<div class="select-line">-->
-            <span>展览分类></span>
+            <!--<span>展览分类></span>-->
-            <button :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</button>
+            <!--<button :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</button>-->
-            <button v-for="btn in typeList" :key="btn.id" :class="{active: selectedType == btn.id}" @click="selectedType = btn.id">展览展示</button>
+            <!--<button v-for="btn in typeList" :key="btn.id" :class="{active: selectedType == btn.id}" @click="selectedType = btn.id">展览展示</button>-->
-          </div>
+          <!--</div>-->
-        </div>
+        <!--</div>-->
-      </div>
+      <!--</div>-->
       <div class="exhibition">
         <ul>
-          <router-link :to="{path: '/exhibitionDetail/' + list.id}" tag="li" v-for="list in exhibition" :key="list.id">
+          <li v-for="(list,idx) in exhibition" :key="idx" @click="goDetail(list.templateRecordUrl)">
             <div class="exhibition-img">
-              <img :src="list.poster" alt="">
+              <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
             </div>
             <div class="exhibition-info">
-              <h1>{{list.exhibitionName}}</h1>
+              <h1>{{list.newsContentTitle}}</h1>
-              <div class="exhibition-info-bottom">
+              <p>作者：{{list.newsContentAuthor}}</p>
-                <span class="good">{{list.good}}</span>
-                <span class="view">{{list.view}}</span>
-              </div>
             </div>
-          </router-link>
+          </li>
         </ul>
       </div>
-      <div class="pager">
+      <div class="pager" v-if="hasData">
-        <span>首页</span>
+        <span @click="paging(1)">首页</span>
-        <span>上一页</span>
+        <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
-        <ul>
+        <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
-          <li>1</li>
+          <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
-          <li>2</li>
+            {{cpage}}
-          <li>...</li>
+          </li>
-          <li>59</li>
-          <li>60</li>
         </ul>
-        <span>下一页</span>
+        <ul v-if="page.totalPage > 5">
-        <span>尾页</span>
+          <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
-        <input type="text" value="1">
+            {{cpage}}
-        <i>/58页</i>
+          </li>
-        <button>跳转</button>
+          <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+            {{page.totalPage - 5 + cpage}}
+          </li>
+          <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+            {{page.page - (3 - cpage)}}
+          </li>
+        </ul>
+        <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+        <span @click="paging(page.totalPage)">尾页</span>
+        <input type="text" v-model="changePage" v-if="showJumpBtn">
+        <i v-if="showJumpBtn">/{{page.totalPage}}页</i>
+        <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
       </div>
       <Footer></Footer>
     </div>
@@ -63,25 +69,53 @@ export default {
   },
   data () {
     return {
-      selectedType: '00',
+      changePage: 1,
-      typeList: [],
+      exhibition: [],
-      exhibition: []
+      page: {
+        page: 1,
+        rows: 8,
+        totalPage: 1,
+        newsDirectoriesId: 'f1d5d313-f728-4dda-9843-1116d97e17b0'
+      }
+    }
+  },
+  computed: {
+    showJumpBtn () {
+      return this.page.totalPage > 1
+    },
+    hasData () {
+      return this.exhibition.length > 0
     }
   },
   methods: {
-    getExhibitionData () {
+    goDetail: function (url) {
+      window.location.href = 'http://192.168.0.104/' + url
+    },
+    doJumpPage: function () {
+      this.page.page = this.changePage
+      this.getList()
+    },
+    paging: function (page) {
+      this.page.page = page
+      this.getList()
+    },
+    getList: function () {
       var self = this
-      axios.get('/api/exhibition.json').then(function (res) {
+      axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
-        res = res.data
+        params: self.page
-        const data = res.data
+      }).then(function (res) {
-        console.log(data)
+        console.log(res.data)
-        self.typeList = data.typeList
+        for (var i = 0; i < res.data.rows.length; i++) {
-        self.exhibition = data.exhibition
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.exhibition = res.data.rows
+        self.page.page = res.data.page
+        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
       })
     }
   },
-  mounted () {
+  mounted: function () {
-    this.getExhibitionData()
+    this.getList()
   }
 }
 </script>
@@ -157,6 +191,13 @@ export default {
           overflow hidden
           text-overflow: ellipsis
           margin-bottom 5px
+        p
+          font-size 14px
+          color #565656
+          text-align center
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
         .exhibition-info-bottom
           span
             font-size 14px
@@ -165,7 +206,7 @@ export default {
               float right
 .pager
   width 1200px
-  margin 0 auto 20px
+  margin 20px auto
   text-align center
   font-size 0
   span
@@ -177,6 +218,7 @@ export default {
     font-size 14px
     margin 0 5px
     vertical-align middle
+    cursor pointer
   ul
     display inline-block
     overflow hidden
@@ -191,6 +233,12 @@ export default {
       text-align center
       font-size 14px
       color #676767
+      &.active
+        background #01a9f8
+        color #fff
+        border 1px solid #01a9f8
+      &:last-child
+        margin 0
   input
     width 50px
     height 25px

src/router/index.js

@@ -26,6 +26,7 @@ import Register from '@/pages/Register/Register'
 import IntangibleHeritage from '@/pages/IntangibleHeritage/IntangibleHeritage'
 import IntangibleHeritageDetail from '@/pages/IntangibleHeritageDetail/IntangibleHeritageDetail'
 import SearchResult from '@/pages/SearchResult/SearchResult'
+import ArtTrainList from '@/pages/ArtTrainList/ArtTrainList'
 Vue.use(Router)
 
 export default new Router({
@@ -263,6 +264,15 @@ export default new Router({
         title: '搜索结果',
         keepAlive: false
       }
+    },
+    {
+      path: '/artTrainList/:type',
+      name: 'ArtTrainList',
+      component: ArtTrainList,
+      meta: {
+        title: '艺术培训',
+        keepAlive: false
+      }
     }
   ]
 })