blog/blog-facade.git

inleft

2022-03-03 0b0125884c449378a2e80f888a43a2d20974c8df

commit \| author \| age
81c155	1	<template>
846bd0	2	<div>
0b0125	3	<replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></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>
0b0125	8
5dfef8	9	<div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0">
846bd0	10	<p>空空如也..</p>
I	11	</div>
2f9d3c	12	<div v-for="temp in commentListData" class="commentList">
I	13	<div class="commentGroup">
	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>
0b0125	33	<div class="samllPadding">:</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>
0b0125	57	<div class="samllPadding">:</div>
I	58	<div class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
	59	@<a :href="tempData.replyUserHomePage" target="_blank"
	60	v-if="tempData.replyUserHomePage!=''">
	61	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
	62	{{tempData.replyUserName}}
	63	</a-tooltip>
	64	</a>
	65	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
620f75	66	{{tempData.replyUserName}}
I	67	</a-tooltip>
0b0125	68	</div>
2f9d3c	69	</div>
e33959	70	<p slot="content">{{tempData.commentContent}}</p>
I	71	</a-comment>
fc0c10	72	</a-comment>
620f75	73
I	74	<div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
	75	<span>
	76	<a-icon type="down" />展开
	77	</span>
	78	</div>
2f9d3c	79	</div>
I	80	</div>
ec97e0	81	<a-row type="flex" justify="center">
I	82	<div>
	83	<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
	84	:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
	85	</div>
	86	</a-row>
81c155	87	</div>
I	88	</template>
	89
	90
	91	<script>
2f9d3c	92	import replyBox from "./box13-reply.vue"
ec97e0	93
I	94	import {
e33959	95	queryBlogCommentList,
I	96	queryBlogCommentSubList
ec97e0	97	} from '../../api/blogArticleComment.js'
I	98
81c155	99	export default {
2f9d3c	100	components: {
I	101	replyBox
	102	},
	103	methods: {
5dfef8	104	updateCommentList(articleId) {
ec97e0	105	queryBlogCommentList({
I	106	pageNo: this.page.current,
	107	pageSize: this.page.pageSize,
5dfef8	108	articleId: articleId
ec97e0	109	}).then((res) => {
I	110	this.page.total = Number(res.data.total)
	111	this.page.pageSize = Number(res.data.size);
	112	this.commentListData = res.data.records;
	113	})
5dfef8	114	},
I	115	sendMsg() {
	116	this.visible = false;
	117	this.$message.info("列表刷新中..")
	118	setTimeout(() => {
	119	this.updateCommentList(this.$attrs.articleId);
	120	}, 1000);
	121	},
	122	onChange(current) {
	123	this.page.current = current;
	124	this.updateCommentList();
2f9d3c	125	},
e33959	126	loadMore(temp) {
I	127	temp.isHasNext = 0;
	128
	129	queryBlogCommentSubList({
	130	commentId: temp.id
	131	}).then((res) => {
	132	if (res.data.length == temp.replyList.length) {
	133	this.$message.info("没有更多了..")
	134	}
	135	temp.replyList = res.data;
	136	})
ec97e0	137	},
I	138	replyCall(obj, replyId) {
2f9d3c	139	this.visible = true;
e33959	140	this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c	141	var msgInfo = {
ec97e0	142	useName: obj.visitorNickName,
I	143	userComment: obj.commentContent,
	144	parentId: obj.parentId == 0 ? obj.id : obj.parentId,
	145	replyId: obj.id
2f9d3c	146	};
f60b31	147	this.$nextTick(() => {
I	148	this.$refs.replyBoxId.getMsgInfo(msgInfo);
	149	});
2f9d3c	150	}
I	151	},
81c155	152	data() {
I	153	return {
ec97e0	154	page: {
I	155	size: "small",
	156	total: 1,
620f75	157	pageSize: 5,
ec97e0	158	current: 1,
I	159	defaultPageSize: 10
	160	},
	161	replyTaget: "",
f60b31	162	visible: false,
620f75	163	commentListData: [],
81c155	164	}
I	165	}
	166	}
	167	</script>
	168
2f9d3c	169	<style lang="less">
0b0125	170	.samllPadding {
I	171	padding: 0px 3px 5px;
	172	}
	173
2f9d3c	174	.visitInfo {
I	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;
0b0125	237	flex-direction: column;
2f9d3c	238	}
I	239
	240	.commentGroup {
	241	border-top: 1px solid #e5e9ef;
620f75	242	margin-bottom: 5px;
I	243	padding-bottom: 0px;
2f9d3c	244	}
I	245
	246	.ant-comment-content-detail {
0b0125	247	padding-left: 50px;
I	248	padding-top: 5px;
	249
2f9d3c	250	p {
I	251	margin-bottom: 0px;
	252	}
	253	}
	254	}
81c155	255	</style>