add comment list

+<template>
+  <YohoActionSheet ref="actionSheet" :full="true">
+    <div class="content">
+      <!--<template v-if="list.length === 0">-->
+        <!--<Loading class="loading" :size="50"></Loading>-->
+      <!--</template>-->
+
+      <CommentScrollView ref="commentList"></CommentScrollView>
+    </div>
+  </YohoActionSheet>
+</template>
+
+
+<script>
+import {Loading} from 'cube-ui';
+import CommentScrollView from './comment-scroll-view';
+
+export default {
+  name: 'CommentActionSheetPage',
+  components: {
+    Loading,
+    CommentScrollView
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    click() {
+      this.$refs.actionSheet.show();
+      this.$refs.commentList.click();
+    }
+  }
+};
+</script>
+
+<style>
+  .content {
+    width: 100%;
+    height: 80vh;
+    background-color: white;
+  }
+
+  .loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>

+<template>
+  <div class="comment-scroll-view">
+    <div class="header">{{ count }}评论
+    </div>
+    <Scroll class="scroll-wrapper" ref="scroll" :options="scrollOptions">
+      <div v-for="i in list" class="item">huangtao {{i}}</div>
+    </Scroll>
+    <div class="footer">
+      <div class="input">评论</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {Scroll} from 'cube-ui';
+
+export default {
+  name: 'CommentScrollView',
+  components: {
+    Scroll
+  },
+  data() {
+    return {
+      list: [],
+      scrollOptions: {
+        bounce: false
+      }
+    };
+  },
+  computed: {
+    count() {
+      return this.list.length > 0 ? this.list.length + '条' : '';
+    }
+  },
+  methods: {
+    click() {
+      this.$nextTick(() => {
+        this.initData();
+        this.forceUpdate();
+      }, 1000);
+    },
+    forceUpdate() {
+      this.$refs.scroll.forceUpdate();
+    },
+    initData() {
+      console.log('click')
+      for (let i = 0; i < 100; i++) {
+        this.list.push(i);
+      }
+    }
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+
+.comment-scroll-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  width: 100%;
+  height: 88px;
+  border-bottom: 2px solid #e0e0e0;
+  text-align: center;
+  line-height: 88px;
+  font-size: 32px;
+}
+
+.scroll-wrapper {
+  flex: 1;
+}
+
+.item {
+  background-color: white;
+}
+
+.footer {
+  width: 100%;
+  height: 100px;
+  border-top: 2px solid #e0e0e0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.input {
+  width: 690px;
+  height: 72px;
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 24px;
+  color: #b0b0b0;
+  padding: 18px 0 18px 22px;
+}
+</style>

@@ -10,8 +10,8 @@
         <Products></Products>
       </div>
       <div class="share">
-        <WidgetIconBtn type="msg"></WidgetIconBtn>
-        <WidgetIconBtn type="zan"></WidgetIconBtn>
+        <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
+        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
       </div>
     </div>
   </div>
@@ -29,13 +29,23 @@ export default {
   data() {
     return {
       text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
-      isLimitHeight: true
+      isLimitHeight: true,
+      option: {
+        emitName: 'click',
+        color: 'white'
+      }
     };
   },
   methods: {
     onClick() {
       console.log('展开');
       this.isLimitHeight = false;
+    },
+    onCommentClick() {
+      this.$emit('on-comment-click', {});
+    },
+    onFavClick() {
+      this.$emit('on-favorite-click', {});
     }
   },
 };
@@ -58,6 +68,8 @@ export default {
 }
 
 .product-wrapper {
+  display: flex;
+  justify-content: space-between;
   height: 166px;
   padding: 0 28px;
 }
@@ -72,4 +84,13 @@ export default {
 .link {
   color: #4a90e2;
 }
+
+.share {
+  height: 100px;
+  margin-top: 86px;
+}
+
+.item {
+  margin-left: 50px;
+}
 </style>

 <template>
   <div class="order-wrapper">
-    <!-- <Test class="test"></Test> -->
     <Slide :data="list"
           :loop="false"
           :autoPlay="false"
@@ -24,7 +23,7 @@
 
     <AvatarHeader class="avatar-wrapper"></AvatarHeader>
 
-    <DescFooter class="footer-wrapper"></DescFooter>
+    <DescFooter class="footer-wrapper" @on-comment-click="onCommentClick"></DescFooter>
   </div>
 </template>
 
@@ -34,15 +33,13 @@ import {Slide} from 'cube-ui';
 import AvatarHeader from './avatar-header';
 import DescFooter from './desc-footer';
 
-// const img = require('statics/image/showorder/test.png')
-
 export default {
   name: 'ShowOrderItem',
   components: {
     AvatarHeader,
     DescFooter,
     Slide,
-    SlideItem: Slide.Item
+    SlideItem: Slide.Item,
   },
   data() {
     return {
@@ -70,6 +67,9 @@ export default {
     },
     slideChangeHandler(currentPageIndex) {
       this.currentPageIndex = currentPageIndex;
+    },
+    onCommentClick() {
+      this.$emit('on-comment-click', {});
     }
   }
 };

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

@@ -13,9 +13,11 @@
              :options="scrollOpts"
       >
         <SlideItem v-for="i in list">
-          <OrderSlideItem></OrderSlideItem>
+          <OrderSlideItem @on-comment-click="onComment"></OrderSlideItem>
         </SlideItem>
       </Slide>
+
+    <CommentActionSheet ref="actionsheet"></CommentActionSheet>
   </Layout>
 </template>
 
@@ -23,6 +25,7 @@
 
 import {Slide} from 'cube-ui';
 import OrderSlideItem from './components/order-slide-item';
+import CommentActionSheet from './components/comment-action-sheet';
 
 export default {
   name: 'ShowOrderPage',
@@ -30,6 +33,7 @@ export default {
     Slide,
     SlideItem: Slide.Item,
     OrderSlideItem,
+    CommentActionSheet
   },
   data() {
     return {
@@ -71,6 +75,10 @@ export default {
     },
     clickHandler(e) {
       console.log(e);
+    },
+    onComment() {
+      console.log('ok');
+      this.$refs.actionsheet.click();
     }
   }
 };