blog/blog-facade.git

inleft

2022-03-02 e33959d3ca88b9fae5f6fe1048c8a1f7751e6f21

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>
ec97e0	14	<span slot="actions" key="comment-nested-reply-to">
I	15	<span style="cursor: default;">{{temp.createDate}} </span>
	16	<span @click="replyCall(temp)">
	17	<a-icon type="edit" />
	18	回复
	19	</span>
	20
e33959	21	<span @click="loadMore(temp)" v-if="temp.isHasNext==1">
ec97e0	22	<a-icon type="down" />更多..
I	23	</span>
2f9d3c	24	</span>
I	25
	26	<div slot="avatar">
ec97e0	27	<a :href="temp.userHomePage" target="_blank" class="no-underline">
I	28	{{temp.visitorNickName}} :
	29	</a>
fc0c10	30	</div>
81c155	31
ec97e0	32	<p slot="content">{{temp.commentContent}}</p>
2f9d3c	33
e33959	34	<a-comment v-for="tempData in temp.replyList">
ec97e0	35	<span slot="actions" key="comment-nested-reply-to" @click="replyCall(tempData)">
2f9d3c	36	<a-icon type="edit" />回复
I	37	</span>
	38	<div slot="avatar">
ec97e0	39	<a :href="tempData.userHomePage" target="_blank" class="no-underline">
e33959	40	{{tempData.visitorNickName}}
ec97e0	41	</a>
e33959	42	@
ec97e0	43	<a :href="tempData.replyUserHomePage" target="_blank" class="no-underline">
I	44	{{tempData.replyUserName}} :
	45	</a>
2f9d3c	46	</div>
e33959	47	<p slot="content">{{tempData.commentContent}}</p>
I	48	</a-comment>
2f9d3c	49
e33959	50	<!-- <div class="loadMore" v-if="temp.isHasNext!=1">
I	51	<a-icon type="smile" /><span>到底了..</span>
	52	</div> -->
fc0c10	53	</a-comment>
2f9d3c	54	</div>
I	55	</div>
ec97e0	56
I	57	<a-row type="flex" justify="center">
	58	<div>
	59	<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
	60	:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
	61	</div>
	62	</a-row>
81c155	63	</div>
I	64	</template>
	65
	66
	67	<script>
