Blame view

apps/pages/article/article.vue 2.12 KB
陈峰 authored
1
<template>
陈峰 authored
2 3
  <Article
    ref="article"
陈峰 authored
4
    type="article"
陈峰 authored
5
    :thumb="true"
陈峰 authored
6
    :on-fetch="onFetch">
陈峰 authored
7 8 9
    <template v-slot:thumb>
      <ArticleItem type="article" v-for="(item, index) in articleThumbList" :key="index" :data="item"></ArticleItem>
    </template>
陈峰 authored
10
  </Article>
陈峰 authored
11 12 13
</template>

<script>
陈峰 authored
14
import {get} from 'lodash';
陈峰 authored
15
import Article from './components/article/article';
陈峰 authored
16
import ArticleItem from './components/article/article-item';
陈峰 authored
17
import {createNamespacedHelpers} from 'vuex';
陈峰 authored
18
const {mapState, mapActions} = createNamespacedHelpers('article');
htoooth authored
19
陈峰 authored
20
export default {
陈峰 authored
21 22 23
  name: 'ArticlePage',
  data() {
    return {
陈峰 authored
24
      page: 1,
陈峰 authored
25
      id: 0,
陈峰 authored
26
    };
htoooth authored
27
  },
陈峰 authored
28
  created() {
陈峰 authored
29
    this.id = +this.$route.params.id;
陈峰 authored
30
  },
陈峰 authored
31
  activated() {
陈峰 authored
32 33
    if (+this.$route.params.id !== this.id) {
      this.id = +this.$route.params.id;
陈峰 authored
34 35 36
      this.init();
    }
  },
陈峰 authored
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
  async serverPrefetch() {
    const articleId = parseInt(this.id, 10);

    if (!articleId) {
      return;
    }
    return this.fetchArticleList({
      articleId,
      limit: 2,
      thumb: true
    });
  },
  computed: {
    ...mapState(['articleThumbList'])
  },
htoooth authored
52
  methods: {
陈峰 authored
53
    ...mapActions(['fetchArticleList', 'fetchArticleProductFavs']),
陈峰 authored
54 55 56 57
    init() {
      this.page = 1;
      this.$refs.article.init();
    },
陈峰 authored
58
    async onFetch() {
陈峰 authored
59
      const articleId = parseInt(this.id, 10);
陈峰 authored
60 61 62 63

      if (!articleId) {
        return;
      }
陈峰 authored
64
      const result = await this.fetchArticleList({
陈峰 authored
65
        articleId,
陈峰 authored
66
        page: this.page,
陈峰 authored
67
      });
陈峰 authored
68
陈峰 authored
69
      if (result.code === 200) {
陈峰 authored
70 71
        if (get(result, 'data.detailList', []).length) {
          this.page++;
陈峰 authored
72 73 74
          this.fetchArticleProductFavs({
            articles: result.data.detailList
          });
陈峰 authored
75 76 77
          return Promise.resolve(result.data.detailList);
        }
        return Promise.resolve(false);
陈峰 authored
78
      } else {
陈峰 authored
79
        this.$createToast && this.$createToast({
陈峰 authored
80 81 82 83 84
          txt: result.message || '服务器开小差了',
          type: 'warn',
          time: 1000
        }).show();
      }
陈峰 authored
85
    }
陈峰 authored
86 87
  },
  components: {
陈峰 authored
88 89
    Article,
    ArticleItem
陈峰 authored
90
  }
陈峰 authored
91 92 93
};
</script>
陈峰 authored
94
<style lang="scss" scoped>
陈峰 authored
95 96 97
.article-page {
  background-color: #f0f0f0;
}
陈峰 authored
98
</style>