blog/blog-facade.git

inleft

2022-03-03 0b0125884c449378a2e80f888a43a2d20974c8df

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">
I	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>
ec97e0	49	<!-- <a-checkbox v-model="form.isReceiveMail">
2f9d3c	50	接收邮件回复通知
ec97e0	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	"isReceiveMail": 0,
	100	"articleId": articleId,
	101	"commentType": commentType,
	102	"authStatus": this.form.isSecretMsg ? 2 : 1,
	103	// "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
	104	"visitorEmail": this.form.eMail,
	105	"visitorHomePage": this.form.homePage,
	106	"visitorNickName": this.form.nickName,
	107	"commentContent": this.form.visitorContent,
	108	}).then((res) => {
	109	this.isSending = false;
	110	if (res.code == 200) {
5dfef8	111	this.$emit("sendMsg");
I	112	this.$message.info("信息已送达..")
ec97e0	113	} else {
I	114	this.$notification.error({
	115	message: '好像哪里不对劲..',
	116	description: res.message,
	117	placement: 'bottomRight'
	118	});
	119	}
	120	}).catch((error) => {
	121	this.$message.error("请求失败")
	122	this.isSending = false;
	123	})
	124	// setTimeout(() => {
	125	// this.$message.info("发送成功")
	126	// this.isSending = false;
	127	// }, 3000);
	128
2f9d3c	129	}
I	130	},
ec97e0	131
2f9d3c	132	data() {
I	133	return {
ec97e0	134	isSending: false,
I	135	replyHolder: "",
2f9d3c	136	msgInfo: {
I	137	useName: "",
	138	userComment: "",
ec97e0	139	parentId: 0,
I	140	replyId: 0
2f9d3c	141	},
I	142	showReplyMsgInfo: false,
	143	labelCol: {
	144	span: 6,
	145	offset: 0,
	146	},
	147	wrapperCol: {
	148	span: 15,
	149	offset: 0
	150	},
	151	form: {
ec97e0	152	nickName: "",
I	153	eMail: "",
	154	homePage: "",
	155	isReceiveMail: false,
	156	isSecretMsg: false,
	157	visitorContent: "",
	158	parentId: 0,
	159	replyId: 0
2f9d3c	160	},
ec97e0	161	rules: {
I	162	"nickName": [{
	163	message: '怎么称呼?',
	164	}, {
	165	trigger: 'blur',
	166	max: 20,
	167	message: '你的名字也太长了..'
	168	}],
	169	"eMail": [{
	170	trigger: 'blur',
	171	pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
	172	message: '邮箱格式不正确'
	173	}, {
	174	trigger: 'blur',
	175	max: 50,
	176	message: '邮箱不要超过50字符..'
	177	}],
	178	"homePage": [{
	179	trigger: 'blur',
	180	pattern: /^((https\|http)?:\/\/)[^\s]+/,
	181	message: '仅支持 https \| http'
	182	}, {
	183	trigger: 'blur',
	184	max: 50,
	185	message: '网址不要超过50字符..'
	186	}]
	187	},
2f9d3c	188	}
I	189	}
	190	}
	191	</script>
	192
	193	<style lang="less">
	194	.replyMsgInfo {
ec97e0	195	display: flex;
e33959	196	border-radius: 4px;
ec97e0	197	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	198	padding: 20px 25px 20px;
ec97e0	199	margin-left: 15px;
I	200	margin-top: 10px;
2f9d3c	201	}
I	202	</style>