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>-->
    <!-- 新闻资讯 -->
    <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 url2 = '/client/web/news/list';
        const opt = {
          page:           1,
          size:           10,
        };

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

        return {
          newsList:          data2.data || [],
          totalLists:        data2.total || defaultNewsClassifyId,
        };
      } catch (e) {
        return {
          newsList:          [],
          totalLists:        0,
        };
      }

    },
    data() {
      return {
        clicked:          0,
        newsClassifyId:   null,
        homeNewsClassify: [],
        totalLists:       0,
        currentPage:      1,
        pageSize:         5,
        // 新闻数据
        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 = {
          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.currentPage = 1;
        this.getMessage();
      },
    },
    mounted() {

    }
  };
</script>
<style>

</style>