blog/blog-facade.git

inleft

2022-08-25 a23166e4fac771238a90ae5ddc5b1e53a1c7afb8

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