<template> <Article ref="article" type="article" :no-header="true" :thumbs="articleThumbList" share :on-fetch="onFetch"> </Article> </template> <script> import {get} from 'lodash'; import Share from 'plugins/share'; import Article from './components/article/article'; import ArticleItem from './components/article/article-item'; import {createNamespacedHelpers} from 'vuex'; const {mapState, mapActions} = createNamespacedHelpers('article'); export default { name: 'ArticleSharePage', data() { return { page: 1, id: 0, title: '' }; }, created() { this.id = +this.$route.params.id; }, mounted() { if (!this.$yoho.isApp) { Share.init(); } }, activated() { if (+this.$route.params.id !== this.id) { this.id = +this.$route.params.id; this.init(); } }, async serverPrefetch() { const articleId = parseInt(this.id, 10); if (!articleId) { return; } return this.fetchArticleList({ articleId, limit: 2, thumb: true }); }, watch: { title(val) { if (document) { document.title = val; } } }, computed: { ...mapState(['articleThumbList']) }, methods: { ...mapActions(['fetchArticleList']), 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, columnType: 1002 }); if (result.code === 200) { if (get(result, 'data.detailList', []).length) { this.page++; if (!this.title) { let first = get(result, 'data.detailList[0]'); this.title = `@${first.authorName} 在有货社区上发了一篇笔记,快点开看看!`; if (!this.$yoho.isApp) { let shareImage = ''; let shareIntro = ''; get(first, 'blockList', []).forEach(block => { if (block.templateKey === 'image') { !shareImage && (shareImage = (block.contentData || '').split('?')[0]); } else if (block.templateKey === 'text') { !shareIntro && (shareIntro = block.contentData); } }); Share.setShareInfo({ title: this.title, imgUrl: shareImage, desc: shareIntro }); } } return Promise.resolve(result.data.detailList); } return Promise.resolve(false); } else { this.$createToast && this.$createToast({ txt: result.message || '服务器开小差了', type: 'warn', time: 1000 }).show(); } } }, components: { Article, ArticleItem } }; </script> <style lang="scss" scoped> .article-page { background-color: #f0f0f0; } </style>