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

@@ -27,7 +27,8 @@ export default {
     single: Boolean,
     lazy: Boolean,
     product: Object,
-    share: Boolean
+    share: Boolean,
+    thumb: Boolean
   },
   data() {
     return {
@@ -42,11 +43,15 @@ export default {
   },
   computed: {
     favClass() {
-      return {'btn-is-fav': this.favorite, loading: this.posting};
+      return {
+        'btn-is-fav': this.favorite,
+        loading: this.posting,
+        invisible: this.thumb
+      };
     },
     favText() {
       return this.favorite ? '已收藏' : '收藏';
-    }
+    },
   },
   methods: {
     ...mapActions(['postProductFav']),

@@ -3,6 +3,7 @@
     <ProductGroupItem
       v-for="(product, inx) in data"
       :share="share"
+      :thumb="thumb"
       :single="single"
       :product="product"
       :lazy="lazy"
@@ -27,7 +28,8 @@ export default {
       type: Boolean,
       default: true
     },
-    share: Boolean
+    share: Boolean,
+    thumb: Boolean
   },
   computed: {
     single() {

@@ -5,7 +5,7 @@
     :thumb="true"
     :on-fetch="onFetch">
     <template v-slot:thumb>
-      <ArticleItem type="article" v-for="(item, index) in articleThumbList" :key="index" :data="item"></ArticleItem>
+      <ArticleItem :thumb="true" type="article" v-for="(item, index) in articleThumbList" :key="index" :data="item"></ArticleItem>
     </template>
   </Article>
 </template>

@@ -25,7 +25,7 @@
       </CommentPlaceholder>
     </div>
     <div class="total-comment">
-      <div class="total hover-opacity" @click="onShowComment">查看{{articleState.commentCount}}条评论</div>
+      <div class="total hover-opacity" :class="invisibleClass" @click="onShowComment">查看{{articleState.commentCount}}条评论</div>
       <div class="last-time">{{data.date}}</div>
     </div>
   </div>
@@ -45,13 +45,19 @@ export default {
       }
     },
     type: String,
-    share: Boolean
+    share: Boolean,
+    thumb: Boolean
   },
   computed: {
     ...mapState(['articleStates']),
     articleState() {
       return this.articleStates[this.data.articleId] || this.data;
     },
+    invisibleClass() {
+      return {
+        invisible: this.thumb
+      };
+    },
   },
   methods: {
     ...mapMutations(['ASYNC_ARTICLE_COMMENT']),

@@ -5,7 +5,7 @@
       <span class="user-name">{{data.authorName}}</span>
     </div>
     <div class="opts">
-      <WidgetFollow :share="share" :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention === 'Y'" @on-follow="onFollow"></WidgetFollow>
+      <WidgetFollow :class="invisibleClass" :share="share" :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention === 'Y'" @on-follow="onFollow"></WidgetFollow>
       <i class="iconfont icon-more1" @click="onMore"></i>
     </div>
   </div>
@@ -29,7 +29,15 @@ export default {
       default: true
     },
     type: String,
-    share: Boolean
+    share: Boolean,
+    thumb: Boolean
+  },
+  computed: {
+    invisibleClass() {
+      return {
+        invisible: this.thumb
+      };
+    }
   },
   methods: {
     ...mapMutations(['CHANGE_AUTHOR_FOLLOW']),

@@ -20,15 +20,16 @@
         <WidgetShare :share="share" @click.native="onShare"></WidgetShare>
       </div>
       <div class="opts">
-        <WidgetFav :share="share" :num="articleState.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetFav>
-        <WidgetLike :share="share" :num="articleState.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetLike>
-        <WidgetComment :share="share" :num="articleState.commentCount" @click.native="onShowComment"></WidgetComment>
+        <WidgetFav :class="invisibleClass" :share="share" :num="articleState.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetFav>
+        <WidgetLike :class="invisibleClass" :share="share" :num="articleState.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetLike>
+        <WidgetComment :class="invisibleClass" :share="share" :num="articleState.commentCount" @click.native="onShowComment"></WidgetComment>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import {get} from 'lodash';
 import {createNamespacedHelpers} from 'vuex';
 const {mapMutations, mapState} = createNamespacedHelpers('article');
 
@@ -42,12 +43,12 @@ export default {
       }
     },
     type: String,
-    share: Boolean
+    share: Boolean,
+    thumb: Boolean
   },
   data() {
     return {
       isPreExpand: false,
-      introCollapseHeight: 0,
     };
   },
   watch: {
@@ -57,6 +58,11 @@ export default {
   },
   computed: {
     ...mapState(['articleStates']),
+    invisibleClass() {
+      return {
+        invisible: this.thumb
+      };
+    },
     articleState() {
       return this.articleStates[this.data.articleId] || this.data;
     },
@@ -88,7 +94,7 @@ export default {
       if (this.data.isExpand) {
         introHeight = this.data.introHeight;
       } else {
-        introHeight = this.introCollapseHeight;
+        introHeight = this.data.introCollapseHeight;
       }
 
       return {
@@ -107,13 +113,11 @@ export default {
     },
   },
   mounted() {
-    if (this.$refs.intro) {
-      this.introCollapseHeight = this.$refs.intro.scrollHeight;
-    }
-    if (this.$refs.introPool) {
+    if (this.data.introHeight === 0) {
       this.CHANGE_ARTICLE_LIST_INTRO_HEIGHT({
         articleId: this.data.articleId,
-        introHeight: this.$refs.introPool.scrollHeight + 20,
+        introHeight: get(this.$refs, 'introPool.scrollHeight', 0) + 20,
+        introCollapseHeight: get(this.$refs, 'intro.scrollHeight', 0),
         type: this.type
       });
     }
@@ -155,7 +159,7 @@ export default {
         return;
       }
       const isExpand = !this.data.isExpand;
-      const height = isExpand ? this.data.introHeight : this.introCollapseHeight;
+      const height = isExpand ? this.data.introHeight : this.data.introCollapseHeight;
 
       this.$emit('on-expanding');
 

 <template>
-  <ImageFormat :mode="1" :lazy="lazy" :style="imageStyle" class="image-slide-item" :src="data.contentData" :width="imageSize.width" :height="imageSize.height"></ImageFormat>
+  <ImageFormat :mode="1" :lazy="lazy" :style="imageStyle" class="image-slide-item" :src="data.contentData" :width="data.width" :height="data.height"></ImageFormat>
 </template>
 
 <script>
@@ -18,8 +18,8 @@ export default {
       const {width, height} = this.itemSize;
 
       return {
-        width: `${width}px`,
-        height: `${height}px`
+        width: `${width}rem`,
+        height: `${height}rem`
       };
     },
     itemSize() {
@@ -28,31 +28,20 @@ export default {
 
       if (scale > 1) {
         return {
-          width: parseInt(this.yoho.window.clientWidth, 10),
-          height: parseInt(this.yoho.window.clientWidth / scale, 10)
+          width: 750 / 40,
+          height: 750 / 40 / scale
         };
       } else if (scale < 1) {
         return {
-          width: parseInt(fHeight * scale, 10),
-          height: parseInt(fHeight, 10)
+          width: fHeight * scale,
+          height: fHeight
         };
       } else {
         return {
-          width: this.yoho.window.clientWidth,
-          height: this.yoho.window.clientWidth
+          width: 750 / 40,
+          height: 750 / 40
         };
       }
-    },
-    imageSize() {
-      const {width, height} = this.itemSize;
-
-      if (this.data.width < width && this.data.height < height) {
-        return this.itemSize;
-      }
-      return {
-        width: parseInt(this.data.width, 10),
-        height: parseInt(this.data.height, 10),
-      };
     }
   }
 };

@@ -3,7 +3,7 @@
     <ArticleItemSlideImage v-if="data.blockList.length === 1" :lazy="false" :data="data.blockList[0]" :thumb-size="firstBlockSize"></ArticleItemSlideImage>
     <Slide :key="`slide${data.articleId}`" v-else ref="slide" :data="data.blockList" :refresh-reset-current="false" :initial-index="slideIndex - 1" :threshold="0.2" :auto-play="false" :loop="false" :options="scrollOption" @change="onChange">
       <SlideItem class="slide-item" :style="slideItemStyle" v-for="(item, inx) in data.blockList" :key="inx">
-        <ArticleItemSlideImage :data="item" :thumb-size="firstBlockSize"></ArticleItemSlideImage>
+        <ArticleItemSlideImage v-if="!thumb || inx === 0" :lazy="lazy && inx > 0" :data="item" :thumb-size="firstBlockSize"></ArticleItemSlideImage>
       </SlideItem>
       <template slot="dots" slot-scope="props">
         <span class="slide-dot"
@@ -40,7 +40,8 @@ export default {
       type: Boolean,
       default: true
     },
-    type: String
+    type: String,
+    thumb: Boolean
   },
   data() {
     return {
@@ -56,8 +57,8 @@ export default {
 
       if (width && height) {
         return {
-          width: `${width}px`,
-          height: `${height}px`,
+          width: `${width}rem`,
+          height: `${height}rem`,
         };
       }
     },
@@ -68,8 +69,8 @@ export default {
         const scale = width / height;
 
         return {
-          width: this.yoho.window.clientWidth,
-          height: this.yoho.window.clientWidth / scale,
+          width: 750 / 40,
+          height: (750 / 40) / scale,
         };
       }
       return {};

 <template>
   <div class="article-item">
-    <ArticleItemHeader :type="type" :share="share" :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
-    <ArticleItemSlide :type="type" :share="share" :data="slideData" :slide-index="data.blockIndex" :lazy="lazy"></ArticleItemSlide>
-    <ProductGroup v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
-    <ArticleItemIntro :type="type" :share="share" :data="introData" @on-expand="onExpand" @on-expanding="onExpanding" @on-show-guang="onShowGuang" @on-show-comment="onShowComment"></ArticleItemIntro>
-    <ArticleItemComment :type="type" :share="share" :data="commentData" @on-show-comment="onShowComment" @on-resize="onResize"></ArticleItemComment>
+    <ArticleItemHeader :type="type" :thumb="thumb" :share="share" :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
+    <ArticleItemSlide :type="type" :thumb="thumb" :share="share" :data="slideData" :slide-index="data.blockIndex" :lazy="lazy"></ArticleItemSlide>
+    <ProductGroup :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
+    <ArticleItemIntro :thumb="thumb" :type="type" :share="share" :data="introData" @on-expand="onExpand" @on-expanding="onExpanding" @on-show-guang="onShowGuang" @on-show-comment="onShowComment"></ArticleItemIntro>
+    <ArticleItemComment :thumb="thumb" :type="type" :share="share" :data="commentData" @on-show-comment="onShowComment" @on-resize="onResize"></ArticleItemComment>
     <div class="line"></div>
   </div>
 </template>
@@ -27,7 +27,8 @@ export default {
       }
     },
     share: Boolean,
-    type: String
+    type: String,
+    thumb: Boolean
   },
   computed: {
     articleState() {
@@ -53,6 +54,7 @@ export default {
         intro: get(get(this.data, 'blockList', []).filter(block => block.templateKey === 'text'), '[0].contentData', ''),
         isExpand: this.data.isExpand,
         introHeight: this.data.introHeight,
+        introCollapseHeight: this.data.introCollapseHeight,
         articleType: this.data.articleType,
         labelList: this.data.labelList,
         hasFavor: this.data.hasFavor,

@@ -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>
         </template>
       </LayoutHeader>
-      <LayoutRecycleList :size="30" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onScrollFetch">
+      <LayoutRecycleList :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onScrollFetch">
         <template class="article-item" v-slot:item="{ data }">
           <ArticleItem
             :id="`item${data.index}`"

@@ -21,7 +21,7 @@ export default {
       colsList: [],
       loadedIndex: 0,
       colsHeight: []
-    }
+    };
   },
   props: {
     list: {

@@ -687,4 +687,8 @@ img[lazy=loaded] {
 
 button {
     border: none;
+}
+
+.invisible {
+    visibility: hidden;
 }
\ No newline at end of file

@@ -34,6 +34,7 @@ function setArticleList(state, data, type, thumb) {
     item.lazy = index >= 1;
     item.isExpand = false;
     item.introHeight = 0;
+    item.introCollapseHeight = 0;
     if (!thumb) {
       updateArticleState(state, item);
     } else {
@@ -169,11 +170,12 @@ export default {
       find.isExpand = isExpand;
     }
   },
-  [Types.CHANGE_ARTICLE_LIST_INTRO_HEIGHT](state, {articleId, introHeight, type}) {
+  [Types.CHANGE_ARTICLE_LIST_INTRO_HEIGHT](state, {articleId, introHeight, introCollapseHeight, type}) {
     const find = state[articlefield(type)].find(article => article.articleId === articleId);
 
     if (find) {
       find.introHeight = introHeight || find.introHeight;
+      find.introCollapseHeight = introCollapseHeight || find.introCollapseHeight;
     }
   }
 };

 const MAX_WIDTH = 750;
 
 export function getArticleImageSize({width, height, MIN_SCALE}) {
+  width = +width;
+  height = +height;
   if (width > MAX_WIDTH) {
     height = height / (width / MAX_WIDTH);
     width = MAX_WIDTH;
   }
 
   if (MIN_SCALE && width / height < MIN_SCALE) {
-    return {
-      width,
-      height: width / MIN_SCALE
-    };
+    height = width / MIN_SCALE;
+  }
+  if (width === 1) {
+    width = MAX_WIDTH / 2;
+  }
+  if (height === 1) {
+    height = MAX_WIDTH / 2;
   }
   return {width, height};
 }