潮物详情

 <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>
 
 <script>
 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>
+
+<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>
+

@@ -15,15 +15,27 @@
             </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>
@@ -34,7 +46,91 @@ export default {
     name: 'fashionDetail',
     data() {
         return {
-            shareData: {}
+            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',
+                }
+            }],
         }
     }
 }
@@ -98,6 +194,12 @@ export default {
 
     .follow {
         margin-bottom: 30px;
+        padding: 0 30px;
+        clear: both;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
     }
 
     .out-box {
@@ -105,12 +207,44 @@ export default {
         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;
+            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 {
@@ -120,5 +254,55 @@ export default {
         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>