nuxtProject/pages/news/index.vue

<template>
  <div class="client-newsInfor-page">
    <!-- 新闻资讯banner栏 -->
    <div class="newsInfor-banner"></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,
      };
    },
    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>