328 lines
6.2 KiB
Vue
328 lines
6.2 KiB
Vue
<!--评论模块-->
|
|
<template>
|
|
<div class="container">
|
|
<div class="comment" v-for="item in comments">
|
|
<div class="info">
|
|
<!-- <img class="avatar" :src="item.fromAvatar" width="36" height="36" /> -->
|
|
<div class="right">
|
|
<div class="name">{{item.user.account}}
|
|
<span style="margin: 0 10px;">( {{item.role}} )</span></div>
|
|
<div class="date">{{item.ctime}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">{{item.content}}</div>
|
|
<!-- <div class="control">
|
|
<span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
|
|
<i class="iconfont icon-like"></i>
|
|
<span class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
|
|
</span>
|
|
<span class="comment-reply" @click="showCommentInput(item)">
|
|
<i class="iconfont icon-comment"></i>
|
|
<span>回复</span>
|
|
</span>
|
|
</div> --->
|
|
<!-- <div class="reply">
|
|
<div class="item" v-for="reply in item.reply">
|
|
<div class="reply-content">
|
|
<span class="from-name">{{reply.fromName}}</span><span>: </span>
|
|
<span class="to-name">@{{reply.toName}}</span>
|
|
<span>{{reply.content}}</span>
|
|
</div>
|
|
<div class="reply-bottom">
|
|
<span>{{reply.date}}</span>
|
|
<span class="reply-text" @click="showCommentInput(item, reply)">
|
|
<i class="iconfont icon-comment"></i>
|
|
<span>回复</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="write-reply" v-if="item.reply.length > 0" @click="showCommentInput(item)">
|
|
<i class="el-icon-edit"></i>
|
|
<span class="add-comment">添加新评论</span>
|
|
</div>
|
|
<transition name="fade">
|
|
<div class="input-wrapper" v-if="showItemId === item.id">
|
|
<el-input class="gray-bg-input" v-model="inputComment" type="textarea" :rows="3" autofocus placeholder="写下你的评论">
|
|
</el-input>
|
|
<div class="btn-control">
|
|
<span class="cancel" @click="cancel">取消</span>
|
|
<el-button class="btn" type="success" round @click="commitComment">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
|
|
export default {
|
|
props: {
|
|
comments: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
inputComment: '',
|
|
showItemId: ''
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
/**
|
|
* 点赞
|
|
*/
|
|
likeClick(item) {
|
|
if (item.isLike === null) {
|
|
Vue.$set(item, "isLike", true);
|
|
item.likeNum++
|
|
} else {
|
|
if (item.isLike) {
|
|
item.likeNum--
|
|
} else {
|
|
item.likeNum++
|
|
}
|
|
item.isLike = !item.isLike;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 点击取消按钮
|
|
*/
|
|
cancel() {
|
|
this.showItemId = ''
|
|
},
|
|
|
|
/**
|
|
* 提交评论
|
|
*/
|
|
commitComment() {
|
|
console.log(this.inputComment);
|
|
},
|
|
|
|
/**
|
|
* 点击评论按钮显示输入框
|
|
* item: 当前大评论
|
|
* reply: 当前回复的评论
|
|
*/
|
|
showCommentInput(item, reply) {
|
|
if (reply) {
|
|
this.inputComment = "@" + reply.fromName + " "
|
|
} else {
|
|
this.inputComment = ''
|
|
}
|
|
this.showItemId = item.id
|
|
}
|
|
},
|
|
created() {
|
|
// console.log(this.comments)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
/* border: 1px solid #DCDFE6; */
|
|
/* max-height: 500px; */
|
|
/* overflow-y: scroll; */
|
|
}
|
|
|
|
.container .comment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #F2F6FC;
|
|
}
|
|
|
|
.container .comment .info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.container .comment .info .avatar {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.container .comment .info .right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* margin-left: 10px; */
|
|
}
|
|
|
|
.container .comment .info .right .name {
|
|
font-size: 16px;
|
|
color: #303133;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.container .comment .info .right .date {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
|
|
.content {
|
|
font-size: 16px;
|
|
color: #303133;
|
|
line-height: 20px;
|
|
padding: 10px 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.control {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
|
|
.control .like {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control .like.active,
|
|
.control .like:hover {
|
|
color: #409EFF;
|
|
}
|
|
|
|
.control .like .iconfont {
|
|
font-size: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.control .comment-reply {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control .comment-reply:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.control .comment-reply .iconfont {
|
|
font-size: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.reply {
|
|
margin: 10px 0;
|
|
border-left: 2px solid #DCDFE6;
|
|
}
|
|
|
|
.reply .item {
|
|
margin: 0 10px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed #EBEEF5;
|
|
}
|
|
|
|
.reply .item .reply-content {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #303133;
|
|
}
|
|
|
|
.reply .item .reply-content .from-name {
|
|
color: #409EFF;
|
|
}
|
|
|
|
.reply .item .reply-content .to-name {
|
|
color: #409EFF;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.reply .item .reply-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
|
|
.reply .item .reply-bottom .reply-text {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply .item .reply-bottom .reply-text:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.reply .item .reply-bottom .reply-text .icon-comment {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.reply .write-reply {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #909399;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply .write-reply:hover {
|
|
color: #303133;
|
|
}
|
|
|
|
.reply .write-reply .el-icon-edit {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
|
|
.reply .fade-enter-active,
|
|
.reply .fade-leave-active {
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.reply .fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.reply .input-wrapper {
|
|
padding: 10px;
|
|
}
|
|
|
|
.reply .input-wrapper .gray-bg-input,
|
|
.el-input__inner {
|
|
/*background-color: #67C23A;*/
|
|
}
|
|
|
|
.reply .input-wrapper .btn-control {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.reply .input-wrapper .btn-control .cancel {
|
|
font-size: 16px;
|
|
color: #606266;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply .input-wrapper .btn-control .cancel:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.reply .input-wrapper .btn-control .confirm {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|