nuxtProject/pages/news/index.vue

<template>
  <div class="client-newsInfor-page">
    <!-- 新闻资讯banner栏 -->
    <div class="newsInfor-banner">
        <img :src="newsInforBannerImg" alt="新闻资讯">
    </div>

    <!-- 新闻资讯 -->
    <ul class="newsInfor-menu-ul">
      <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">
        <new-list
          v-for="(item,index) in newsList"
          :newsData="item"
          :key="index"></new-list>
      </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>
  import NewList from '~/components/news/NewsList';

  const defaultNewsClassifyId = 0;
  export default {
    name:       'news',
    layout:     'templateB',
    components: {
      NewList,
    },
    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,
        newsClassifyId:   null,
        homeNewsClassify: [],
        totalLists:       0,
        currentPage:      1,
        pageSize:         5,
        // 新闻分类数据
        // newsClassifyData: [],
        // 新闻数据
        newsList:         [],
        activeIndex:      0,
        // banner图
        newsInforBannerImg: require(`~/static/images/client/newsInfor/newsInfor-banner-img.png`),
      };
    },
    head(){
      return {
        title: '新闻中心',
        meta: [
          {
            name: 'keywords',
            content: '考试系统,培训系统,在线答题系统,在线学习系统,无纸化考试系统,在线培训考试系统'
          },
          {
            name:'description',
            content:'在线考试系统和在线培训系统是栋科提供的最有竞争力的考试系统和培训系统，栋科软件十年专注于在线考试系统和在线培训系统。'
          }
        ],
      }
    },
    methods:    {
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getMessage();
      },
      async getMessage() {
        let opt = {
          newsClassifyId: this.curNewsClassifyId,
          page:           this.currentPage,
          size:           this.pageSize,
        };
        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;
      },
      btnClick(data, index) {
        this.activeIndex = index;
        console.log(data);
        this.curNewsClassifyId = data.newsClassifyId;
        this.currentPage = 1;
        this.getMessage();
      },
    },
    mounted() {

    }
  };
</script>
<style>

</style>