feat(article/detail): 文章详情展示推荐文章 reviewed by 邱骏

@@ -29,7 +29,13 @@
 
       <div class="recommend-container">
         <div class="recommend-text">推荐阅读</div>
-        <div class="recommend-list">list</div>
+          <ClientOnly>
+            <waterFallList
+              :listData="recommendArticleList"
+              :item-w="344" :gutter-w="15"
+            >
+            </waterFallList>
+          </ClientOnly>
       </div>
 
     </div>
@@ -43,6 +49,7 @@ import ArticleAuthor from './components/article-author';
 import ArticleVideo from './components/article-video';
 import ArticleImage from './components/article-image';
 import AssociatedItem from './components/associated-item';
+import waterFallList from './components/waterfall';
 
 const { mapState, mapActions } = createNamespacedHelpers('article/articleDetail');
 
@@ -52,7 +59,8 @@ export default {
     ArticleAuthor,
     ArticleVideo,
     ArticleImage,
-    AssociatedItem
+    AssociatedItem,
+    waterFallList
   },
   props: {
     articleId: {
@@ -60,7 +68,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['detailInfo']),
+    ...mapState(['detailInfo', 'recommendArticleList']),
     isVideo({detailInfo: {sort}}) {
       return +sort === 4;
     },
@@ -205,7 +213,6 @@ export default {
 
 .recommend-container {
   background: #F2F2F2;
-  padding: 36px 24px 0;
 }
 
 .recommend-text {
@@ -213,6 +220,7 @@ export default {
   color: #222222;
   font-weight: bold;
   text-align: left;
+  padding: 36px 24px 0;
 }
 
 .recommend-list {

@@ -33,6 +33,11 @@ export default {
     return {
     };
   },
+  activated() {
+    this.$nextTick(()=> {
+      this.$refs.slide.refresh();
+    });
+  },
   methods: {
     clickHandler(item, index) {
       console.log(item, index);

 <template>
   <div class="horizontal-slide">
     <ul class="list-warp">
-      <li 
+      <li
         :class="items.length === 1 ? 'list-item one-item' : 'list-item'"
         v-for="(item, index) in items"
         :key="index"

@@ -47,11 +47,15 @@ export default {
   props: {
     listData: { // 列表数据
       type: Array,
-      default: []
+      default() {
+        return [];
+      }
     },
     listInfo: { // 列表基础信息
       type: Object,
-      default: {}
+      default() {
+        return {};
+      }
     },
     itemW: { // 每一个ariticleItem的宽度
       type: Number,

@@ -58,7 +58,27 @@ export default function() {
         };
       },
       [FETCH_RECOMMEND_ARTICLES](state, list = []) {
-        state.recommendArticleList = list;
+        state.recommendArticleList = list.map((item)=> {
+          let imageHeight = item.imageHeight;
+          let imageWidth = item.imageWidth;
+
+          if (imageWidth > 350) {
+            imageWidth = 350;
+            imageHeight = parseInt(350 * item.imageHeight / item.imageWidth, 10);
+          }
+
+          if (item.dataType === 1) {
+            item.authorHeadIco = item.authorHeadIco.replace(/{mode}/, 2).replace(/{width}/, 40).replace(/{height}/, 40);
+            item.coverImage = item.coverImage.replace(/{mode}/, 2).replace(/{width}/, imageWidth).replace(/{height}/, imageHeight).replace(/\/format\/webp/, '');
+          } else if (item.dataType === 2) {
+            item.resourceSrc = item.resourceSrc.replace(/{mode}/, 2).replace(/{width}/, imageWidth).replace(/{height}/, imageHeight).replace(/\/format\/webp/, '');
+          }
+
+          item.imageNewWidth = imageWidth;
+          item.imageNewHeight = imageHeight;
+
+          return item;
+        });
       }
     },
     getters: {