add article content

@@ -97,7 +97,7 @@ export default {
     },
     onExpand() {
       if (this.data.articleType === 2) {
-        // do popup
+        this.$emit('on-expand');
         return;
       }
       if (!this.isEllipsis) {

@@ -3,7 +3,7 @@
     <ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
     <ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide>
     <ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup>
-    <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing"></ArticleItemIntro>
+    <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand"></ArticleItemIntro>
     <ArticleItemComment :data="commentData"></ArticleItemComment>
     <div class="line"></div>
   </div>
@@ -78,6 +78,9 @@ export default {
     },
     onFollow(follow) {
       this.$emit('on-follow', follow);
+    },
+    onExpand() {
+      this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId});
     }
   },
   components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}

@@ -17,16 +17,20 @@
           :data-id="data.articleId"
           @on-resize="onResize(data)"
           @on-resizeing="onResizeing(data)"
-          @on-follow="follow => onFollow(data, follow)"></ArticleItem>
+          @on-follow="follow => onFollow(data, follow)"
+          @on-expand="onExpand"></ArticleItem>
         <div :id="`ph${data.index}`"></div>
       </template>
     </LayoutRecycleList>
     <slot name="thumb" v-else></slot>
+
+    <ArticleActionSheet ref="actionSheet"></ArticleActionSheet>
   </Layout>
 </template>
 
 <script>
 import ArticleItem from './article-item';
+import ArticleActionSheet from '../detail/article-action-sheet';
 
 export default {
   name: 'Article',
@@ -117,10 +121,14 @@ export default {
       if (data.authorUid === this.currentAuthor.authorUid) {
         this.currentAuthor.hasAttention = follow ? 'Y' : 'N';
       }
+    },
+    onExpand(params) {
+      this.$refs.actionSheet.show(params);
     }
   },
   components: {
-    ArticleItem
+    ArticleItem,
+    ArticleActionSheet
   }
 };
 </script>

+<template>
+  <YohoActionSheet ref="actionSheet" :full="true">
+    <ArticleDetail ref="detail" @on-close="onClose"></ArticleDetail>
+  </YohoActionSheet>
+</template>
+
+
+<script>
+
+import ArticleDetail from './article-detail';
+
+export default {
+  name: 'ArticleActionSheetPage',
+  components: {
+    ArticleDetail
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    async show(params) {
+      await this.$refs.detail.fetch(params);
+      this.$refs.actionSheet.show();
+    },
+    hide() {
+      this.$refs.actionSheet.hide();
+    },
+    onClose() {
+      this.hide();
+    }
+  }
+};
+</script>
+
+
+<style scoped lang="scss">
+.content {
+  width: 100%;
+  height: 100vh;
+  background-color: white;
+}
+</style>

@@ -13,7 +13,7 @@ export default {
   name: 'ArticleBar',
   methods: {
     close() {
-
+      this.$emit('on-close');
     }
   },
 };

 <template>
-  <Scroll class="scroll-wrapper" :options="scrollOpts">
+    <div class="scroll-wrapper">
     <Author v-if="articleDetail" :data="articleDetail.getAuthor"></Author>
 
     <div class="post-content" v-if="articleDetail">
@@ -29,6 +29,8 @@
         <template v-if="item.relatedReco">
           <div class="products">
             <ProductItem class="product-item" v-for="p in item.relatedReco.goods" :src="p.default_images" :price="p.sales_price" :name="p.product_name"></ProductItem>
+
+            <!--<ProductGroup v-for="p in item.relatedReco.goods" :data="[p]"></ProductGroup>-->
           </div>
         </template>
       </template>
@@ -40,7 +42,7 @@
     <Recommend v-if="articleDetail && articleDetail.getRecommendProducts.length > 0">
       <RecommendProductList :list="articleDetail.getRecommendProducts"></RecommendProductList>
     </Recommend>
-  </Scroll>
+    </div>
 </template>
 
 <script>
