server preload

@@ -2,8 +2,8 @@
   <Layout class="article-detail">
     <RecycleScrollReveal :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch" :manual-init="true">
       <template v-slot:eternalTop>
-        <ArticleDeatilLong v-if="article.sort == 2" ref="detailLong" :data="article" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilLong>
-        <ArticleDeatilNote v-else ref="detailNote" :data="article" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilNote>
+        <ArticleDeatilLong v-if="articleInfo.sort == 2" ref="detailLong" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilLong>
+        <ArticleDeatilNote v-else ref="detailNote" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilNote>
       </template>
       <template class="article-item" #item="{ data }">
         <ArticleItem2
@@ -59,17 +59,32 @@ export default {
       this.init();
     }
   },
-  serverPrefetch() {
+  async serverPrefetch() {
     this.id = parseInt(this.$route.params.id, 10);
 
-    return this.id > 0 ? this.syncServiceArticleDetail(true) : Promise.resolve();
+    if (this.id > 0) {
+      return this.fetchArticleList({
+        articleId: this.id,
+        singleDetail: 'Y',
+        thumb: true
+      })
+    }
+
+    return;
   },
   mounted() {
     this.colWidthForTwo = Math.floor(this.$el.offsetWidth / 2);
   },
   computed: {
     ...mapYohoState(['yoho']),
-    ...mapState(['articleSingleDetail'])
+    ...mapState(['articleSingleDetail']),
+    articleInfo() {
+      if (this.articleSingleDetail.thumb) {
+        return this.articleSingleDetail;
+      } else {
+        return this.article;
+      }
+    }
   },
   methods: {
     ...mapActions(['fetchArticleList', 'fetchDetailRecommendAricles']),
@@ -87,13 +102,12 @@ export default {
         this.scrolling = false;
       }, 400);
     },
