blog/blog-facade.git

inleft

2022-08-11 af029bdfb645bd2b75fbab687c1a5f45b428d801

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