blog/blog-facade.git

inleft

2022-08-26 fa1bd95d533444d7360d1ada127b7a3279a3901f

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