blog/blog-facade.git

inleft

2022-08-12 0dd41bd8cee430d3a948b89c664cb511c400993c

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
e45377	44	<p :id="temp.id" slot="content">{{temp.commentContent}}</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">
0b0125	183	.samllPadding {
I	184	padding: 0px 3px 5px;
	185	}
	186
2f9d3c	187	.visitInfo {
I	188	user-select: none;
	189	}
	190
620f75	191	.myTextDeal {
I	192	// display: -webkit-container;
	193	max-width: 80px;
	194	-webkit-line-clamp: 1;
	195	text-overflow: ellipsis;
	196	overflow: hidden;
	197	word-wrap: break-word;
	198	white-space: nowrap;
	199	word-break: break-all;
	200	}
	201
	202	.loadMore {
	203	margin: 10px;
	204	display: flex;
	205	justify-content: center;
	206	}
	207
	208	.loadMore:hover {
	209	background-color: #00000021
	210	}
	211
e33959	212	.ant-drawer-wrapper-body::-webkit-scrollbar,
I	213	.ant-modal-body::-webkit-scrollbar {
	214	display: none;
620f75	215	}
I	216
	217	.actionList {
	218	display: flex;
	219	justify-content: flex-end;
e33959	220	}
I	221
2f9d3c	222	.commentList {
ec97e0	223	a {
I	224	color: black;
	225	}
2f9d3c	226
I	227	img {
	228	user-select: none;
ec97e0	229	}
I	230
	231	.ant-comment-avatar {
	232	cursor: default;
2f9d3c	233	}
I	234
	235	.ant-comment-actions {
620f75	236
I	237	li {
	238	width: -webkit-fill-available;
	239	}
	240
	241	margin-bottom: 0px;
2f9d3c	242	}
I	243
	244	.ant-comment-content-author {
	245	margin-bottom: 0px;
	246	}
	247
	248	.ant-comment-inner {
	249	padding: 10px 10px 0px;
0b0125	250	flex-direction: column;
2f9d3c	251	}
I	252
	253	.commentGroup {
	254	border-top: 1px solid #e5e9ef;
620f75	255	margin-bottom: 5px;
I	256	padding-bottom: 0px;
2f9d3c	257	}
I	258
	259	.ant-comment-content-detail {
0b0125	260	padding-left: 50px;
I	261	padding-top: 5px;
	262
2f9d3c	263	p {
I	264	margin-bottom: 0px;
	265	}
	266	}
	267	}
81c155	268	</style>