nuxtProject/pages/news/index.vue

<template>
  <div class="client-newsInfor-page">
    <!-- 新闻资讯banner栏 -->
    <div class="newsInfor-banner">
        <img  @click="clickBanner(bannerList[0].url)" :src="bannerList[0].pic" alt="新闻资讯">
    </div>
    <!-- 新闻资讯 -->
    <ul class="platform-menu-ul2 mta-hidden-xs">
      <li style="cursor: pointer"
          :class="{'active':activeIndex===index}"
          @click="btnClick(item,index)"
          :key="index"
          v-for="(item,index) in newsClassifyData">
        {{item.name}}
      </li>
    </ul>
    <ul class="platform-menu-ul mta-hidden-sm">
      <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
          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';

  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:           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': 17 }).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:'在线考试培训行业实时新闻资讯，关注行业动态，努力研发更智能在线考试系统，满足客户需求。'
          }
        ],
      }
    },
    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 lang="scss" scoped>
.platform-menu-ul2 {
  margin:  110px auto 90px;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;


  &:after {
    content: '';
    position: absolute;
    bottom: -28px;
    width: 500px;
    height: 1px;
    background-color: #7CC659;
  }


  li {
    font-size: 30px;
    font-weight: 800;
    color: #9C9C9C;
    margin-right: 190px;

    &.active {
      color: #333;
      position: relative;

      &:after {
        content: '';
        width: 100%;
        position: absolute;
        bottom: -28px;
        left: 0;
        height: 3px;
        background-color: #00b96b;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }
  @media (max-width: 768px) {
    &:after {width: 50%;}

  }
}
</style>