152 lines
4.0 KiB
Vue
152 lines
4.0 KiB
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>
|