blog/blog-facade.git

inleft

2022-03-03 5dfef883049e7f0670f6c6b1b225b233aee41eea

commit \| author \| age
81c155	1	<template>
846bd0	2	<div>
I	3	<replyBox ref="commentBoxId" v-bind="$attrs"></replyBox>
ec97e0	4	<a-modal v-model="visible" :title="replyTaget" :footer="null"
e33959	5	:bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
5dfef8	6	<replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
2f9d3c	7	</a-modal>
5dfef8	8	<div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0">
846bd0	9	<p>空空如也..</p>
I	10	</div>
2f9d3c	11	<div v-for="temp in commentListData" class="commentList">
81c155	12
2f9d3c	13	<div class="commentGroup">
I	14	<a-comment>
620f75	15	<div slot="actions" key="comment-nested-reply-to" class="actionList">
I	16	<span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span>
ec97e0	17	<span @click="replyCall(temp)">
620f75	18	<a-icon type="message" />
ec97e0	19	</span>
620f75	20	</div>
ec97e0	21
620f75	22	<div slot="avatar" style="display: flex;">
I	23	<div class="myTextDeal">
	24	<a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''">
	25	<a-tooltip placement="bottomLeft" :title="temp.visitorNickName">
	26	{{temp.visitorNickName}}
	27	</a-tooltip>
	28	</a>
	29	<a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else>
	30	{{temp.visitorNickName}}
	31	</a-tooltip>
	32	</div>
	33	<div>:</div>
fc0c10	34	</div>
81c155	35
ec97e0	36	<p slot="content">{{temp.commentContent}}</p>
2f9d3c	37
e33959	38	<a-comment v-for="tempData in temp.replyList">
620f75	39	<div slot="actions" key="comment-nested-reply-to" class="actionList">
I	40	<span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}}
	41	</span>
	42	<span @click="replyCall(tempData)">
	43	<a-icon type="message" />
	44	</span>
	45	</div>
	46	<div slot="avatar" style="display: flex;">
	47	<div class="myTextDeal">
	48	<a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''">
	49	<a-tooltip placement="bottomLeft" :title="tempData.visitorNickName">
	50	{{tempData.visitorNickName}}
	51	</a-tooltip>
	52	</a>
	53	<a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else>
	54	{{tempData.visitorNickName}}
	55	</a-tooltip>
	56	</div>
	57	<div>:</div>
	58	</div>
	59
	60	<div slot="content" class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
	61	@<a :href="tempData.replyUserHomePage" target="_blank"
	62	v-if="tempData.replyUserHomePage!=''">
	63	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
	64	{{tempData.replyUserName}}
	65	</a-tooltip>
ec97e0	66	</a>
620f75	67	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
I	68	{{tempData.replyUserName}}
	69	</a-tooltip>
2f9d3c	70	</div>
e33959	71	<p slot="content">{{tempData.commentContent}}</p>
I	72	</a-comment>
fc0c10	73	</a-comment>
620f75	74
I	75	<div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
	76	<span>
	77	<a-icon type="down" />展开
	78	</span>
	79	</div>
2f9d3c	80	</div>
I	81	</div>
ec97e0	82
I	83	<a-row type="flex" justify="center">
	84	<div>
	85	<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
	86	:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
	87	</div>
	88	</a-row>
81c155	89	</div>
I	90	</template>
	91
	92
	93	<script>
