blog/blog-facade.git

inleft

2022-03-02 620f759cfe9fa42fa9667b2ec63d7d00944e4af0

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