xzrkz-web/src/pages/CultureDynamics/CultureDynamics.vue

<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="dynamics">
      <div class="dynamics-left">
        <div class="dynamics-title">
          <span>文化动态</span>
        </div>
        <div class="dynamics-list">
          <ul v-if="hasData">
            <li v-for="(list,idx) in requestList" :key="idx" @click="goDetail(list.templateRecordUrl)">
              <div class="dynamics-list-left">
                <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
              </div>
              <div class="dynamics-list-right">
                <h3>{{list.newsContentTitle}}</h3>
                <span>{{list.newsContentPublishTime}}</span>
                <button>MORE></button>
              </div>
            </li>
          </ul>
          <div class="no-data" v-else>
            <img src="@/assets/images/no-data.png" alt="">
          </div>
        </div>
      </div>
      <div class="dynamics-right">
        <div class="dynamics-title">
          <span>点击排行榜</span>
        </div>
        <div class="click-rank">
          <ul>
            <li v-for="list in rankList" :key="list.id">
              <router-link to="/dynamics">{{list.dynamicTitle}}</router-link>
              <span>{{list.view}}</span>
            </li>
          </ul>
        </div>
      </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: 'CultureDynamics',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      changePage: 1,
      typeList: [],
      dynamicList: [],
      rankList: [],
      requestList: [],
      page: {
        page: 1,
        rows: 8,
        totalPage: 1,
        newsDirectoriesId: '',
        newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
      }
    }
  },
  computed: {
    showJumpBtn () {
      return this.page.totalPage > 1
    },
    hasData () {
      return this.requestList.length > 0
    }
  },
  methods: {
    doJumpPage: function () {
      this.page.page = this.changePage
      this.getNews()
    },
    getDynamicData () {
      var self = this
      axios.get('/api/dynamic.json').then(function (res) {
        res = res.data
        const data = res.data
        self.rankList = data.clickRank
      })
    },
    getNews: 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.requestList = res.data.rows
        self.page.page = res.data.page
        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
      })
    },
    paging: function (page) {
      this.page.page = page
      this.getNews()
    },
    goDetail: function (url) {
      window.location.href = 'http://192.168.0.104/' + url
    },
    getTypeList: function () {
      var self = this
      axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
        params: {
          directoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
        }
      }).then(function (res) {
        console.log(res)
        self.typeList = res.data
      })
    },
    changeType: function (type) {
      if (type) {
        this.page.newsDirectoriesId = type
      } else {
        this.page.newsDirectoriesId = ''
      }
      this.getNews()
    }
  },
  mounted () {
    this.getDynamicData()
    this.getNews()
    this.getTypeList()
  }
}
</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
.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
.dynamics
  width 1200px
  margin 20px auto
  overflow hidden
  .dynamics-title
    line-height 50px
    border-bottom 1px solid #dcdcdc
    span
      display inline-block
      border-bottom 2px solid #01a9f8
      font-size 18px
      color #01a9f8
  .dynamics-left
    float left
    width 730px
    .dynamics-list
      min-height 500px
      ul
        li
          padding 20px 0
          overflow hidden
          cursor pointer
          border-bottom solid 1px rgba(63, 63, 63, 0.17)
          .dynamics-list-left
            float left
            width 240px
            margin-right 10px
            img
              width 240px
              height 160px
          .dynamics-list-right
            float right
            width 480px
            h3
              font-size 18px
              color #565656
              white-space nowrap
              overflow hidden
              text-overflow: ellipsis
              margin-bottom 10px
            p
              font-size 14px
              color #565656
              line-height 25px
              &.desc
                height 50px
                overflow hidden
            span
              display block
              font-size 14px
              color #a8a8a8
              line-height 25px
              margin 10px 0
            button
              width 70px
              height: 25px
              text-align center
              line-height 25px
              border none
              outline none
              background #01a9f8
              color #fff
              font-size 12px
              border-radius 4px
      .no-data
        padding 80px 0
        text-align center
        img
          width 200px
  .dynamics-right
    float right
    width 380px
    ul
      li
        height 50px
        line-height 50px
        border-bottom 1px solid #dcdcdc
        a
          display inline-block
          max-width 75%
          overflow hidden
          white-space nowrap
          -ms-text-overflow: ellipsis
          text-overflow: ellipsis
          font-size 14px
          color #333
          &:hover
            color #01a9f8
        span
          float right
          font-size 14px
          color #999
.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
</style>