fe / yoho-community-web · Commits

Go to a project

Authored by 王水玲
Commit 64b1bcda022bb723e4b2ed7223e25919023df3c8 1 parent 61c50d20

潮物详情

Inline Side-by-side
Showing 2 changed files with 351 additions and 10 deletions
<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,13 +207,45 @@ export default {
padding: 30px;
}
.comment-title {
background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
background-size: contain;
width: 310px;
height: 78px;
margin: 0 auto;
}
.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;
... ... @@ -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>
... ...