<template> <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 | time}}</p> </div> <WidgetFav class="comment-fav" :comment-id="parentComment.id" :num="parentComment.praiseTotal" :option="favOption"></WidgetFav> </div> <CommentPlaceholder class="comment-cont" :dest-id="parentComment.id" :add-type="1" :user="parentComment.userName" :column-type="columnType" @on-comment="onReply"> {{parentComment.content}} </CommentPlaceholder> <div class="reply-main" v-if="replayShowList.length"> <CommentPlaceholder tag="p" class="reply-item" v-for="(reply, replyIndex) in replayShowList" :key="replyIndex" :dest-id="reply.id" :add-type="1" :user="reply.userName" :column-type="columnType" @on-comment="() => onReply({destId: parentComment.id})"> <span class="reply-user"> {{reply.userName}} </span> <span v-if="reply.parentUserName"> 回复<em class="reply-to-user">@{{reply.parentUserName}}</em> </span>: <span> {{reply.content}} </span> </CommentPlaceholder> <p class="reply-more" v-if="moreReplyNum > 0" @click="onShowMore"> {{replyMoreText}} <i class="iconfont icon-right" v-if="!isShowAllReply"></i> </p> </div> </div> </div> </template> <script> import {createNamespacedHelpers} from 'vuex'; const {mapActions} = createNamespacedHelpers('comment'); export default { name: 'CommentItem', props: { parentComment: Object, childrenComments: Array, columnType: { type: Number, default: 1001 } }, data() { return { isShowAllReply: false, limitNum: 2, }; }, computed: { favOption() { return { selected: this.parentComment.isPraise === 'Y' }; }, replayShowList() { if (this.childrenComments.length <= this.limitNum) { return this.childrenComments; } if (this.isShowAllReply) { return this.childrenComments; } return this.childrenComments.slice(0, this.limitNum); }, moreReplyNum() { return this.childrenComments.length - this.limitNum; }, replyMoreText() { return this.isShowAllReply ? '收起' : `查看${this.moreReplyNum}条回复`; } }, methods: { ...mapActions(['postComment']), onShowMore() { this.isShowAllReply = !this.isShowAllReply; }, async onReply({destId}) { this.$emit('on-reply', {commentId: destId}); } } }; </script> <style scoped lang="scss"> .comment-item { display: flex; margin-bottom: 40px; &: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; width: 100%; height: auto; } .comment-time { font-size: 20px; color: #b0b0b0; line-height: 28px; transform: scale(0.8); transform-origin: left; } } .comment-fav { padding-right: 20px; } .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; margin-top: 20px; .reply-item { margin-bottom: 20px; &: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; } } } </style>