@@ -83,13 +85,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+@mixin paddingLR {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .scroll-wrapper {
   background-color: white;
 }
 
 .post-content {
-  padding-left: 30px;
-  padding-right: 30px;
+  @include paddingLR;
   padding-top: 26px;
 
   /deep/ .normal {

 <template>
   <div class="article">
-    <ArticleBar class="header"></ArticleBar>
+    <ArticleBar class="header" @on-close="onClose"></ArticleBar>
 
-    <ArticleBody class="body"></ArticleBody>
+    <ArticleBody ref="body" class="body"></ArticleBody>
 
     <ArticleFooter class="footer"
        v-if="articleDetail"
        v-bind="articleDetail.footer"
-       @on-comment-click="onCommentClick">
+       @on-comment-click="onCommentClick"
+       @on-close="onClose">
     </ArticleFooter>
 
     <CommentActionSheet ref="actionSheet"></CommentActionSheet>
@@ -16,10 +17,10 @@
 
 <script>
 
-import ArticleBar from './components2/article-bar';
-import ArticleFooter from './components2/article-footer';
-import ArticleBody from './components2/article-body';
-import CommentActionSheet from './components/comment-action-sheet';
+import ArticleBar from './article-bar';
+import ArticleFooter from './article-footer';
+import ArticleBody from './article-body';
+import CommentActionSheet from './comment-action-sheet';
 import { createNamespacedHelpers } from 'vuex';
 
 const { mapActions, mapState } = createNamespacedHelpers('article');
@@ -52,16 +53,21 @@ export default {
     };
   },
   mounted() {
-    this.getDetail({
-      article_id: this.articleId,
-      grass_id: this.grassId
-    });
   },
   methods: {
     onCommentClick() {
       this.$refs.actionSheet.click();
     },
-    ...mapActions(['getDetail'])
+    ...mapActions(['getDetail']),
+    fetch(params) {
+      return this.getDetail({
+        article_id: params.articleId,
+        grass_id: params.grassId
+      });
+    },
+    onClose() {
+      this.$emit('on-close');
+    }
   },
   computed: {
     ...mapState(['articleDetail'])
@@ -83,6 +89,8 @@ export default {
 
   .body {
     flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .footer {

@@ -5,7 +5,7 @@
       <WidgetIconBtn class="item" type="star" :text="favoriteCount" :option="option" @click="onFavClick"></WidgetIconBtn>
       <WidgetIconBtn class="item" type="msg" :text="commentCount" :option="option" @click="onComment"></WidgetIconBtn>
     </div>
-    <div class="close ml20">收起</div>
+    <div class="close ml20" @click="onClose">收起</div>
   </div>
 </template>
 
@@ -32,6 +32,9 @@ export default {
     },
     onComment() {
       this.$emit('on-comment-click');
+    },
+    onClose() {
+      this.$emit('on-close');
     }
   },
 };

-<template>
-  <YohoActionSheet ref="actionSheet" :full="true">
-    <div class="content">
-      <template v-if="list.length === 0">
-        <Loading class="loading" :size="50"></Loading>
-      </template>
-      <Scroll ref="scroll" :options="scrollOptions">
-        <div v-for="i in list" class="item">huangato{{i}}</div>
-      </Scroll>
-    </div>
-  </YohoActionSheet>
-</template>
-
-
-<script>
-import {Scroll, Loading} from 'cube-ui';
-
-export default {
-  name: 'ActionSheetPage',
-  components: {
-    Loading,
-    Scroll
-  },
-  data() {
-    return {
-      list: [],
-      scrollOptions: {
-        bounce: false
-      }
-    };
-  },
-  methods: {
-    click() {
-      this.$refs.actionSheet.show();
-      setTimeout(() => {
-        this.initData();
-        this.forceUpdate();
-      }, 1000);
-    },
-    forceUpdate() {
-      this.$refs.scroll.forceUpdate();
-    },
-    initData() {
-      for (let i = 0; i < 100; i++) {
-        this.list.push(i);
-      }
-    }
-
-  }
-};
-</script>
-
-
-<style>
-  .content {
-    width: 100%;
-    height: 100vh;
-    background-color: white;
-  }
-
-  .item {
-    background-color: white;
-  }
-
-  .loading {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-</style>

-<template>
-  <div>
-
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'TextBody'
-  }
-</script>
-
-<style scoped>
-
-</style>

@@ -3,5 +3,5 @@ export default [{
   path: '/mapp/showorder/:id',
   name: 'showorder',
 
-  component: () => import(/* webpackChunkName: "order" */ './article-detail')
+  component: () => import(/* webpackChunkName: "order" */ '../article/components/detail/article-detail')
 }];

@@ -25,7 +25,7 @@
 
 import {Slide} from 'cube-ui';
 import OrderSlideItem from './components/order-slide-item';
-import CommentActionSheet from './components/comment-action-sheet';
+import CommentActionSheet from '../article/components/detail/comment-action-sheet';
 
 export default {
   name: 'ShowOrderPage',

@@ -2060,6 +2060,7 @@ date-now@^0.1.4:
 dayjs@^1.8.5:
   version "1.8.5"
   resolved "http://npm.yohops.com/dayjs/-/dayjs-1.8.5.tgz#0b066770f89a20022218544989f3d23e5e8db29a"
+  integrity sha1-CwZncPiaIAIiGFRJifPSPl6Nspo=
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -4312,6 +4313,7 @@ lodash.debounce@^4.0.8:
 lodash.findkey@^4.6.0:
   version "4.6.0"
   resolved "http://npm.yohops.com/lodash.findkey/-/lodash.findkey-4.6.0.tgz#83058e903b51cbb759d09ccf546dea3ea39c4718"
+  integrity sha1-gwWOkDtRy7dZ0JzPVG3qPqOcRxg=
 
 lodash.kebabcase@^4.1.1:
   version "4.1.1"