blog/blog-facade.git

inleft

2022-08-02 944ca64b2650470a2b0616c43f83e6e88123a7b2

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">
cb7779	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>
3a5d66	18	<a-form-model-item label="认证"
cb7779	19	v-show="form.nickName=='inleft'\|\|form.nickName=='笔墨'\|\|form.nickName=='阿墨'">
I	20	<a-input-password v-model="form.authCode" autocomplete='new-password' type="password"
	21	placeholder="我的授权码">
3a5d66	22	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
cb7779	23	</a-input-password>
I	24	</a-form-model-item>
2f9d3c	25	</a-form-model>
I	26	</div>
	27	<div class="replyMsgInfo" v-if="showReplyMsgInfo">
ec97e0	28	<div>{{msgInfo.useName}} </div>
I	29	<div style="padding: 0px 3px;"> : </div>
	30	<div>
	31	<span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
	32	</div>
2f9d3c	33	</div>
I	34	<a-comment>
	35	<div slot="content">
	36	<a-form-item>
ec97e0	37	<a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
2f9d3c	38	</a-form-item>
I	39	<div>
cb7779	40	<a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
I	41	:disabled="isSending \|\| $attrs.isAllowedComment==0">
	42	高低整两句
	43	</a-button>
	44	<a-button html-type="submit" type="primary" v-else @click="send()"
	45	:disabled="isSending \|\| $attrs.isAllowedComment==0">
	46	回复Ta
	47	</a-button>
	48	<span class="myTip" v-if="$attrs.isAllowedComment==0">很遗憾,评论已关闭</span>
2f9d3c	49	</div>
I	50
	51	<div>
e45377	52	<a-checkbox v-model="form.isReceiveMail">
2f9d3c	53	接收邮件回复通知
cb7779	54	</a-checkbox>
I	55	<a-checkbox style=" margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
	56	悄悄说..<span class="myTip">(仅登录后可查看)</span>
e45377	57	</a-checkbox>
2f9d3c	58	</div>
I	59	</div>
	60	</a-comment>
	61	</div>
	62	</template>
	63
	64	<script>
ec97e0	65	import {
I	66	blogCommentAdd
	67	} from '../../api/blogArticleComment.js'
cb7779	68	import md5 from 'js-md5';
I	69
	70	const VisitorDataKey = "visitorData.inleft.com"
