wctdreamlandwebsite-front/pages/news.vue

<template>
  <div id="newList">
    <img
      v-show="mobileCheck"
      :src="require('@/assets/mobile/nav.png')"
      class="nav_btn"
      alt=""
      srcset=""
      @click="showNav = true"
    />
    <MoblieNav
      v-if="showNav"
      :mobile-check="true"
    />
    <Nav
      v-show="!mobileCheck"
      :active-index="1"
      @toViewSwiper="toViewSwiper"
    ></Nav>
    <div class="newsListContainer">
      <div class="listNav">
        <div
          v-for="(item, index) in listNav"
          :key="item.text"
          :class="listNavId == item.id ? 'listNavActived' : ''"
          class="item"
          @click="checkNewsNav(item.id, index)"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="listContent">
        <div v-if="!$store.state.storageData.newsList.length" class="none">
          暂无数据
        </div>
        <nuxt-link
          v-for="(item, index) in $store.state.storageData.newsList"
          v-else
          :key="index"
          class="listItem"
          target="_blank"
          :to="{ name: 'newsDetail', query: { id: item.id } }"
        >
          <!-- @click="goDetail(item.id)" -->
          <div
            class="pic"
            :class="
              item.types == 1 ? 'notice' : item.types == 2 ? 'activity' : 'trends'
            "
          >
            {{ item.type_text }}
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="date">
            {{ item.time ? item.time.substring(0, 10) : "" }}
          </div>
        </nuxt-link>
      </div>
      <v-pagination
        v-if="$store.state.storageData.count"
        :total="$store.state.storageData.count"
        :current-page="current"
        @pagechange="pagechange"
      ></v-pagination>
    </div>
  </div>
</template>

<script>
import { getNewsList } from "../api/data.js";

export default {
  components: {
    "v-pagination": () => import("../components/paging.vue"),
    MoblieNav: () => import("../components/m-nav.vue"),
    Nav: () => import("../components/nav.vue"),
  },
  async asyncData({ store, route }) {
    const type = route.query.type || 0;
    const data = await getNewsList({ page: 1, limit: 8, type }).then();
    store.commit("storageData/changeNewsList", data.data.result);
    store.commit("storageData/changeCount", data.data.page);
  },
  data() {
    return {
      listNav: [
        { text: "最新", id: "last" },
        { text: "公告", id: "notice" },
        { text: "活动", id: "activity" },
        { text: "动态", id: "trends" },
      ],
      navArr: ["last", "notice", "activity", "trends"],
      listNavId: "last",
      type: 0,
      news: [],
      display: 6, // 每页显示条数
      mobileCheck: false,
      showNav: false,
      current: 1, // 当前的页数
    };
  },
  mounted() {
    this.type = this.$route.params.type || 0;
    this.listNavId = this.navArr[this.type];

    if (
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPod/i)
    ) {
      this.mobileCheck = true;
    }
  },
  methods: {
    getList() {
      getNewsList({ page: this.current, limit: 8, types: this.type }).then(
        (data) => {
          this.$store.commit("storageData/changeNewsList", data.data.result);
          this.$store.commit("storageData/changeCount", data.data.page);
        }
      );
    },
    checkNewsNav(id, type) {
      this.current = 1;
      this.listNavId = id;
      this.type = type;
      this.getList();
    },
    pagechange(currentPage) {
      this.current = currentPage;
      this.getList();
      // ajax请求, 向后台发送 currentPage, 来获取对应的数据
    },
    goDetail(id) {
      this.$router.push({
        name: "newsDetail",
        query: { id },
      });
    },
    toViewSwiper(index) {
      this.$router.push({ name: "index", params: { id: index } });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/newsList.scss";
</style>