add action sheet

 <template>
   <transition name="action-sheet-fade">
-    <Popup
-      :class="actionCls"
-      type="yoho-action-sheet"
-      :center="false"
-      :mask="true"
-      :z-index="zIndex"
-      v-show="isVisible"
-      @mask-click="maskClick"
-    >
-      <transition name="action-sheet-move">
-        <div class="detail" v-show="isVisible">
-          <slot></slot>
+    <div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">
+      <div class="yoho-popup-mask" @click="maskClick"></div>
+      <div class="yoho-popup-container">
+        <div class="yoho-popup-content">
+          <transition name="action-sheet-move">
+            <div class="detail" v-show="isVisible">
+              <slot></slot>
+            </div>
+          </transition>
         </div>
-      </transition>
-    </Popup>
+      </div>
+    </div>
   </transition>
 </template>
 
@@ -108,8 +105,28 @@ export default {
     transition: all 0.3s ease-in-out;
   }
 
+  .yoho-popup {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+
+    .yoho-popup-mask {
+      display: block;
+    }
+
+    .yoho-popup-mask,
+    .yoho-popup-container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   .yoho-action-sheet {
-    .cube-popup-content {
+    .yoho-popup-content {
       height: 100%;
     }
   }

 <template>
   <div
     class="product-item"
-    :class="{single}">
+    :class="{single}"
+    @click="onClick">
     <div class="product-content">
       <ImageFormat :lazy="lazy" class="product-image" :src="product.productImage" :width="136" :height="180"></ImageFormat>
       <div class="product-info">
@@ -74,6 +75,7 @@ export default {
       }
     },
     onClick() {
+      console.log(this.product.product_skn);
       this.product.product_skn && this.$yoho.goProductDetail(this.product.product_skn);
     }
   }

 <template>
     <div class="scroll-wrapper">
 
-    <Author v-if="articleDetail" :data="articleDetail.getAuthor"></Author>
+    <Author v-if="articleDetail && articleDetail.getAuthor" :data="articleDetail.getAuthor"></Author>
 
-    <div class="post-content" v-if="articleDetail">
+    <div class="post-content" v-if="articleDetail && articleDetail.getArticleContent">
       <template v-for="item in articleDetail.getArticleContent">
         <template v-if="item.text">
           <div class="text" v-html="item.text"></div>
@@ -35,10 +35,10 @@
       </template>
     </div>
 
-    <ZanBar class="zanbar" v-if="articleDetail" v-bind="articleDetail.zanBar"></ZanBar>
+    <ZanBar class="zanbar" v-if="articleDetail && articleDetail.zanBar" v-bind="articleDetail.zanBar"></ZanBar>
     <TagBar class="tagbar" v-if="articleDetail" :list="articleDetail.tagBar"></TagBar>
 
-    <Recommend v-if="articleDetail && articleDetail.getRecommendProducts.length > 0">
+    <Recommend v-if="articleDetail && articleDetail.getRecommendProducts && articleDetail.getRecommendProducts.length > 0">
       <RecommendProductList :list="articleDetail.getRecommendProducts"></RecommendProductList>
     </Recommend>
     </div>
@@ -46,7 +46,6 @@
 
 <script>
 
-import {debounce} from 'lodash';
 import RecommendProductList from './recommend-product-list';
 import Recommend from './recommend';
 import Author from './author';
@@ -96,6 +95,7 @@ export default {
 
 .post-content {
   @include paddingLR;
+
   padding-top: 26px;
 
   /deep/ .normal {

@@ -23,7 +23,7 @@ import ArticleBody from './article-body';
 import CommentActionSheet from './comment-action-sheet';
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapActions, mapState } = createNamespacedHelpers('article');
+const { mapActions, mapState, mapMutations } = createNamespacedHelpers('article');
 
 export default {
   name: 'ArticleDetail',
@@ -47,6 +47,9 @@ export default {
       this.$refs.actionSheet.click();
     },
     ...mapActions(['getDetail']),
+    ...mapMutations({
+      fetchArticleDetail: 'FETCH_GUANG_SUCCESS'
+    }),
     fetch(params) {
       this.articleId = params.articleId;
       this.grassId = params.grassId;
@@ -57,7 +60,11 @@ export default {
       });
     },
     onClose() {
+      this.reset();
       this.$emit('on-close');
+    },
+    reset() {
+      this.fetchArticleDetail({});
     }
   },
   computed: {