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

 <template>
 <template>
-  <div></div>
+	<div class="comment-item">
+		<ImageFormat :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"></ImageFormat>
+		<div class="comment">
+			<div class="comment-nav">
+				<div class="comment-nav-left">
+					<p class="comment-user-name">{{parentComment.userName}}</p>
+					<p class="comment-time">{{parentComment.createTime}}</p>
+				</div>
+				<WidgetFav :num="parentComment.praiseTotal"></WidgetFav>
+			</div>
+
+			<p class="comment-cont" @click="replyComment" :data-parent-id="parentComment.parentId" :data-root-id="parentComment.rootId">
+				{{parentComment.content}}
+			</p>
+			<div class="reply-main">
+				<p class="reply-item" v-for="(reply, replyIndex) in childrenComments" :key="replyIndex" v-show="isShowReply(replyIndex)">
+					<span class="reply-user">
+						{{reply.userName}}
+					</span>
+					<span v-if="reply.parentUserName">
+						回复<em class="reply-to-user">@{{reply.parentUserName}}</em>
+					</span>:
+					<span @click="replyComment" :data-parent-id="reply.parentId" :data-root-id="reply.rootId">
+						{{reply.content}}
+					</span>
+				</p>
+				<p class="reply-more" v-if="isShowReplyMore" @click="viewMoreReply" v-html="replyMoreText"></p>
+			</div>
+		</div>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
 export default {
 export default {
-  name: 'CommentList'
+	name: 'CommentList',
+	props: {
+		parentComment: Object,
+		childrenComments: Array,
+		columnType: {
+			type: Number,
+			default: 1001
+		}
+	},
+	data() {
+		return {
+			showAllReply: false,
+			replyMoreText: '',
+			moreText: ''
+		};
+	},
+	computed: {
+		isShowReplyMore() {
+			return this.childrenComments.length > 2;
+		},
+		viewReplyNum() {
+			return this.childrenComments.length - 2;
+		}
+	},
+	created() {
+		this.moreText = `查看${this.viewReplyNum}条回复<span class="iconfont icon-right"></span>`;
+		this.replyMoreText = this.moreText;
+	},
+	methods: {
+		isShowReply(index) {
+			return index <= 1 || this.showAllReply;
+		},
+		viewMoreReply() {
+			this.replyMoreText = this.showAllReply ? this.moreText : '收起';
+			this.showAllReply = !this.showAllReply;
+		},
+		replyComment(e) {
+			console.log(e)
+		}
+	}
 };
 };
 </script>
 </script>
