nuxtProject/pages/news/index.vue

<template>
  <div class="client-newsInfor-page">
    <!-- 新闻资讯banner栏 -->
    <div class="newsInfor-banner" @click="clickBanner(bannerList[0].url)"
         :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/course/course-banner-background.jpg`)})`}">
    </div>
    <!-- 新闻资讯 -->
    <ul class="platform-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" style="width:100%">
        <template v-if="activeIndex!=2" >
          <new-list
            v-for="(item,index) in newsList"
            :newsData="item"
            :key="index"></new-list>
        </template>

        <template v-else>
          <NewsListRiZhi  v-for="(item,index) in newsList"
                          :newsData="item"
                          :key="index"></NewsListRiZhi>
        </template>

      </ul>
      <div class="client-el-pagination">
        <el-pagination
          background
          small
          class="mta-hidden-sm"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalLists">
        </el-pagination>
        <el-pagination
          background
          class="mta-hidden-xs"
          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';
  import NewsListRiZhi from '~/components/news/NewsListRiZhi';
  const defaultNewsClassifyId = 0;
  export default {
    name:       'news',
    layout:     'templateB',
    components: {
      NewList,NewsListRiZhi
    },
    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:           5,
          newsClassifyId: data[1].newsClassifyId || defaultNewsClassifyId,
        };

        const res2 = await $axios.post(url2, opt);
        const { data: { data: data2 } } = res2;



        let [res1] = await Promise.all([
                                               await $axios.$post(`/home/banner/list`, { 'code': 5 }).then(res => {
                                                 return res;
                                               }),
                                             ]);
        return {
          bannerList: res1.data.data||[],
          newsList:          data2.data || [],
          totalLists:        data2.total || defaultNewsClassifyId,
          newsClassifyData:  data || [],
          curNewsClassifyId: data[1].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:      1,
        // banner图
        newsInforBannerImg: require(`~/static/images/client/newsInfor/newsInfor-banner-img.png`),
      };
    },
    head(){
      return {
        title: '麦塔考试系统案例_麦塔培训系统案例',
        meta: [
          {
            name: 'keywords',
            content: '麦塔考试系统案例_麦塔培训系统案例'
          },
          {
            name:'description',
            content:'麦塔致力于为客户提供专业的在线教育方案，打造企业核心竞争力。麦塔品牌诞生于2009年，公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。'
          }
        ],
      }
    },
    methods:    {
      clickBanner(data){
        if(data){
          window.open(data)
        }
      },
      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>