blog/blog-facade.git

inleft

2022-08-16 c14e3278893b9dd1022aa488cee53a888c2a4c7e

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>
c14e32	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	},
2f9d3c	117	methods: {
c14e32	118	parseContent(content) {
I	119	let tempStrArray=content.match("\:\&$.*$");
	120
	121	console.log(OwOjsonConfig);
	122	console.log(333);
	123	return content;
	124	},
5dfef8	125	updateCommentList(articleId) {
ec97e0	126	queryBlogCommentList({
I	127	pageNo: this.page.current,
	128	pageSize: this.page.pageSize,
5dfef8	129	articleId: articleId
ec97e0	130	}).then((res) => {
I	131	this.page.total = Number(res.data.total)
	132	this.page.pageSize = Number(res.data.size);
	133	this.commentListData = res.data.records;
	134	})
5dfef8	135	},
I	136	sendMsg() {
	137	this.visible = false;
	138	this.$message.info("列表刷新中..")
	139	setTimeout(() => {
	140	this.updateCommentList(this.$attrs.articleId);
	141	}, 1000);
	142	},
	143	onChange(current) {
	144	this.page.current = current;
	145	this.updateCommentList();
2f9d3c	146	},
e33959	147	loadMore(temp) {
I	148	temp.isHasNext = 0;
	149
	150	queryBlogCommentSubList({
	151	commentId: temp.id
	152	}).then((res) => {
	153	if (res.data.length == temp.replyList.length) {
	154	this.$message.info("没有更多了..")
	155	}
	156	temp.replyList = res.data;
	157	})
ec97e0	158	},
I	159	replyCall(obj, replyId) {
2f9d3c	160	this.visible = true;
e33959	161	this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c	162	var msgInfo = {
ec97e0	163	useName: obj.visitorNickName,
I	164	userComment: obj.commentContent,
	165	parentId: obj.parentId == 0 ? obj.id : obj.parentId,
	166	replyId: obj.id
2f9d3c	167	};
f60b31	168	this.$nextTick(() => {
I	169	this.$refs.replyBoxId.getMsgInfo(msgInfo);
	170	});
2f9d3c	171	}
I	172	},
81c155	173	data() {
I	174	return {
ec97e0	175	page: {
I	176	size: "small",
	177	total: 1,
620f75	178	pageSize: 5,
ec97e0	179	current: 1,
I	180	defaultPageSize: 10
	181	},
	182	replyTaget: "",
f60b31	183	visible: false,
620f75	184	commentListData: [],
81c155	185	}
I	186	}
	187	}
	188	</script>
	189
2f9d3c	190	<style lang="less">
b72b2e	191	.myContent img {
I	192	margin-bottom: -0.125rem;
	193	img min-height: 3.5rem;
c14e32	194	height: 2em;
b72b2e	195	}
I	196
0b0125	197	.samllPadding {
I	198	padding: 0px 3px 5px;
	199	}
	200
2f9d3c	201	.visitInfo {
I	202	user-select: none;
	203	}
	204
620f75	205	.myTextDeal {
I	206	// display: -webkit-container;
	207	max-width: 80px;
	208	-webkit-line-clamp: 1;
	209	text-overflow: ellipsis;
	210	overflow: hidden;
	211	word-wrap: break-word;
	212	white-space: nowrap;
	213	word-break: break-all;
	214	}
	215
	216	.loadMore {
	217	margin: 10px;
	218	display: flex;
	219	justify-content: center;
	220	}
	221
	222	.loadMore:hover {
	223	background-color: #00000021
	224	}
	225
e33959	226	.ant-drawer-wrapper-body::-webkit-scrollbar,
I	227	.ant-modal-body::-webkit-scrollbar {
	228	display: none;
620f75	229	}
I	230
	231	.actionList {
	232	display: flex;
	233	justify-content: flex-end;
e33959	234	}
I	235
2f9d3c	236	.commentList {
ec97e0	237	a {
I	238	color: black;
	239	}
2f9d3c	240
I	241	img {
	242	user-select: none;
ec97e0	243	}
I	244
b72b2e	245	.ant-comment-nested {
I	246	margin-left: 20px;
	247	}
	248
ec97e0	249	.ant-comment-avatar {
I	250	cursor: default;
2f9d3c	251	}
I	252
	253	.ant-comment-actions {
620f75	254
I	255	li {
	256	width: -webkit-fill-available;
	257	}
	258
	259	margin-bottom: 0px;
2f9d3c	260	}
I	261
	262	.ant-comment-content-author {
	263	margin-bottom: 0px;
	264	}
	265
	266	.ant-comment-inner {
	267	padding: 10px 10px 0px;
0b0125	268	flex-direction: column;
2f9d3c	269	}
I	270
	271	.commentGroup {
	272	border-top: 1px solid #e5e9ef;
620f75	273	margin-bottom: 5px;
I	274	padding-bottom: 0px;
2f9d3c	275	}
I	276
	277	.ant-comment-content-detail {
0b0125	278	padding-left: 50px;
I	279	padding-top: 5px;
	280
2f9d3c	281	p {
I	282	margin-bottom: 0px;
	283	}
	284	}
	285	}
81c155	286	</style>