blog/blog-facade.git

inleft

2022-08-16 b72b2ea324a3ab0e94b987bf98024bd884d25f33

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