2f9d3c	94	import replyBox from "./box13-reply.vue"
ec97e0	95
I	96	import {
e33959	97	queryBlogCommentList,
I	98	queryBlogCommentSubList
ec97e0	99	} from '../../api/blogArticleComment.js'
I	100
81c155	101	export default {
2f9d3c	102	components: {
I	103	replyBox
	104	},
	105	methods: {
5dfef8	106	updateCommentList(articleId) {
ec97e0	107	queryBlogCommentList({
I	108	pageNo: this.page.current,
	109	pageSize: this.page.pageSize,
5dfef8	110	articleId: articleId
ec97e0	111	}).then((res) => {
I	112	this.page.total = Number(res.data.total)
	113	this.page.pageSize = Number(res.data.size);
	114	this.commentListData = res.data.records;
	115	})
5dfef8	116	},
I	117	sendMsg() {
	118	this.visible = false;
	119	this.$message.info("列表刷新中..")
	120	setTimeout(() => {
	121	this.updateCommentList(this.$attrs.articleId);
	122	}, 1000);
	123	},
	124	onChange(current) {
	125	this.page.current = current;
	126	this.updateCommentList();
2f9d3c	127	},
e33959	128	loadMore(temp) {
I	129	temp.isHasNext = 0;
	130
	131	queryBlogCommentSubList({
	132	commentId: temp.id
	133	}).then((res) => {
	134	if (res.data.length == temp.replyList.length) {
	135	this.$message.info("没有更多了..")
	136	}
	137	temp.replyList = res.data;
	138	})
ec97e0	139	},
I	140	replyCall(obj, replyId) {
2f9d3c	141	this.visible = true;
e33959	142	this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c	143	var msgInfo = {
ec97e0	144	useName: obj.visitorNickName,
I	145	userComment: obj.commentContent,
	146	parentId: obj.parentId == 0 ? obj.id : obj.parentId,
	147	replyId: obj.id
2f9d3c	148	};
f60b31	149	this.$nextTick(() => {
I	150	this.$refs.replyBoxId.getMsgInfo(msgInfo);
	151	});
2f9d3c	152	}
I	153	},
81c155	154	data() {
I	155	return {
620f75	156	isAllowedComment: true,
ec97e0	157	page: {
I	158	size: "small",
	159	total: 1,
620f75	160	pageSize: 5,
ec97e0	161	current: 1,
I	162	defaultPageSize: 10
	163	},
	164	replyTaget: "",
f60b31	165	visible: false,
620f75	166	commentListData: [],
2f9d3c	167
81c155	168	}
I	169	}
	170	}
	171	</script>
	172
2f9d3c	173	<style lang="less">
I	174	.visitInfo {
	175	user-select: none;
	176	}
	177
620f75	178	.myTextDeal {
I	179	// display: -webkit-container;
	180	max-width: 80px;
	181	-webkit-line-clamp: 1;
	182	text-overflow: ellipsis;
	183	overflow: hidden;
	184	word-wrap: break-word;
	185	white-space: nowrap;
	186	word-break: break-all;
	187	}
	188
	189	.loadMore {
	190	margin: 10px;
	191	display: flex;
	192	justify-content: center;
	193	}
	194
	195	.loadMore:hover {
	196	background-color: #00000021
	197	}
	198
e33959	199	.ant-drawer-wrapper-body::-webkit-scrollbar,
I	200	.ant-modal-body::-webkit-scrollbar {
	201	display: none;
620f75	202	}
I	203
	204	.actionList {
	205	display: flex;
	206	justify-content: flex-end;
e33959	207	}
I	208
2f9d3c	209	.commentList {
ec97e0	210	a {
I	211	color: black;
	212	}
2f9d3c	213
I	214	img {
	215	user-select: none;
ec97e0	216	}
I	217
	218	.ant-comment-avatar {
	219	cursor: default;
2f9d3c	220	}
I	221
	222	.ant-comment-actions {
620f75	223
I	224	li {
	225	width: -webkit-fill-available;
	226	}
	227
	228	margin-bottom: 0px;
2f9d3c	229	}
I	230
	231	.ant-comment-content-author {
	232	margin-bottom: 0px;
	233	}
	234
	235	.ant-comment-inner {
	236	padding: 10px 10px 0px;
	237	}
	238
	239	.commentGroup {
	240	border-top: 1px solid #e5e9ef;
620f75	241	margin-bottom: 5px;
I	242	padding-bottom: 0px;
2f9d3c	243	}
I	244
	245	.ant-comment-content-detail {
	246	p {
	247	margin-bottom: 0px;
	248	}
	249	}
	250	}
81c155	251	</style>