<template> <Article ref="article" :on-fetch="onFetch" @on-follow="onFollow"></Article> </template> <script> import {get} from 'lodash'; import Article from './components/article/article'; import ArticleItem from './components/article/article-item'; import {createNamespacedHelpers} from 'vuex'; const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article'); export default { name: 'ArticlePage', data() { return { page: 1, id: 0, authorUid: 0, authorType: 0, type: '' }; }, created() { this.id = this.$route.params.id; this.authorUid = this.$route.query.authorUid; this.authorType = this.$route.query.authorType; this.type = this.$route.query.type; }, activated() { if (this.$route.params.id !== this.id) { this.id = this.$route.params.id; this.authorUid = this.$route.query.authorUid; this.authorType = this.$route.query.authorType; this.type = this.$route.query.type; this.init(); } }, computed: { ...mapState(['articleList']), currentList() { if (this.articleList.length > 2) { return this.articleList.slice(0, 2); } return this.articleList; } }, methods: { ...mapMutations(['CHANGE_AUTHOR_FOLLOW']), ...mapActions(['fetchArticleList', 'fetchArticleProductFavs']), init() { this.page = 1; this.$refs.article.init(); }, async onFetch() { const articleId = parseInt(this.id, 10); if (!articleId) { return; } const result = await this.fetchArticleList({ articleId, page: this.page, authorUid: this.authorUid, authorType: this.authorType, type: this.type }); if (result.code === 200) { if (get(result, 'data.detailList', []).length) { this.page++; this.fetchArticleProductFavs({ articles: result.data.detailList }); return Promise.resolve(result.data.detailList); } return Promise.resolve(false); } else { this.$createToast && this.$createToast({ txt: result.message || '服务器开小差了', type: 'warn', time: 1000 }).show(); } }, onFollow({authorUid, follow}) { this.CHANGE_AUTHOR_FOLLOW({authorUid: authorUid, follow}); } }, components: { Article, ArticleItem } }; </script> <style lang="scss" scoped> .article-page { background-color: #f0f0f0; } </style>