Merge branch 'master' of git.yoho.cn:fe/yoho-community-web

@@ -80,7 +80,7 @@ export default {
                 favType: 0
                 favType: 0
               });
               });
             }
             }
-          }, 1000);
+          }, 3000);
         } else {
         } else {
           this.prompt && this.prompt.hide();
           this.prompt && this.prompt.hide();
           this.$createToast({
           this.$createToast({

@@ -2,7 +2,11 @@
   <Article
   <Article
     ref="article"
     ref="article"
     type="article"
     type="article"
+    :thumb="true"
     :on-fetch="onFetch">
     :on-fetch="onFetch">
+    <template v-slot:thumb>
+      <ArticleItem type="article" v-for="(item, index) in articleThumbList" :key="index" :data="item"></ArticleItem>
+    </template>
   </Article>
   </Article>
 </template>
 </template>
 
 
@@ -11,7 +15,7 @@ import {get} from 'lodash';
 import Article from './components/article/article';
 import Article from './components/article/article';
 import ArticleItem from './components/article/article-item';
 import ArticleItem from './components/article/article-item';
 import {createNamespacedHelpers} from 'vuex';
 import {createNamespacedHelpers} from 'vuex';
-const {mapActions} = createNamespacedHelpers('article');
+const {mapState, mapActions} = createNamespacedHelpers('article');
 
 
 export default {
 export default {
   name: 'ArticlePage',
   name: 'ArticlePage',
@@ -30,6 +34,21 @@ export default {
       this.init();
       this.init();
     }
     }
   },
   },
+  async serverPrefetch() {
+    const articleId = parseInt(this.id, 10);
+
+    if (!articleId) {
+      return;
+    }
+    return this.fetchArticleList({
+      articleId,
+      limit: 2,
+      thumb: true
+    });
+  },
+  computed: {
+    ...mapState(['articleThumbList'])
+  },
   methods: {
   methods: {
     ...mapActions(['fetchArticleList', 'fetchArticleProductFavs']),
     ...mapActions(['fetchArticleList', 'fetchArticleProductFavs']),
     init() {
     init() {
@@ -45,9 +64,6 @@ export default {
       const result = await this.fetchArticleList({
       const result = await this.fetchArticleList({
         articleId,
         articleId,
         page: this.page,
         page: this.page,
-        authorUid: this.authorUid,
-        authorType: this.authorType,
-        type: this.type
       });
       });
 
 
       if (result.code === 200) {
       if (result.code === 200) {

@@ -12,7 +12,7 @@
           <WidgetFollow :share="share" class="widget-follow" :author-uid="currentAuthor.authorUid" :follow="currentAuthor.hasAttention === 'Y'" @on-follow="follow => onFollow(currentAuthor, follow)"></WidgetFollow>
           <WidgetFollow :share="share" class="widget-follow" :author-uid="currentAuthor.authorUid" :follow="currentAuthor.hasAttention === 'Y'" @on-follow="follow => onFollow(currentAuthor, follow)"></WidgetFollow>
         </template>
         </template>
       </LayoutHeader>
       </LayoutHeader>
-      <LayoutRecycleList :size="30" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch">
+      <LayoutRecycleList :size="30" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onScrollFetch">
         <template class="article-item" v-slot:item="{ data }">
         <template class="article-item" v-slot:item="{ data }">
           <ArticleItem
           <ArticleItem
             :id="`item${data.index}`"
             :id="`item${data.index}`"
@@ -27,6 +27,9 @@
           <div :id="`ph${data.index}`"></div>
           <div :id="`ph${data.index}`"></div>
         </template>
         </template>
       </LayoutRecycleList>
       </LayoutRecycleList>
+      <div class="thumbs">
+        <slot name="thumb" v-if="showThumb"></slot>
+      </div>
     </Layout>
     </Layout>
     <ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
     <ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
     <YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
     <YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
@@ -51,13 +54,20 @@ export default {
     },
     },
     share: Boolean,
     share: Boolean,
     type: String,
     type: String,
+    thumb: Boolean,
     onFetch: Function
     onFetch: Function
   },
   },
   mounted() {
   mounted() {
     this.scrollPreLazy = debounce(this.changeItem.bind(this), 200);
     this.scrollPreLazy = debounce(this.changeItem.bind(this), 200);
   },
   },
+  computed: {
+    showThumb() {
+      return !this.isMounted && this.thumb;
+    }
+  },
   data() {
   data() {
     return {
     return {
+      isMounted: false,
       articleId: 0,
       articleId: 0,
       articleIndex: -1,
       articleIndex: -1,
       showCommentAction: false,
       showCommentAction: false,
@@ -84,6 +94,14 @@ export default {
   },
   },
   methods: {
   methods: {
     ...mapMutations(['CHANGE_ARTICLE_LIST_PRELAZY', 'ASYNC_ARTICLE_COMMENT']),
     ...mapMutations(['CHANGE_ARTICLE_LIST_PRELAZY', 'ASYNC_ARTICLE_COMMENT']),
+    async onScrollFetch() {
+      const result = await this.onFetch();
+
+      setTimeout(() => {
+        this.isMounted = true;
+      }, 0);
+      return result;
+    },
     toUserPage() {
     toUserPage() {
       if (this.share) {
       if (this.share) {
         return this.$links.toDownloadApp();
         return this.$links.toDownloadApp();
@@ -177,6 +195,16 @@ export default {
   background-color: #f0f0f0;
   background-color: #f0f0f0;
 }
 }
 
 
+.thumbs {
+  bottom: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .avatar-wrapper {
 .avatar-wrapper {
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;

@@ -3,7 +3,11 @@
     ref="article"
     ref="article"
     :title="userName"
     :title="userName"
     type="userArticle"
     type="userArticle"
+    :thumb="true"
     :on-fetch="onFetch">
     :on-fetch="onFetch">
+    <template v-slot:thumb>
+      <ArticleItem type="userArticle" v-for="(item, index) in articleUserThumbList" :key="index" :data="item"></ArticleItem>
+    </template>
   </Article>
   </Article>
 </template>
 </template>
 
 
@@ -12,7 +16,7 @@ import {get} from 'lodash';
 import Article from './components/article/article';
 import Article from './components/article/article';
 import ArticleItem from './components/article/article-item';
 import ArticleItem from './components/article/article-item';
 import {createNamespacedHelpers} from 'vuex';
 import {createNamespacedHelpers} from 'vuex';
-const {mapActions} = createNamespacedHelpers('article');
+const {mapState, mapActions} = createNamespacedHelpers('article');
 
 
 export default {
 export default {
   name: 'ArticlePage',
   name: 'ArticlePage',
@@ -54,6 +58,24 @@ export default {
     }
     }
     next();
     next();
   },
   },
+  async serverPrefetch() {
+    const articleId = parseInt(this.id, 10);
+
+    if (!articleId) {
+      return;
+    }
+    return this.fetchArticleUserList({
+      articleId,
+      limit: 2,
+      thumb: true,
+      authorUid: this.authorUid,
+      authorType: this.authorType,
+      type: this.type
+    });
+  },
+  computed: {
+    ...mapState(['articleUserThumbList'])
+  },
   methods: {
   methods: {
     ...mapActions(['fetchArticleUserList', 'fetchArticleProductFavs']),
     ...mapActions(['fetchArticleUserList', 'fetchArticleProductFavs']),
     init() {
     init() {

@@ -4,7 +4,7 @@ import * as guangProcess from './guangProcess';
 import * as sleep from '../../utils/sleep';
 import * as sleep from '../../utils/sleep';
 
 
 export default {
 export default {
-  async fetchArticleList({ commit }, { articleId, authorUid, authorType, limit = 5, page = 1 }) {
+  async fetchArticleList({ commit }, { articleId, authorUid, authorType, limit = 5, page = 1, thumb = false}) {
     commit(Types.FETCH_ARTICLE_LIST_REQUEST, {refresh: page === 1});
     commit(Types.FETCH_ARTICLE_LIST_REQUEST, {refresh: page === 1});
     const result = await this.$api.get('/api/grass/columnArticleDetail', {
     const result = await this.$api.get('/api/grass/columnArticleDetail', {
       articleId,
       articleId,
@@ -21,6 +21,7 @@ export default {
       }
       }
       commit(Types.FETCH_ARTICLE_LIST_SUCCESS, {
       commit(Types.FETCH_ARTICLE_LIST_SUCCESS, {
         data: result.data.detailList,
         data: result.data.detailList,
+        thumb
       });
       });
     } else {
     } else {
       commit(Types.FETCH_ARTICLE_LIST_FAILD);
       commit(Types.FETCH_ARTICLE_LIST_FAILD);
@@ -49,7 +50,7 @@ export default {
     }
     }
     return result;
     return result;
   },
   },
-  async fetchArticleUserList({ commit }, { articleId, authorUid, authorType, type, limit = 5, page = 1 }) {
+  async fetchArticleUserList({ commit }, { articleId, authorUid, authorType, type, limit = 5, page = 1, thumb = false }) {
     commit(Types.FETCH_ARTICLE_LIST_USER_REQUEST, {refresh: page === 1});
     commit(Types.FETCH_ARTICLE_LIST_USER_REQUEST, {refresh: page === 1});
     let api;
     let api;
 
 
@@ -73,6 +74,7 @@ export default {
       }
       }
       commit(Types.FETCH_ARTICLE_LIST_USER_SUCCESS, {
       commit(Types.FETCH_ARTICLE_LIST_USER_SUCCESS, {
         data: result.data.detailList,
         data: result.data.detailList,
+        thumb
       });
       });
     } else {
     } else {
       commit(Types.FETCH_ARTICLE_LIST_USER_FAILD);
       commit(Types.FETCH_ARTICLE_LIST_USER_FAILD);

@@ -7,10 +7,12 @@ export default function() {
     state: {
     state: {
       fetchArticleList: false,
       fetchArticleList: false,
       articleList: [],
       articleList: [],
+      articleThumbList: [],
       fetchArticleListByTopic: false,
       fetchArticleListByTopic: false,
       articleListByTopic: [],
       articleListByTopic: [],
       fetchArticleUserList: false,
       fetchArticleUserList: false,
       articleUserList: [],
       articleUserList: [],
+      articleUserThumbList: [],
       articleDetail: null,
       articleDetail: null,
       articleLastedTimeByTopic: 0,
       articleLastedTimeByTopic: 0,
       articleStates: {}
       articleStates: {}

@@ -3,13 +3,13 @@ import {getArticleImageSize} from 'utils/image-handler';
 import { get } from 'lodash';
 import { get } from 'lodash';
 import Vue from 'vue';
 import Vue from 'vue';
 
 
-function articlefield(type) {
+function articlefield(type, thumb) {
   if (type === 'article') {
   if (type === 'article') {
-    return 'articleList';
+    return `article${thumb ? 'Thumb' : ''}List`;
   } else if (type === 'topic') {
   } else if (type === 'topic') {
-    return 'articleListByTopic';
+    return `article${thumb ? 'Thumb' : ''}ListByTopic`;
   } else if (type === 'userArticle') {
   } else if (type === 'userArticle') {
-    return 'articleUserList';
+    return `articleUser${thumb ? 'Thumb' : ''}List`;
   }
   }
   return '';
   return '';
 }
 }
@@ -25,7 +25,7 @@ function updateArticleState(state, item) {
   });
   });
 }
 }
 
 
-function setArticleList(state, data, type) {
+function setArticleList(state, data, type, thumb) {
   data.forEach((item, index) => {
   data.forEach((item, index) => {
     get(item, 'productList', []).forEach(product => {
     get(item, 'productList', []).forEach(product => {
       product.favorite = false;
       product.favorite = false;
@@ -34,11 +34,21 @@ function setArticleList(state, data, type) {
     item.lazy = index >= 1;
     item.lazy = index >= 1;
     item.isExpand = false;
     item.isExpand = false;
     item.introHeight = 0;
     item.introHeight = 0;
+    if (!thumb) {
       updateArticleState(state, item);
       updateArticleState(state, item);
+    } else {
+      item.comments = [];
+      item.hasAttention = 'N';
+      item.hasFavor = 'N';
+      item.hasPraise = 'N';
+      item.commentCount = 0;
+      item.favoriteCount = 0;
+      item.praiseCount = 0;
+    }
   });
   });
-  state[articlefield(type)] = state[articlefield(type)].concat(data);
+  state[articlefield(type, thumb)] = state[articlefield(type, thumb)].concat(data);
 
 
-  state[articlefield(type)].forEach((item, index) => {
+  state[articlefield(type, thumb)].forEach((item, index) => {
     const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
     const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
 
 
     imageBlocks.forEach((img, inx) => {
     imageBlocks.forEach((img, inx) => {
@@ -62,9 +72,9 @@ export default {
       state.articleList = [];
       state.articleList = [];
     }
     }
   },
   },
-  [Types.FETCH_ARTICLE_LIST_SUCCESS](state, {data}) {
+  [Types.FETCH_ARTICLE_LIST_SUCCESS](state, {data, thumb}) {
     state.fetchArticleList = false;
     state.fetchArticleList = false;
-    setArticleList(state, data, 'article');
+    setArticleList(state, data, 'article', thumb);
   },
   },
   [Types.FETCH_ARTICLE_LIST_FAILD](state) {
   [Types.FETCH_ARTICLE_LIST_FAILD](state) {
     state.fetchArticleList = false;
     state.fetchArticleList = false;
@@ -75,9 +85,9 @@ export default {
       state.articleUserList = [];
       state.articleUserList = [];
     }
     }
   },
   },
-  [Types.FETCH_ARTICLE_LIST_USER_SUCCESS](state, {data}) {
+  [Types.FETCH_ARTICLE_LIST_USER_SUCCESS](state, {data, thumb}) {
     state.fetchArticleUserList = false;
     state.fetchArticleUserList = false;
-    setArticleList(state, data, 'userArticle');
+    setArticleList(state, data, 'userArticle', thumb);
   },
   },
   [Types.FETCH_ARTICLE_LIST_USER_FAILD](state) {
   [Types.FETCH_ARTICLE_LIST_USER_FAILD](state) {
     state.fetchArticleUserList = false;
     state.fetchArticleUserList = false;

@@ -3867,16 +3867,6 @@ is-directory@^0.3.1:
   version "0.3.1"
   version "0.3.1"
   resolved "http://npm.yohops.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   resolved "http://npm.yohops.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
 
 
-is-dom-node-list@^1.2.1:
-  version "1.2.1"
-  resolved "http://npm.yohops.com/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz#141ded0c66de759d0976800d21370bb908f2950f"
-  dependencies:
-    is-dom-node "^1.0.4"
-
-is-dom-node@^1.0.4:
-  version "1.0.4"
-  resolved "http://npm.yohops.com/is-dom-node/-/is-dom-node-1.0.4.tgz#abb18af7133f1e687610cfeb274da1ced342f1c5"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   version "0.1.1"
   resolved "http://npm.yohops.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
   resolved "http://npm.yohops.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -4677,10 +4667,6 @@ minipass@^2.2.1, minipass@^2.3.4:
     safe-buffer "^5.1.2"
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
     yallist "^3.0.0"
 
 
-miniraf@1.0.0:
-  version "1.0.0"
-  resolved "http://npm.yohops.com/miniraf/-/miniraf-1.0.0.tgz#5d88e108bbdcb55b4a2ff3da337f24a13a3377e1"
-
 minizlib@^1.1.1:
 minizlib@^1.1.1:
   version "1.2.1"
   version "1.2.1"
   resolved "http://npm.yohops.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
   resolved "http://npm.yohops.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
@@ -6068,10 +6054,6 @@ remark@^10.0.1:
     remark-stringify "^6.0.0"
     remark-stringify "^6.0.0"
     unified "^7.0.0"
     unified "^7.0.0"
 
 
-rematrix@0.3.0:
-  version "0.3.0"
-  resolved "http://npm.yohops.com/rematrix/-/rematrix-0.3.0.tgz#4f3f9156aa80ded8a8ca23785f48c6012b6dea4a"
-
 remove-trailing-separator@^1.0.1:
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   version "1.1.0"
   resolved "http://npm.yohops.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
   resolved "http://npm.yohops.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6308,14 +6290,6 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
     ajv-keywords "^3.1.0"
 
 
-scrollreveal@^4.0.5:
-  version "4.0.5"
-  resolved "http://npm.yohops.com/scrollreveal/-/scrollreveal-4.0.5.tgz#cf83cc5d9874dc0d92ef9c89a8894e57f3f8e034"
-  dependencies:
-    miniraf "1.0.0"
-    rematrix "0.3.0"
-    tealight "0.3.6"
-
 scss-tokenizer@^0.2.3:
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   version "0.2.3"
   resolved "http://npm.yohops.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
   resolved "http://npm.yohops.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -7004,13 +6978,6 @@ tar@^4:
     safe-buffer "^5.1.2"
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
     yallist "^3.0.2"
 
 
-tealight@0.3.6:
-  version "0.3.6"
-  resolved "http://npm.yohops.com/tealight/-/tealight-0.3.6.tgz#14c8071ce3c188972a5cb7d8a5668ca2820b4292"
-  dependencies:
-    is-dom-node "^1.0.4"
-    is-dom-node-list "^1.2.1"
-
 term-size@^1.2.0:
 term-size@^1.2.0:
   version "1.2.0"
   version "1.2.0"
   resolved "http://npm.yohops.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
   resolved "http://npm.yohops.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"