blog/blog-facade.git

inleft

2022-08-15 1169d092f3c0976a9af3dc79c3feb8057da17146

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