<template> <div class="article"> <ArticleBar class="header" @on-close="onClose"></ArticleBar> <div class="body" v-if="fetchStatus"> <div class="loading"> <Loading></Loading> </div> </div> <ArticleBody v-else ref="body" :articleId="grassId" class="body"></ArticleBody> <ArticleFooter class="footer" v-if="articleDetail && !fetchStatus" v-bind="articleDetail.footer" @on-comment-click="onCommentClick" @on-close="onClose"> </ArticleFooter> </div> </template> <script> import ArticleBar from './article-bar'; import ArticleFooter from './article-footer'; import ArticleBody from './article-body'; import * as sleep from '../../../../utils/sleep'; import { createNamespacedHelpers } from 'vuex'; import YAS from 'utils/yas-constants'; import { Loading } from 'cube-ui'; const { mapActions, mapState, mapMutations } = createNamespacedHelpers('article'); export default { name: 'ArticleDetail', components: { ArticleBar, ArticleBody, ArticleFooter, Loading }, data() { return { articleId: 0, grassId: 0, posId: YAS.scene.newsDetail }; }, mounted() { }, methods: { onCommentClick() { this.$router.push({ name: 'article.comment', params: { articleId: this.grassId } }); }, ...mapActions(['getDetail', 'fetchProductFav']), ...mapMutations({ fetchArticleDetail: 'FETCH_GUANG_SUCCESS', fetchArticleProductList: 'GUANG_DETAIL_PRODUCT_LIST' }), fetch(params) { this.articleId = params.articleId; this.grassId = params.grassId; return this.getDetail({ article_id: params.articleId, grass_id: params.grassId }).then(() => { this.$sdk.getUser().then(user => { if (user && user.uid) { this.fetchProductFav(); } }); }); }, onClose() { this.reset(); this.$emit('on-close'); }, async reset() { await sleep.sleep(200); this.fetchArticleDetail({}); this.fetchArticleProductList([]); } }, computed: { ...mapState({ articleDetail: 'articleDetail', fetchStatus: 'fetchArticleDetail' }) } }; </script> <style lang="scss" scoped> .loading { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; margin-top: 10px; } .article { width: 100%; height: 100%; display: flex; flex-direction: column; .header { // pass } .body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background-color: white; } .footer { // pass } } </style>