blog/blog-facade.git

inleft

2022-07-14 e45377e8f94faf25a98b9e5a645055b5fade4818

commit \| author \| age
2f9d3c	1	<template>
I	2	<div>
	3	<div class="visitInfo">
ec97e0	4	<a-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol"
I	5	:wrapper-col="wrapperCol">
	6	<a-form-model-item label="昵称" prop="nickName">
	7	<a-input v-model="form.nickName" placeholder="需填..">
2f9d3c	8	</a-input>
I	9	</a-form-model-item>
ec97e0	10	<a-form-model-item label="邮箱" prop="eMail">
e45377	11	<a-input v-model="form.eMail" placeholder="保密项(非必填)">
2f9d3c	12	</a-input>
I	13	</a-form-model-item>
ec97e0	14	<a-form-model-item label="主页" prop="homePage">
I	15	<a-input v-model="form.homePage" placeholder="https:// or http://">
2f9d3c	16	</a-input>
I	17	</a-form-model-item>
	18
	19	</a-form-model>
	20	</div>
	21	<div class="replyMsgInfo" v-if="showReplyMsgInfo">
ec97e0	22	<div>{{msgInfo.useName}} </div>
I	23	<div style="padding: 0px 3px;"> : </div>
	24	<div>
	25	<span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
	26	</div>
2f9d3c	27	</div>
I	28	<a-comment>
	29	<div slot="content">
	30	<a-form-item>
ec97e0	31	<a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
2f9d3c	32	</a-form-item>
I	33	<div>
0b0125	34	<a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
I	35	:disabled="isSending \|\| $attrs.isAllowedComment==0">
	36	高低整两句
	37	</a-button>
	38	<a-button html-type="submit" type="primary" v-else @click="send()"
	39	:disabled="isSending \|\| $attrs.isAllowedComment==0">
	40	回复Ta
	41	</a-button>
	42	<span class="myTip" v-if="$attrs.isAllowedComment==0">很遗憾,评论已关闭</span>
2f9d3c	43	</div>
I	44
	45	<div>
0b0125	46	<a-checkbox style=" margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
ec97e0	47	悄悄说..<span class="myTip">(仅登录后可查看)</span>
2f9d3c	48	</a-checkbox>
e45377	49	<a-checkbox v-model="form.isReceiveMail">
2f9d3c	50	接收邮件回复通知
e45377	51	</a-checkbox>
2f9d3c	52	</div>
I	53	</div>
	54	</a-comment>
	55	</div>
	56	</template>
	57
	58	<script>
ec97e0	59	import {
I	60	blogCommentAdd
	61	} from '../../api/blogArticleComment.js'
	62
2f9d3c	63	export default {
I	64	methods: {
	65	getMsgInfo(param) {
	66	this.msgInfo = param;
	67	this.showReplyMsgInfo = true;
ec97e0	68	this.replyHolder = "@" + this.msgInfo.useName;
I	69	},
846bd0	70	send() {
ec97e0	71	if (this.form.nickName === "") {
I	72	this.$message.info("怎么称呼..")
	73	return
	74	}
	75
	76	if (this.form.visitorContent === "") {
	77	this.$message.info("你可能需要说点什么..")
	78	return
	79	}
	80
	81	var res;
	82	this.$refs.myForm.validate(valid => {
	83	if (valid) {
	84	//this.$message.info("校验通过")
	85	res = true;
	86	} else {
	87	this.$message.info("校验失败")
	88	res = false;
	89	}
	90	});
0b0125	91	var articleId = this.$attrs.articleId;
ec97e0	92	let commentType = (articleId == null \|\| articleId == undefined) ? 1 : 2;
I	93	this.isSending = true;
	94
	95	blogCommentAdd({
	96	parentId: this.msgInfo.parentId,
	97	replyId: this.msgInfo.replyId,
	98	"visitorId": "1",
	99	"articleId": articleId,
	100	"commentType": commentType,
	101	"authStatus": this.form.isSecretMsg ? 2 : 1,
e45377	102	"isReceiveMail": this.form.isReceiveMail ? 1 : 0,
ec97e0	103	"visitorEmail": this.form.eMail,
I	104	"visitorHomePage": this.form.homePage,
	105	"visitorNickName": this.form.nickName,
	106	"commentContent": this.form.visitorContent,
	107	}).then((res) => {
	108	this.isSending = false;
	109	if (res.code == 200) {
5dfef8	110	this.$emit("sendMsg");
I	111	this.$message.info("信息已送达..")
ec97e0	112	} else {
I	113	this.$notification.error({
	114	message: '好像哪里不对劲..',
	115	description: res.message,
	116	placement: 'bottomRight'
	117	});
	118	}
	119	}).catch((error) => {
	120	this.$message.error("请求失败")
	121	this.isSending = false;
	122	})
	123	// setTimeout(() => {
	124	// this.$message.info("发送成功")
	125	// this.isSending = false;
	126	// }, 3000);
	127
2f9d3c	128	}
I	129	},
ec97e0	130
2f9d3c	131	data() {
I	132	return {
ec97e0	133	isSending: false,
I	134	replyHolder: "",
2f9d3c	135	msgInfo: {
I	136	useName: "",
	137	userComment: "",
ec97e0	138	parentId: 0,
I	139	replyId: 0
2f9d3c	140	},
I	141	showReplyMsgInfo: false,
	142	labelCol: {
	143	span: 6,
	144	offset: 0,
	145	},
	146	wrapperCol: {
	147	span: 15,
	148	offset: 0
	149	},
	150	form: {
ec97e0	151	nickName: "",
I	152	eMail: "",
	153	homePage: "",
	154	isReceiveMail: false,
	155	isSecretMsg: false,
	156	visitorContent: "",
	157	parentId: 0,
	158	replyId: 0
2f9d3c	159	},
ec97e0	160	rules: {
I	161	"nickName": [{
	162	message: '怎么称呼?',
	163	}, {
	164	trigger: 'blur',
	165	max: 20,
	166	message: '你的名字也太长了..'
	167	}],
	168	"eMail": [{
	169	trigger: 'blur',
	170	pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
e45377	171	message: '你这邮箱有问题??'
ec97e0	172	}, {
I	173	trigger: 'blur',
	174	max: 50,
	175	message: '邮箱不要超过50字符..'
	176	}],
	177	"homePage": [{
	178	trigger: 'blur',
	179	pattern: /^((https\|http)?:\/\/)[^\s]+/,
	180	message: '仅支持 https \| http'
	181	}, {
	182	trigger: 'blur',
	183	max: 50,
	184	message: '网址不要超过50字符..'
	185	}]
	186	},
2f9d3c	187	}
I	188	}
	189	}
	190	</script>
	191
	192	<style lang="less">
	193	.replyMsgInfo {
ec97e0	194	display: flex;
e33959	195	border-radius: 4px;
ec97e0	196	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	197	padding: 20px 25px 20px;
ec97e0	198	margin-left: 15px;
I	199	margin-top: 10px;
2f9d3c	200	}
I	201	</style>