blog/blog-facade.git

inleft

2022-08-30 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb

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