<template>
|
<div class="myFriend" style="min-height: 950px;">
|
<h1 style="text-align: center;">碎碎念</h1>
|
<replyBox ref="commentBoxId"></replyBox>
|
<a-modal v-model="visible" :title="replyTaget" :footer="null"
|
:bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
|
<replyBox ref="replyBoxId"></replyBox>
|
</a-modal>
|
|
<div v-for="temp in commentListData" class="commentList">
|
|
<div class="commentGroup">
|
<a-comment>
|
<span slot="actions" key="comment-nested-reply-to">
|
<span style="cursor: default;">{{temp.createDate}} </span>
|
<span @click="replyCall(temp)">
|
<a-icon type="edit" />
|
回复
|
</span>
|
|
<span @click="loadMore(temp)" v-if="temp.isHasNext==1">
|
<a-icon type="down" />更多..
|
</span>
|
</span>
|
|
<div slot="avatar">
|
<a :href="temp.userHomePage" target="_blank" class="no-underline">
|
{{temp.visitorNickName}} :
|
</a>
|
</div>
|
|
<p slot="content">{{temp.commentContent}}</p>
|
|
<a-comment v-for="tempData in temp.replyList">
|
<span slot="actions" key="comment-nested-reply-to" @click="replyCall(tempData)">
|
<a-icon type="edit" />回复
|
</span>
|
<div slot="avatar">
|
<a :href="tempData.userHomePage" target="_blank" class="no-underline">
|
{{tempData.visitorNickName}}
|
</a>
|
@
|
<a :href="tempData.replyUserHomePage" target="_blank" class="no-underline">
|
{{tempData.replyUserName}} :
|
</a>
|
</div>
|
<p slot="content">{{tempData.commentContent}}</p>
|
</a-comment>
|
|
<!-- <div class="loadMore" v-if="temp.isHasNext!=1">
|
<a-icon type="smile" /><span>到底了..</span>
|
</div> -->
|
</a-comment>
|
</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
|
},
|
beforeMount() {
|
queryBlogCommentList({
|
pageNo: this.page.current,
|
pageSize: this.page.pageSize,
|
articleId: this.articleId
|
}).then((res) => {
|
this.page.total = Number(res.data.total)
|
this.page.pageSize = Number(res.data.size);
|
this.commentListData = res.data.records;
|
return res
|
})
|
},
|
methods: {
|
onChange(current) {
|
this.page.current = current;
|
queryBlogCommentList({
|
pageNo: this.page.current,
|
pageSize: this.page.pageSize,
|
articleId: this.articleId
|
}).then((res) => {
|
this.page.total = Number(res.data.total)
|
this.page.pageSize = Number(res.data.size);
|
this.commentListData = res.data.records;
|
})
|
},
|
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 {
|
articleId: null,
|
page: {
|
size: "small",
|
total: 1,
|
pageSize: 2,
|
current: 1,
|
defaultPageSize: 10
|
},
|
replyTaget: "",
|
visible: false,
|
commentListData: [
|
// {
|
// userName: "bimo",
|
// userComment: "1+1=2?",
|
// commentTime: "2022-02-22 22:22:22",
|
// id: "1",
|
// parentId: null,
|
// replyId: null,
|
// replyUserName: null,
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// replyList: {
|
// total: "3",
|
// current: "1",
|
// listData: [{
|
// userName: "inleft",
|
// userComment: "2",
|
// commentTime: "2022-02-22 23:22:22",
|
// id: "2",
|
// parentId: "1",
|
// replyId: "1",
|
// replyUserName: "bimo",
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// }, {
|
// userName: "air",
|
// userComment: "不对是3",
|
// commentTime: "2022-02-23 13:13:13",
|
// id: "3",
|
// parentId: "1",
|
// replyId: "2",
|
// replyUserName: "inleft",
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// }]
|
// },
|
// }, {
|
// userName: "bimo",
|
// userComment: "1+1=2?",
|
// commentTime: "2022-02-22 22:22:22",
|
// id: "1",
|
// parentId: null,
|
// replyId: null,
|
// replyUserName: null,
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// replyList: {
|
// total: "3",
|
// current: "1",
|
// listData: [{
|
// userName: "inleft",
|
// userComment: "2",
|
// commentTime: "2022-02-22 23:22:22",
|
// id: "2",
|
// parentId: "1",
|
// replyId: "1",
|
// replyUserName: "bimo",
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// }, {
|
// userName: "air",
|
// userComment: "不对是3",
|
// commentTime: "2022-02-23 13:13:13",
|
// id: "3",
|
// parentId: "1",
|
// replyId: "2",
|
// replyUserName: "inleft",
|
// userHomePage: "",
|
// replyUserHomePage: "",
|
// }]
|
// },
|
// },
|
],
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.visitInfo {
|
user-select: none;
|
}
|
|
.ant-drawer-wrapper-body::-webkit-scrollbar,
|
.ant-modal-body::-webkit-scrollbar {
|
display: none;
|
}
|
|
.commentList {
|
a {
|
color: black;
|
}
|
|
img {
|
user-select: none;
|
}
|
|
.ant-comment-avatar {
|
cursor: default;
|
}
|
|
.ant-comment-actions {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.ant-comment-content-author {
|
margin-bottom: 0px;
|
}
|
|
.ant-comment-inner {
|
padding: 10px 10px 0px;
|
}
|
|
.commentGroup {
|
border-top: 1px solid #e5e9ef;
|
margin-bottom: 10px;
|
padding-bottom: 15px;
|
}
|
|
.ant-comment-content-detail {
|
p {
|
margin-bottom: 0px;
|
}
|
}
|
}
|
</style>
|
