nuxtProject/pages/news/index.vue

<template>
  <div class="client-newsInfor-page">
    <!-- 新闻资讯banner栏 -->
    <div class="newsInfor-banner"></div>

    <!-- 新闻资讯 -->
    <ul class="newsInfor-menu-ul">
      <li :class="{'active':clicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in homeNewsClassify ">{{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 >
      <div class="client-el-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalLists">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name:       'news',
    layout:'templateB',
    components: {
    },
    props:      {
    },
    data() {
      return {
        clicked:0,
        newsClassifyId:   null,
        newsInforImg:     require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
        newsList:         [], //后端返回的数组
        homeNewsClassify: [],
        totalLists:         0,
        currentPage:        1,
        pageSize:           5,
      };
    },
    computed:   {},
    methods:    {
      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,
          page:           this.currentPage,
          size:            this.pageSize,
        };
       /* homeNewsList(req).then(res => {
          if (res.code === 0) {
            this.newsList = res.data.data;
            this.totalLists = res.data.total
          }
        });*/

      },
      getHomeNewsClassify() {
        /*homeNewsClassifyList().then(res => {
          if (res.code === 0) {
            this.homeNewsClassify = res.data;
            this.newsClassifyId = res.data[0].newsClassifyId
            this.getMessage(res.data[0].newsClassifyId);
          }
        });*/

      },
     /* checkInfo(data) {
        this.$router.push({ name: 'newsInforDetails', params: data });
      },*/
    },
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>