topic.vue 2.88 KB
<template>
  <Article
    ref="article"
    :on-fetch="onFetch"
    @on-follow="onFollow"
    @on-slide="onSlide"
    @on-comment="onComment"
    @on-scroll-change="onScrollChange">
  </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,
      labelId: 0,
      reload: true
    };
  },
  created() {
    this.labelId = this.$route.params.labelId;
  },
  activated() {
    if (this.$route.params.labelId !== this.labelId) {
      this.labelId = this.$route.params.labelId;
      this.init();
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (this.$route.params.labelId !== to.params.labelId) {
      this.labelId = to.params.labelId;
      this.init();
    }
    next();
  },
  computed: {
    ...mapState(['articleListByTopic']),
  },
  methods: {
    ...mapMutations(['CHANGE_AUTHOR_TOPIC_FOLLOW', 'CHANGE_ARTICLE_TOPIC_SLIDE', 'CHANGE_ARTICLE_TOPIC_SCROLL']),
    ...mapActions(['fetchArticleListByTopic', 'fetchArticleProductFavs', 'fetchArticleTopicUpdate']),
    init() {
      this.page = 1;
      this.$refs.article.init();
    },
    async onFetch() {
      const labelId = parseInt(this.labelId, 10);

      if (!labelId) {
        return;
      }
      const result = await this.fetchArticleListByTopic({
        labelId,
        page: this.page
      });

      if (result.code === 200) {
        if (get(result, 'data.detailList', []).length) {
          this.page++;
          this.fetchArticleProductFavs({
            articles: result.data.detailList
          });
          return new Promise(resolve => {
            if (this.page === 2) {
              setTimeout(() => {
                resolve(result.data.detailList);
              }, 200);
            } else {
              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_TOPIC_FOLLOW({authorUid: authorUid, follow});
    },
    onSlide({articleId, index}) {
      this.CHANGE_ARTICLE_TOPIC_SLIDE({articleId, index});
    },
    onScrollChange({articleId}) {
      this.CHANGE_ARTICLE_TOPIC_SCROLL({articleId});
    },
    async onComment({articleId}) {
      await this.fetchArticleTopicUpdate({
        articleId,
      });
      this.$refs.article.resize();
    }
  },
  components: {
    Article,
    ArticleItem
  }
};
</script>

<style lang="scss" scoped>
.article-page {
  background-color: #f0f0f0;
}
</style>