+
+<style scoped lang="scss">
+.comment-item {
+	display: flex;
+	margin-bottom: 20px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	.comment-user-avatar {
+		width: 80px;
+		height: 80px;
+		border-radius: 50%;
+	}
+
+	.comment {
+		width: 600px;
+		margin-left: 10px;
+	}
+
+	.comment-nav {
+		padding-left: 10px;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.comment-nav-left {
+		flex: 1;
+
+		.comment-user-name {
+			font-size: 28px;
+			font-weight: bold;
+			color: #222;
+			line-height: 40px;
+		}
+
+		.comment-time {
+			font-size: 20px;
+			color: #B0B0B0;
+			line-height: 28px;
+		}
+	}
+
+	.comment-cont {
+		font-size: 28px;
+		color: #444;
+		line-height: 40px;
+		margin: 12px 0 20px;
+		padding-left: 10px;
+		box-sizing: border-box;
+	}
+
+	.reply-main {
+		background: #F0F0F0;
+		padding: 20px;
+		box-sizing: border-box;
+		font-size: 24px;
+		color: #444;
+		line-height: 34px;
+
+		.reply-item {
+			margin-bottom: 20px;
+			display: flex;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.reply-to-user {
+				color: #4A90E2;
+				font-style: normal;
+			}
+
+			.reply-user {
+				font-weight: 500;
+			}
+		}
+
+		.reply-more {
+			text-align: right;
+			color: #4A90E2;
+			margin-top: 10px;
+		}
+	}
+}
+</style>
+

@@ -24,7 +24,7 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style type="css">
+<style type="scss" scoped>
   .product-list-wrap {
   .product-list-wrap {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;

@@ -45,7 +45,7 @@
         type: String,
         type: String,
         default: 'fav'
         default: 'fav'
       },
       },
-      text: String,
+      text: [String, Number],
       option: {
       option: {
         type: Object,
         type: Object,
         default() {
         default() {
@@ -88,12 +88,16 @@
       textStyle() {
       textStyle() {
         let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
         let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
 
 
-        if (['top', 'bottom'].indexOf(this.option.textAlign) >= 0) {
-          style += ` vertical-align: ${this.option.textAlign};`;
+        let textAlign = this.option.textAlign || defaultOption.textAlign;
+
+        if (['top', 'bottom'].indexOf(textAlign) >= 0) {
+          style += ` vertical-align: ${textAlign};`;
         }
         }
 
 
-        if (Number(this.option.textZoom) !== NaN) {
-          style += `transform: scale(${this.option.textZoom}, ${this.option.textZoom});`
+        let textZoom = this.option.textZoom || defaultOption.textAlign;
+
+        if (Number(textZoom) !== NaN) {
+          style += `transform: scale(${textZoom}, ${textZoom});`
         }
         }
 
 
         return style;
         return style;

+<template>
+    <Layout>
+        <LayoutHeader slot="header" title="潮物详情" :share="shareData"></LayoutHeader>
+        <div class="fashion-detail-page">
+            <div class="product-info">
+                <img src="//img12.static.yhbimg.com/goodsimg/2018/12/24/09/02ce4a371bd58b47e599f8e04c7c7bc250.jpg?imageMogr2/thumbnail/235x314/position/center/quality/60" alt="" class="product-img">
+                <div class="product-info-right">
+                    <div class="product-title">Lee X-LINE系列男士宽松插画印花背带裤</div>
+                    <div class="product-desc">一年到头，我们总喜欢给过去来个总结。要说今年最火的穿搭元素，我想离不开两个字——“老爹”。满大街的老爹鞋，从去年踩到今年，足以证明这股复古风潮的影响力。</div>
+                    <div class="product-price">
+                        <span class="sale-price">￥899</span>
+                        <span class="market-price">￥1899</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="follow">
+                <WidgetAvatarGroup :avatars="avatars" :option="{srcKey: 'src', maxDisplayNum: 10}"></WidgetAvatarGroup>
+                <span class="follow-num">3998人已种草</span>
+            </div>
+
+            <div class="hot-comment out-box">
+                <div class="comment-title"></div>
+                <div class="comment-list">
+                    <CommentList v-for="(comment, index) in commentInfos" v-bind="comment" :columnType="1003" :key="index"></CommentList>
+                </div>
+                <span class="more">查看更多</span>
+            </div>
+
+            <div class="you-like out-box">
+                <div class="yoho-like-title"></div>
+                <ProductList></ProductList>
+            </div>
+
+            <div class="fashion-footer">
+                <div class="grass-btn"><span class="iconfont icon-grass-fill"></span><em>种草</em></div>
+                <div class="comment-btn"><span class="iconfont icon-msg-blod"></span><em>评论</em></div>
+                <button class="go-buy">立即购买</button>
+            </div>
+        </div>
+    </Layout>
+</template>
+
+<script>
+export default {
+    name: 'fashionDetail',
+    data() {
+        return {
+            shareData: {},
+            avatars: [{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
+                {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'}
+            ],
+            commentInfos: [{
+                childrenComments: [
+                    {
+                        content: "fdsfdsfsdf对方水电费第三方",
+                        id: 68,
+                        isPraise: "Y",
+                        parentId: 66,
+                        parentUid: 500030381,
+                        praiseTotal: "12",
+                        rootId: 66,
+                        status: 1,
+                        uid: 600033622,
+                        columnType: 1000,
+                        destId: 600033622,
+                        createTime: 111,
+                        userName: "三只松鼠",
+                        headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
+                        parentUserName: "",
+                        articleType: 1
+                    },
+                    {
+                        content: "fdsfdsfsdf对方水电费第三方",
+                        id: 68,
+                        isPraise: "Y",
+                        parentId: 66,
+                        parentUid: 500030381,
+                        praiseTotal: "12",
+                        rootId: 66,
+                        status: 1,
+                        uid: 600033622,
+                        columnType: 1000,
+                        destId: 600033622,
+                        createTime: 111,
+                        userName: "三只松鼠",
+                        headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
+                        parentUserName: "大松鼠",
+                        articleType: 1
+                    },
+                    {
+                        content: "fdsfdsfsdf对方水电费第三方",
+                        id: 68,
+                        isPraise: "Y",
+                        parentId: 66,
+                        parentUid: 500030381,
+                        praiseTotal: "12",
+                        rootId: 66,
+                        status: 1,
+                        uid: 600033622,
+                        columnType: 1000,
+                        destId: 600033622,
+                        createTime: 111,
+                        userName: "三只松鼠",
+                        headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
+                        parentUserName: "大松鼠",
+                        articleType: 1
+                    }
+                ],
+                parentComment: {
+                    articleType: 1,
+                    content: "fsefs第三方",
+                    createTime: 23213,
+                    id: 66,
+                    isPraise: "Y",
+                    praiseTotal: "11",
+                    status: 0,
+                    uid: 500030381,
+                    columnType: 1000,
+                    destId: 600033622,
+                    articleId: 123,
+                    userName: "大松鼠",
+                    headIco: '//img13.static.yhbimg.com/author/2018/12/10/10/02143c5a70e288801cda4ac4f3fa8b9d7b.jpg?imageView2/2/interlace/1/q/75',
+                }
+            }],
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.fashion-detail-page {
+    .product-info {
+        display: flex;
+        padding: 30px;
+        box-sizing: border-box;
+
+        .product-img {
+            width: 320px;
+            height: 424px;
+        }
+
+        .product-info-right {
+            width: 350px;
+            margin-left: 20px;
+        }
+
+        .product-title {
+            font-size: 30px;
+            color: #222;
+            line-height: 44px;
+            font-weight: bold;
+        }
+
+        .product-desc {
+            font-size: 26px;
+            color: #B0B0B0;
+            line-height: 36px;
+            margin-top: 18px;
+            height: 174px;
+            overflow: hidden;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 5;
+        }
+
+        .product-price {
+            display: flex;
+            align-items: center;
+            margin-top: 84px;
+        }
+
+        .sale-price {
+            color: #D0021B;
+            font-size: 28px;
+        }
+
+        .market-price {
+            color: #B0B0B0;
+            font-size: 20px;
+            margin-left: 12px;
+        }
+    }
+
+    .follow {
+        margin-bottom: 30px;
+        padding: 0 30px;
+        clear: both;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .out-box {
+        border-top: 20px solid #F0F0F0;
+        padding: 30px;
+    }
+
+    .hot-comment {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+
+        .comment-title {
+            background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
+            background-size: contain;
+            width: 310px;
+            height: 78px;
+            margin: 0 auto 60px;
+        }
+
+		.more {
+			font-size: 24px;
+			color: #B0B0B0;
+			margin: 60px auto 30px;
+			display: flex;
+			align-items: center;
+
+			&:before{
+				content: "";
+				background: #B0B0B0;
+				width: 40px;
+				height: 2px;
+				margin-right: 20px;
+				display: inline-block;
+			}
+
+			&:after{
+				content: "";
+				background: #B0B0B0;
+				width: 40px;
+				height: 2px;
+				margin-left: 20px;
+				display: inline-block;
+			}
+		}
+	}
+
+    .yoho-like-title {
+        background: url(../../statics/image/fashion/cnxh_title@2x.png) no-repeat;
+        background-size: contain;
+        width:  250px;
+        height: 78px;
+        margin: 0 auto;
+    }
+
+    .fashion-footer {
+        height: 120px;
+        width: 100%;
+        background: #fff ;
+        border-top: 1px solid #D8D8D8 ;
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        box-sizing: border-box;
+
+        .go-buy {
+            background: #D0021B;
+            color: #fff;
+            text-align: center;
+            width: 260px;
+            height: 88px;
+            border: none;
+            outline: none;
+            border-radius: 6px;
+            margin: 0 30px;
+        }
+
+        .comment-btn,
+        .grass-btn {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            font-size: 18px;
+            color: #444;
+
+            span {
+                font-size: 52px;
+            }
+
+            em {
+                font-style: normal;
+                margin-top: -6px;
+            }
+        }
+
+        .comment-btn {
+            span {
+                color: #b0b0b0;
+            }
+        }
+    }
+}
+</style>

 export default [{
 export default [{
-  path: '/xxx',
-  name: 'xxx',
+  path: '/fashion/detail',
+  name: 'fashionDetail',
 
 
-  // component: () => import(/* webpackChunkName: "xxx" */ './xxx')
+  component: () => import(/* webpackChunkName: "fashionDetail" */ './fashion-detail')
 }];
 }];

+<template>
+  <div class="article">
+    <ArticleBar class="header"></ArticleBar>
+    <ArticleBody class="body"></ArticleBody>
+    <ArticleFooter class="footer"></ArticleFooter>
+  </div>
+</template>
+
+<script>
+
+import ArticleBar from './components2/article-bar';
+import ArticleFooter from './components2/article-footer';
+import ArticleBody from './components2/article-body';
+
+export default {
+  name: 'ArticleDetail',
+  components: {
+    ArticleBar,
+    ArticleBody,
+    ArticleFooter
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.article {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    // pass
+  }
+
+  .body {
+    flex: 1;
+  }
+
+  .footer {
+    // pass
+  }
+}
+</style>

@@ -29,8 +29,8 @@ export default {
   },
   },
   methods: {
   methods: {
     close() {
     close() {
-      console.log('close');
       this.$emit('close');
       this.$emit('close');
+      this.$yoho.finishPage({});
     }
     }
   }
   }
 };
 };

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

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

+<template>
+  <div class="bar-wrapper">
+    <div class="title">资讯详情</div>
+
+    <div class="close" @click="close">
+      <i class="iconfont icon-close icon"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleBar',
+  methods: {
+    close() {
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.bar-wrapper {
+  width: 100%;
+  height: 88px;
+  position: relative;
+  background-color: white;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.title {
+  font-size: 32px;
+  color: #444;
+  line-height: 88px;
+  text-align: center;
+}
+
+.close {
+  color: #444;
+  position: absolute;
+  top: 20px;
+  right: 40px;
+}
+
+.icon {
+  font-size: 50px;
+}
+
+</style>

+<template>
+  <Scroll class="scroll-wrapper" :options="scrollOpts">
+    <div v-for="i in 40">huangtao {{i}}</div>
+
+    <Recommend>
+      <RecommendProductList></RecommendProductList>
+    </Recommend>
+  </Scroll>
+</template>
+
+<script>
+
+import {Scroll} from 'cube-ui';
+import RecommendProductList from './recommend-product-list';
+import Recommend from './recommend'
+
+export default {
+  name: 'ArticleBody',
+  components: {
+    Scroll,
+    RecommendProductList,
+    Recommend
+  },
+  data() {
+    return {
+      scrollOpts: {
+        eventPassthrough: 'horizontal'
+      }
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.scroll-wrapper {
+  background-color: white;
+}
+</style>

+<template>
+  <div class="article-footer-wrapper">
+    <div class="tool-bar">
+      <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="star" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+    </div>
+    <div class="close ml20">收起</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleFooter',
+  data() {
+    return {
+      option: {
+        eventName: 'click'
+      }
+    };
+  },
+  methods: {
+    onClick() {
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.article-footer-wrapper {
+  display: flex;
+  height: 100px;
+  border-top: 1px solid #e0e0e0;
+  background-color: white;
+}
+
+.tool-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.close {
+  width: 200px;
+  color: white;
+  font-size: 32px;
+  line-height: 100px;
+  background-color: #d0021b;
+  text-align: center;
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+</style>

+<template>
+  <div class="product-item">
+    <div class="product-images-wrapper">
+      <img class="image" :src="imgUrl"/>
+      <div class="price">{{price}}</div>
+    </div>
+
+    <div class="title line-clamp-2">{{title}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecommendProductItem',
+  props: {
+    price: {
+      type: String,
+      default() {
+        return '￥1111.0';
+      },
+    },
+    imgUrl: {
+      type: String,
+      default() {
+        return '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60';
+      }
+    },
+    title: {
+      type: String,
+      default() {
+        return 'viishow 套头圆领撞拼条纹针织衫';
+      }
+    }
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.product-item {
+  display: inline-block;
+  width: 170px;
+
+  .product-images-wrapper {
+    position: relative;
+    width: 170px;
+    height: 226px;
+    margin-bottom: 12px;
+
+    .image {
+      width: 170px;
+      height: 226px;
+    }
+
+    .price {
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      position: absolute;
+      bottom: 10px;
+      margin-left: 82px;
+      color: white;
+      font-size: 20px;
+      background-image: linear-gradient(90deg, #474747 0%, #222 100%);
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .title {
+    width: 100%;
+    font-size: 20px;
+    color: #444;
+    word-break: break-all;
+    white-space: normal;
+  }
+}
+
+</style>

+<template>
+  <div class="product-list">
+    <RecommendProductItem class="item" v-for="i in 5"></RecommendProductItem>
+  </div>
+</template>
+
+<script>
+
+import RecommendProductItem from './recommend-product-item'
+
+export default {
+  name: 'RecommendProductList',
+  components: {
+    RecommendProductItem
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.product-list {
+  width: 100%;
+  overflow: scroll;
+  white-space: nowrap;
+}
+
+.item + .item {
+  margin-left: 22px;
+}
+
+.item:first-child {
+  margin-left: 40px;
+}
+
+.item:last-child {
+  margin-right: 40px;
+}
+</style>

+<template>
+  <div>
+    <div class="title">推荐商品</div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Recommend'
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 32px;
+  color: #222;
+  text-align: left;
+  margin-bottom: 30px;
+  font-weight: bold;
+  margin-left: 40px;
+}
+</style>

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

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

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