2f9d3c	68	import replyBox from "./box13-reply.vue"
ec97e0	69
I	70	import {
e33959	71	queryBlogCommentList,
I	72	queryBlogCommentSubList
ec97e0	73	} from '../../api/blogArticleComment.js'
I	74
81c155	75	export default {
2f9d3c	76	components: {
I	77	replyBox
	78	},
ec97e0	79	beforeMount() {
I	80	queryBlogCommentList({
	81	pageNo: this.page.current,
	82	pageSize: this.page.pageSize,
	83	articleId: this.articleId
	84	}).then((res) => {
	85	this.page.total = Number(res.data.total)
	86	this.page.pageSize = Number(res.data.size);
	87	this.commentListData = res.data.records;
	88	return res
	89	})
	90	},
2f9d3c	91	methods: {
ec97e0	92	onChange(current) {
I	93	this.page.current = current;
	94	queryBlogCommentList({
	95	pageNo: this.page.current,
	96	pageSize: this.page.pageSize,
	97	articleId: this.articleId
	98	}).then((res) => {
	99	this.page.total = Number(res.data.total)
	100	this.page.pageSize = Number(res.data.size);
	101	this.commentListData = res.data.records;
	102	})
2f9d3c	103	},
e33959	104	loadMore(temp) {
I	105	temp.isHasNext = 0;
	106
	107	queryBlogCommentSubList({
	108	commentId: temp.id
	109	}).then((res) => {
	110	if (res.data.length == temp.replyList.length) {
	111	this.$message.info("没有更多了..")
	112	}
	113	temp.replyList = res.data;
	114	})
ec97e0	115	},
I	116	replyCall(obj, replyId) {
2f9d3c	117	this.visible = true;
e33959	118	this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c	119	var msgInfo = {
ec97e0	120	useName: obj.visitorNickName,
I	121	userComment: obj.commentContent,
	122	parentId: obj.parentId == 0 ? obj.id : obj.parentId,
	123	replyId: obj.id
2f9d3c	124	};
f60b31	125	this.$nextTick(() => {
I	126	this.$refs.replyBoxId.getMsgInfo(msgInfo);
	127	});
2f9d3c	128	}
I	129	},
81c155	130	data() {
I	131	return {
ec97e0	132	articleId: null,
I	133	page: {
	134	size: "small",
	135	total: 1,
	136	pageSize: 2,
	137	current: 1,
	138	defaultPageSize: 10
	139	},
	140	replyTaget: "",
f60b31	141	visible: false,
ec97e0	142	commentListData: [
I	143	// {
	144	// userName: "bimo",
	145	// userComment: "1+1=2?",
	146	// commentTime: "2022-02-22 22:22:22",
	147	// id: "1",
	148	// parentId: null,
	149	// replyId: null,
	150	// replyUserName: null,
	151	// userHomePage: "",
	152	// replyUserHomePage: "",
	153	// replyList: {
	154	// total: "3",
	155	// current: "1",
	156	// listData: [{
	157	// userName: "inleft",
	158	// userComment: "2",
	159	// commentTime: "2022-02-22 23:22:22",
	160	// id: "2",
	161	// parentId: "1",
	162	// replyId: "1",
	163	// replyUserName: "bimo",
	164	// userHomePage: "",
	165	// replyUserHomePage: "",
	166	// }, {
	167	// userName: "air",
	168	// userComment: "不对是3",
	169	// commentTime: "2022-02-23 13:13:13",
	170	// id: "3",
	171	// parentId: "1",
	172	// replyId: "2",
	173	// replyUserName: "inleft",
	174	// userHomePage: "",
	175	// replyUserHomePage: "",
	176	// }]
	177	// },
	178	// }, {
	179	// userName: "bimo",
	180	// userComment: "1+1=2?",
	181	// commentTime: "2022-02-22 22:22:22",
	182	// id: "1",
	183	// parentId: null,
	184	// replyId: null,
	185	// replyUserName: null,
	186	// userHomePage: "",
	187	// replyUserHomePage: "",
	188	// replyList: {
	189	// total: "3",
	190	// current: "1",
	191	// listData: [{
	192	// userName: "inleft",
	193	// userComment: "2",
	194	// commentTime: "2022-02-22 23:22:22",
	195	// id: "2",
	196	// parentId: "1",
	197	// replyId: "1",
	198	// replyUserName: "bimo",
	199	// userHomePage: "",
	200	// replyUserHomePage: "",
	201	// }, {
	202	// userName: "air",
	203	// userComment: "不对是3",
	204	// commentTime: "2022-02-23 13:13:13",
	205	// id: "3",
	206	// parentId: "1",
	207	// replyId: "2",
	208	// replyUserName: "inleft",
	209	// userHomePage: "",
	210	// replyUserHomePage: "",
	211	// }]
	212	// },
	213	// },
	214	],
2f9d3c	215
81c155	216	}
I	217	}
	218	}
	219	</script>
	220
2f9d3c	221	<style lang="less">
I	222	.visitInfo {
	223	user-select: none;
	224	}
	225
e33959	226	.ant-drawer-wrapper-body::-webkit-scrollbar,
I	227	.ant-modal-body::-webkit-scrollbar {
	228	display: none;
	229	}
	230
2f9d3c	231	.commentList {
ec97e0	232	a {
I	233	color: black;
	234	}
2f9d3c	235
I	236	img {
	237	user-select: none;
ec97e0	238	}
I	239
	240	.ant-comment-avatar {
	241	cursor: default;
2f9d3c	242	}
I	243
	244	.ant-comment-actions {
	245	display: flex;
	246	justify-content: flex-end;
	247	}
	248
	249	.ant-comment-content-author {
	250	margin-bottom: 0px;
	251	}
	252
	253	.ant-comment-inner {
	254	padding: 10px 10px 0px;
	255	}
	256
	257	.commentGroup {
	258	border-top: 1px solid #e5e9ef;
	259	margin-bottom: 10px;
	260	padding-bottom: 15px;
	261	}
	262
	263	.ant-comment-content-detail {
	264	p {
	265	margin-bottom: 0px;
	266	}
	267	}
	268	}
81c155	269	</style>