ec97e0	71
2f9d3c	72	export default {
I	73	methods: {
	74	getMsgInfo(param) {
	75	this.msgInfo = param;
	76	this.showReplyMsgInfo = true;
ec97e0	77	this.replyHolder = "@" + this.msgInfo.useName;
I	78	},
846bd0	79	send() {
ec97e0	80	if (this.form.nickName === "") {
I	81	this.$message.info("怎么称呼..")
	82	return
	83	}
	84
	85	if (this.form.visitorContent === "") {
	86	this.$message.info("你可能需要说点什么..")
	87	return
	88	}
	89
cb7779	90	if (this.form.isReceiveMail && this.form.eMail == "") {
I	91	this.$message.info("如果是想接收通知的话,你可能需要填上一个邮箱..")
	92	return
	93	}
	94
ec97e0	95	var res;
I	96	this.$refs.myForm.validate(valid => {
	97	if (valid) {
	98	//this.$message.info("校验通过")
	99	res = true;
	100	} else {
	101	this.$message.info("校验失败")
	102	res = false;
	103	}
	104	});
cb7779	105
I	106	if (this.form.nickName == 'inleft' \|\| this.form.nickName == '笔墨' \|\| this.form.nickName == '阿墨') {
	107	if (this.form.authCode == null \|\| this.form.authCode == "") {
	108	this.$message.info("不要成为我,你就是真的自己..")
	109	return
	110	}
	111	}
	112
	113
0b0125	114	var articleId = this.$attrs.articleId;
ec97e0	115	let commentType = (articleId == null \|\| articleId == undefined) ? 1 : 2;
I	116
cb7779	117	//记录最新访客信息
I	118	if (this.form.visitorId == 1) {
	119	var today = new Date();
	120	var year = today.getFullYear() + "";
	121	var month = today.getMonth() + 1 + "";
	122	var date = today.getDate() + "";
	123	var num = "";
	124	for (var i = 0; i < 4; i++) {
	125	num = num + Math.floor(Math.random() * 9) + "";
	126	}
	127	this.form.visitorId = year + (month > 10 ? month : '0' + month) + date + num
	128	}
	129
	130	localStorage.setItem(VisitorDataKey, JSON.stringify(this.form))
	131
	132	this.isSending = true;
ec97e0	133	blogCommentAdd({
I	134	parentId: this.msgInfo.parentId,
	135	replyId: this.msgInfo.replyId,
cb7779	136	"visitorId": this.form.visitorId,
ec97e0	137	"articleId": articleId,
I	138	"commentType": commentType,
	139	"authStatus": this.form.isSecretMsg ? 2 : 1,
e45377	140	"isReceiveMail": this.form.isReceiveMail ? 1 : 0,
ec97e0	141	"visitorEmail": this.form.eMail,
I	142	"visitorHomePage": this.form.homePage,
	143	"visitorNickName": this.form.nickName,
	144	"commentContent": this.form.visitorContent,
cb7779	145	"authCode": this.form.authCode != null && this.form.authCode != "" ? md5(this.form.authCode) :
I	146	''
ec97e0	147	}).then((res) => {
I	148	this.isSending = false;
	149	if (res.code == 200) {
5dfef8	150	this.$emit("sendMsg");
I	151	this.$message.info("信息已送达..")
ec97e0	152	} else {
I	153	this.$notification.error({
	154	message: '好像哪里不对劲..',
	155	description: res.message,
	156	placement: 'bottomRight'
	157	});
	158	}
	159	}).catch((error) => {
	160	this.$message.error("请求失败")
	161	this.isSending = false;
	162	})
	163	// setTimeout(() => {
	164	// this.$message.info("发送成功")
	165	// this.isSending = false;
	166	// }, 3000);
	167
2f9d3c	168	}
I	169	},
ec97e0	170
2f9d3c	171	data() {
cb7779	172	let tempVisitorData = localStorage.getItem(VisitorDataKey);
I	173	let vistorData = {
	174	nickName: "",
	175	eMail: "",
	176	homePage: "",
	177	isReceiveMail: true,
	178	isSecretMsg: false,
	179	visitorContent: "",
	180	parentId: 0,
	181	replyId: 0,
	182	visitorId: 1,
	183	authCode: ''
	184	};
	185
	186	if (tempVisitorData != null && tempVisitorData != undefined) {
	187	tempVisitorData = JSON.parse(tempVisitorData);
	188	vistorData.nickName = tempVisitorData.nickName;
	189	vistorData.eMail = tempVisitorData.eMail;
	190	vistorData.homePage = tempVisitorData.homePage;
	191	vistorData.isReceiveMail = tempVisitorData.isReceiveMail;
	192	vistorData.isSecretMsg = tempVisitorData.isSecretMsg;
	193	vistorData.visitorId = tempVisitorData.visitorId;
	194	vistorData.authCode = tempVisitorData.authCode;
	195	}
	196
2f9d3c	197	return {
ec97e0	198	isSending: false,
I	199	replyHolder: "",
2f9d3c	200	msgInfo: {
I	201	useName: "",
	202	userComment: "",
ec97e0	203	parentId: 0,
I	204	replyId: 0
2f9d3c	205	},
I	206	showReplyMsgInfo: false,
	207	labelCol: {
	208	span: 6,
	209	offset: 0,
	210	},
	211	wrapperCol: {
	212	span: 15,
	213	offset: 0
	214	},
cb7779	215	form: vistorData,
ec97e0	216	rules: {
I	217	"nickName": [{
	218	message: '怎么称呼?',
	219	}, {
	220	trigger: 'blur',
	221	max: 20,
	222	message: '你的名字也太长了..'
	223	}],
	224	"eMail": [{
	225	trigger: 'blur',
	226	pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
e45377	227	message: '你这邮箱有问题??'
ec97e0	228	}, {
I	229	trigger: 'blur',
	230	max: 50,
	231	message: '邮箱不要超过50字符..'
	232	}],
	233	"homePage": [{
	234	trigger: 'blur',
	235	pattern: /^((https\|http)?:\/\/)[^\s]+/,
	236	message: '仅支持 https \| http'
	237	}, {
	238	trigger: 'blur',
	239	max: 50,
	240	message: '网址不要超过50字符..'
	241	}]
	242	},
2f9d3c	243	}
I	244	}
	245	}
	246	</script>
	247
	248	<style lang="less">
	249	.replyMsgInfo {
ec97e0	250	display: flex;
e33959	251	border-radius: 4px;
ec97e0	252	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	253	padding: 20px 25px 20px;
ec97e0	254	margin-left: 15px;
I	255	margin-top: 10px;
2f9d3c	256	}
I	257	</style>