<template>
|
<div>
|
<replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
|
<a-modal v-model="visible" :title="replyTaget" :footer="null"
|
:bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
|
<replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
|
</a-modal>
|
|
<div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0">
|
<p>空空如也..</p>
|
</div>
|
<div v-for="temp in commentListData" class="commentList">
|
<div class="commentGroup">
|
<a-comment>
|
<div slot="actions" key="comment-nested-reply-to" class="actionList">
|
<span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span>
|
<span @click="replyCall(temp)">
|
<a-icon type="message" />
|
</span>
|
</div>
|
|
<div slot="avatar" style="display: flex;">
|
<div class="myTextDeal">
|
<a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''">
|
<a-tooltip placement="bottomLeft" :title="temp.visitorNickName">
|
{{temp.visitorNickName}}
|
</a-tooltip>
|
</a>
|
<a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else>
|
{{temp.visitorNickName}}
|
</a-tooltip>
|
</div>
|
<div class="samllPadding">:</div>
|
</div>
|
|
<p slot="content">{{temp.commentContent}}</p>
|
|
<a-comment v-for="tempData in temp.replyList">
|
<div slot="actions" key="comment-nested-reply-to" class="actionList">
|
<span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}}
|
</span>
|
<span @click="replyCall(tempData)">
|
<a-icon type="message" />
|
</span>
|
</div>
|
<div slot="avatar" style="display: flex;">
|
<div class="myTextDeal">
|
<a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''">
|
<a-tooltip placement="bottomLeft" :title="tempData.visitorNickName">
|
{{tempData.visitorNickName}}
|
</a-tooltip>
|
</a>
|
<a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else>
|
{{tempData.visitorNickName}}
|
</a-tooltip>
|
</div>
|
<div class="samllPadding">:</div>
|
<div class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
|
@<a :href="tempData.replyUserHomePage" target="_blank"
|
v-if="tempData.replyUserHomePage!=''">
|
<a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
|
{{tempData.replyUserName}}
|
</a-tooltip>
|
</a>
|
<a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
|
{{tempData.replyUserName}}
|
</a-tooltip>
|
</div>
|
</div>
|
<p slot="content">{{tempData.commentContent}}</p>
|
</a-comment>
|
</a-comment>
|
|
<div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
|
<span>
|
<a-icon type="down" />展开
|
</span>
|
</div>
|
</div>
|
</div>
|
<a-row type="flex" justify="center">
|
<div>
|
<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
|
:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
|
</div>
|
</a-row>
|
</div>
|
</template>
|
|
|
<script>
|
import replyBox from "./box13-reply.vue"
|
|
import {
|
queryBlogCommentList,
|
queryBlogCommentSubList
|
} from '../../api/blogArticleComment.js'
|
|
export default {
|
components: {
|
replyBox
|
},
|
methods: {
|
updateCommentList(articleId) {
|
queryBlogCommentList({
|
pageNo: this.page.current,
|
pageSize: this.page.pageSize,
|
articleId: articleId
|
}).then((res) => {
|
this.page.total = Number(res.data.total)
|
this.page.pageSize = Number(res.data.size);
|
this.commentListData = res.data.records;
|
})
|
},
|
sendMsg() {
|
this.visible = false;
|
this.$message.info("列表刷新中..")
|
setTimeout(() => {
|
this.updateCommentList(this.$attrs.articleId);
|
}, 1000);
|
},
|
onChange(current) {
|
this.page.current = current;
|
this.updateCommentList();
|
},
|
loadMore(temp) {
|
temp.isHasNext = 0;
|
|
queryBlogCommentSubList({
|
commentId: temp.id
|
}).then((res) => {
|
if (res.data.length == temp.replyList.length) {
|
this.$message.info("没有更多了..")
|
}
|
temp.replyList = res.data;
|
})
|
},
|
replyCall(obj, replyId) {
|
this.visible = true;
|
this.replyTaget = "回复Ta @" + obj.visitorNickName;
|
var msgInfo = {
|
useName: obj.visitorNickName,
|
userComment: obj.commentContent,
|
parentId: obj.parentId == 0 ? obj.id : obj.parentId,
|
replyId: obj.id
|
};
|
this.$nextTick(() => {
|
this.$refs.replyBoxId.getMsgInfo(msgInfo);
|
});
|
}
|
},
|
data() {
|
return {
|
page: {
|
size: "small",
|
total: 1,
|
pageSize: 5,
|
current: 1,
|
defaultPageSize: 10
|
},
|
replyTaget: "",
|
visible: false,
|
commentListData: [],
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.samllPadding {
|
padding: 0px 3px 5px;
|
}
|
|
.visitInfo {
|
user-select: none;
|
}
|
|
.myTextDeal {
|
// display: -webkit-container;
|
max-width: 80px;
|
-webkit-line-clamp: 1;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
word-wrap: break-word;
|
white-space: nowrap;
|
word-break: break-all;
|
}
|
|
.loadMore {
|
margin: 10px;
|
display: flex;
|
justify-content: center;
|
}
|
|
.loadMore:hover {
|
background-color: #00000021
|
}
|
|
.ant-drawer-wrapper-body::-webkit-scrollbar,
|
.ant-modal-body::-webkit-scrollbar {
|
display: none;
|
}
|
|
.actionList {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.commentList {
|
a {
|
color: black;
|
}
|
|
img {
|
user-select: none;
|
}
|
|
.ant-comment-avatar {
|
cursor: default;
|
}
|
|
.ant-comment-actions {
|
|
li {
|
width: -webkit-fill-available;
|
}
|
|
margin-bottom: 0px;
|
}
|
|
.ant-comment-content-author {
|
margin-bottom: 0px;
|
}
|
|
.ant-comment-inner {
|
padding: 10px 10px 0px;
|
flex-direction: column;
|
}
|
|
.commentGroup {
|
border-top: 1px solid #e5e9ef;
|
margin-bottom: 5px;
|
padding-bottom: 0px;
|
}
|
|
.ant-comment-content-detail {
|
padding-left: 50px;
|
padding-top: 5px;
|
|
p {
|
margin-bottom: 0px;
|
}
|
}
|
}
|
</style>
|
