blog/blog-facade.git

inleft

2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f

commit \| author \| age
81c155	1	<template>
846bd0	2	<div>
I	3	<replyBox ref="commentBoxId" v-bind="$attrs"></replyBox>
ec97e0	4	<a-modal v-model="visible" :title="replyTaget" :footer="null"
e33959	5	:bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
846bd0	6	<replyBox ref="replyBoxId" v-bind="$attrs"></replyBox>
2f9d3c	7	</a-modal>
846bd0	8	<div class="mySecret" v-if="commentListData.length==0">
I	9	<p>空空如也..</p>
	10	</div>
2f9d3c	11	<div v-for="temp in commentListData" class="commentList">
81c155	12
2f9d3c	13	<div class="commentGroup">
I	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>
	33	<div>:</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>
	57	<div>:</div>
	58	</div>
	59
	60	<div slot="content" class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
	61	@<a :href="tempData.replyUserHomePage" target="_blank"
	62	v-if="tempData.replyUserHomePage!=''">
	63	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
	64	{{tempData.replyUserName}}
	65	</a-tooltip>
ec97e0	66	</a>
620f75	67	<a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
I	68	{{tempData.replyUserName}}
	69	</a-tooltip>
2f9d3c	70	</div>
e33959	71	<p slot="content">{{tempData.commentContent}}</p>
I	72	</a-comment>
fc0c10	73	</a-comment>
620f75	74
I	75	<div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
	76	<span>
	77	<a-icon type="down" />展开
	78	</span>
	79	</div>
2f9d3c	80	</div>
I	81	</div>
ec97e0	82
I	83	<a-row type="flex" justify="center">
	84	<div>
	85	<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
	86	:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
	87	</div>
	88	</a-row>
81c155	89	</div>
I	90	</template>
	91
	92
	93	<script>
2f9d3c	94	import replyBox from "./box13-reply.vue"
ec97e0	95
I	96	import {
e33959	97	queryBlogCommentList,
I	98	queryBlogCommentSubList
ec97e0	99	} from '../../api/blogArticleComment.js'
I	100
81c155	101	export default {
846bd0	102	props: ["articleId"],
2f9d3c	103	components: {
I	104	replyBox
	105	},
ec97e0	106	beforeMount() {
I	107	queryBlogCommentList({
	108	pageNo: this.page.current,
	109	pageSize: this.page.pageSize,
846bd0	110	articleId: this.$attrs.acticleId
ec97e0	111	}).then((res) => {
I	112	this.page.total = Number(res.data.total)
	113	this.page.pageSize = Number(res.data.size);
	114	this.commentListData = res.data.records;
	115	return res
	116	})
	117	},
2f9d3c	118	methods: {
ec97e0	119	onChange(current) {
I	120	this.page.current = current;
	121	queryBlogCommentList({
	122	pageNo: this.page.current,
	123	pageSize: this.page.pageSize,
846bd0	124	articleId: this.$attrs.articleId
ec97e0	125	}).then((res) => {
I	126	this.page.total = Number(res.data.total)
	127	this.page.pageSize = Number(res.data.size);
	128	this.commentListData = res.data.records;
	129	})
2f9d3c	130	},
e33959	131	loadMore(temp) {
I	132	temp.isHasNext = 0;
	133
	134	queryBlogCommentSubList({
	135	commentId: temp.id
	136	}).then((res) => {
	137	if (res.data.length == temp.replyList.length) {
	138	this.$message.info("没有更多了..")
	139	}
	140	temp.replyList = res.data;
	141	})
ec97e0	142	},
I	143	replyCall(obj, replyId) {
2f9d3c	144	this.visible = true;
e33959	145	this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c	146	var msgInfo = {
ec97e0	147	useName: obj.visitorNickName,
I	148	userComment: obj.commentContent,
	149	parentId: obj.parentId == 0 ? obj.id : obj.parentId,
	150	replyId: obj.id
2f9d3c	151	};
f60b31	152	this.$nextTick(() => {
I	153	this.$refs.replyBoxId.getMsgInfo(msgInfo);
	154	});
2f9d3c	155	}
I	156	},
81c155	157	data() {
I	158	return {
846bd0	159	// articleId: null,
620f75	160	isAllowedComment: true,
ec97e0	161	page: {
I	162	size: "small",
	163	total: 1,
620f75	164	pageSize: 5,
ec97e0	165	current: 1,
I	166	defaultPageSize: 10
	167	},
	168	replyTaget: "",
f60b31	169	visible: false,
620f75	170	commentListData: [],
2f9d3c	171
81c155	172	}
I	173	}
	174	}
	175	</script>
	176
2f9d3c	177	<style lang="less">
I	178	.visitInfo {
	179	user-select: none;
	180	}
	181
620f75	182	.myTextDeal {
I	183	// display: -webkit-container;
	184	max-width: 80px;
	185	-webkit-line-clamp: 1;
	186	text-overflow: ellipsis;
	187	overflow: hidden;
	188	word-wrap: break-word;
	189	white-space: nowrap;
	190	word-break: break-all;
	191	}
	192
	193	.loadMore {
	194	margin: 10px;
	195	display: flex;
	196	justify-content: center;
	197	}
	198
	199	.loadMore:hover {
	200	background-color: #00000021
	201	}
	202
e33959	203	.ant-drawer-wrapper-body::-webkit-scrollbar,
I	204	.ant-modal-body::-webkit-scrollbar {
	205	display: none;
620f75	206	}
I	207
	208	.actionList {
	209	display: flex;
	210	justify-content: flex-end;
e33959	211	}
I	212
2f9d3c	213	.commentList {
ec97e0	214	a {
I	215	color: black;
	216	}
2f9d3c	217
I	218	img {
	219	user-select: none;
ec97e0	220	}
I	221
	222	.ant-comment-avatar {
	223	cursor: default;
2f9d3c	224	}
I	225
	226	.ant-comment-actions {
620f75	227
I	228	li {
	229	width: -webkit-fill-available;
	230	}
	231
	232	margin-bottom: 0px;
2f9d3c	233	}
I	234
	235	.ant-comment-content-author {
	236	margin-bottom: 0px;
	237	}
	238
	239	.ant-comment-inner {
	240	padding: 10px 10px 0px;
	241	}
	242
	243	.commentGroup {
	244	border-top: 1px solid #e5e9ef;
620f75	245	margin-bottom: 5px;
I	246	padding-bottom: 0px;
2f9d3c	247	}
I	248
	249	.ant-comment-content-detail {
	250	p {
	251	margin-bottom: 0px;
	252	}
	253	}
	254	}
81c155	255	</style>