-    syncServiceArticleDetail(thumb) {
+    syncServiceArticleDetail() {
       const articleId = parseInt(this.id, 10);
 
       return this.fetchArticleList({
         articleId,
-        singleDetail: 'Y',
-        thumb
+        singleDetail: 'Y'
       }).then(res => {
         const emptyData = {
           articleId,
@@ -104,16 +118,6 @@ export default {
 
         if (res.code === 200) {
           article = get(res, 'data.detailList[0]', {...emptyData});
-
-          if (thumb) {
-            article.comments = [];
-            article.hasAttention = '';
-            article.hasFavor = '';
-            article.hasPraise = '';
-            article.commentCount = 0;
-            article.favoriteCount = 0;
-            article.praiseCount = 0;
-          }
         } else if (res.code === 403) {
           article = {...emptyData};
         } else {

 <template>
   <div class="article-detail-long">
     <ArticleDetailHeader ref="header" :data="data" :step="headerAnimateStep" :title-step="headerTitleAnimateStep">
-      <div class="title-main">
+      <div v-if="data.articleId && !data.empty" class="title-main">
         <div class="title-info" :style="`transform: translate3d(0, ${viewMoreArticles ? '-50%' : '0'}, 0)`">
           <ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :lazy="lazy" :more="showMoreOpt" @on-follow="onFollowAuthor"></ArticleItemHeader>
           <div class="title-info-rec">{{listTitle}}</div>

 <template>
   <div class="article-detail-notes">
     <ArticleDetailHeader ref="header" :data="data" :step="100" :title-step="100">
-      <div v-if="!data.empty" class="title-main">
+      <div v-if="data.articleId && !data.empty" class="title-main">
         <div class="title-info" :style="`transform: translate3d(0, ${viewMoreArticles ? '-50%' : '0'}, 0)`">
           <ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :lazy="lazy" :more="false" @on-follow="onFollowAuthor"></ArticleItemHeader>
           <div class="title-info-rec">{{listTitle}}</div>
@@ -25,7 +25,7 @@
         </div>
       </div>
       <p class="publish-time">{{publishTime}}</p>
-      <ArticleDetailCommentList ref="commentList" v-if="data.articleId" :article-id="data.articleId" :comment-count="articleState.commentCount"></ArticleDetailCommentList>
+      <ArticleDetailCommentList ref="commentList" v-if="data.articleId && !thumb" :article-id="data.articleId" :comment-count="articleState.commentCount"></ArticleDetailCommentList>
     </div>
 
     <div v-if="listTitle" class="rec-article-title">
@@ -81,7 +81,6 @@ export default {
     listTitle: String,
     scrollTop: Number,
     share: Boolean,
-    thumb: Boolean,
     scrollTo: Function
   },
   data() {
@@ -101,6 +100,9 @@ export default {
 
       return Object.assign({...articleState}, {hasAttention: authorState.hasAttention});
     },
+    thumb() {
+      return !!this.data.thumb;
+    },
     viewMoreArticles() {
       let scrollTop = this.scrollTop;
 

@@ -73,7 +73,9 @@ export default {
       this.page = 1;
       this.showMore = false;
 
-      this.onFetch();
+      if (this.commentCount) {
+        this.onFetch();
+      }
     },
     updateMoreCommentNum(list = []) {
       let moreCommentNum = this.commentCount;

@@ -26,7 +26,9 @@ export default {
 
       commit(Types[`FETCH_${commitType}_SUCCESS`], {
         data: result.data.detailList,
-        thumb
+        thumb,
+        articleId,
+        result
       });
     } else {
       commit(Types[`FETCH_${commitType}_FAILD`]);

@@ -261,24 +261,35 @@ export default {
   [Types.FETCH_ARTICLE_SINGLE_DETAIL_REQUEST](state, topicId) {
     state.fetchArticleSingleDetail = true;
   },
-  [Types.FETCH_ARTICLE_SINGLE_DETAIL_SUCCESS](state, {data, thumb}) {
+  [Types.FETCH_ARTICLE_SINGLE_DETAIL_SUCCESS](state, {data, thumb, articleId, result}) {
     state.fetchArticleSingleDetail = false;
 
-    let item = data[0] || {};
+    const emptyData = {
+      articleId,
+      empty: true
+    };
+    let article = {};
 
-    if (thumb) {
-      item.comments = [];
-      item.hasAttention = '';
-      item.hasFavor = '';
-      item.hasPraise = '';
-      item.commentCount = 0;
-      item.favoriteCount = 0;
-      item.praiseCount = 0;
+    if (result.code === 200) {
+      article = data[0] || {...emptyData};
+
+      if (thumb) {
+        article.thumb = true;
+        article.comments = [];
+        article.hasAttention = '';
+        article.hasFavor = '';
+        article.hasPraise = '';
+        article.commentCount = 0;
+        article.favoriteCount = 0;
+        article.praiseCount = 0;
+      }
+    } else if (result.code === 403) {
+      article = {...emptyData};
     } else {
-      setArticleList(state, data, 'detail');
+      article = {...emptyData, emptyTip: result.message};
     }
 
-    state.articleSingleDetail = item;
+    state.articleSingleDetail = article;
   },
   [Types.FETCH_ARTICLE_SINGLE_DETAIL_FAILD](state) {
     state.fetchArticleSingleDetail = false;

 import {get, first} from 'lodash';
 
+const DEFAULT_SHARE_IMAGE = 'http://static.yohobuy.com/m/v1/img/touch/apple-touch-icon-144x144-precomposed-new.png';
+
 const getDetailShareData = (article) => {
   let shareImage = '';
   let desc = '';
@@ -16,7 +18,7 @@ const getDetailShareData = (article) => {
 
   return {
     title: `@${article.authorName} 在有货社区上发了一篇笔记，快点开看看！`,
-    imgUrl: shareImage.replace('{mode}', 2).replace('{width}', 200).replace('{height}', 200),
+    imgUrl: get(shareImage.split('?'), '[0]') || DEFAULT_SHARE_IMAGE,
     link: `${window ? window.location.origin : ''}/grass/article/share/${article.articleId}`,
     desc,
     hideType: ['7', '8', '9']