blog/blog-facade.git

inleft

2022-08-16 c14e3278893b9dd1022aa488cee53a888c2a4c7e

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>
I	34	<a-comment>
	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: {
c14e32	83	// getTargetArea() {
I	84	// return this.$refs.targetArea;
	85	// },
2f9d3c	86	getMsgInfo(param) {
I	87	this.msgInfo = param;
	88	this.showReplyMsgInfo = true;
ec97e0	89	this.replyHolder = "@" + this.msgInfo.useName;
I	90	},
846bd0	91	send() {
ec97e0	92	if (this.form.nickName === "") {
I	93	this.$message.info("怎么称呼..")
	94	return
	95	}
	96
	97	if (this.form.visitorContent === "") {
	98	this.$message.info("你可能需要说点什么..")
	99	return
	100	}
	101
cb7779	102	if (this.form.isReceiveMail && this.form.eMail == "") {
I	103	this.$message.info("如果是想接收通知的话,你可能需要填上一个邮箱..")
	104	return
	105	}
	106
ec97e0	107	var res;
I	108	this.$refs.myForm.validate(valid => {
	109	if (valid) {
	110	//this.$message.info("校验通过")
	111	res = true;
	112	} else {
	113	this.$message.info("校验失败")
	114	res = false;
	115	}
	116	});
cb7779	117
I	118	if (this.form.nickName == 'inleft' \|\| this.form.nickName == '笔墨' \|\| this.form.nickName == '阿墨') {
	119	if (this.form.authCode == null \|\| this.form.authCode == "") {
c14e32	120	this.$message.info("此名称在这里使用需要正确的授权码..")
cb7779	121	return
I	122	}
	123	}
	124
	125
0b0125	126	var articleId = this.$attrs.articleId;
ec97e0	127	let commentType = (articleId == null \|\| articleId == undefined) ? 1 : 2;
I	128
cb7779	129	//记录最新访客信息
I	130	if (this.form.visitorId == 1) {
	131	var today = new Date();
	132	var year = today.getFullYear() + "";
	133	var month = today.getMonth() + 1 + "";
	134	var date = today.getDate() + "";
	135	var num = "";
	136	for (var i = 0; i < 4; i++) {
	137	num = num + Math.floor(Math.random() * 9) + "";
	138	}
	139	this.form.visitorId = year + (month > 10 ? month : '0' + month) + date + num
	140	}
	141
c14e32	142	localStorage.setItem(this.VisitorDataKey, JSON.stringify(this.form))
cb7779	143
I	144	this.isSending = true;
ec97e0	145	blogCommentAdd({
I	146	parentId: this.msgInfo.parentId,
	147	replyId: this.msgInfo.replyId,
cb7779	148	"visitorId": this.form.visitorId,
ec97e0	149	"articleId": articleId,
I	150	"commentType": commentType,
	151	"authStatus": this.form.isSecretMsg ? 2 : 1,
e45377	152	"isReceiveMail": this.form.isReceiveMail ? 1 : 0,
ec97e0	153	"visitorEmail": this.form.eMail,
I	154	"visitorHomePage": this.form.homePage,
	155	"visitorNickName": this.form.nickName,
	156	"commentContent": this.form.visitorContent,
cb7779	157	"authCode": this.form.authCode != null && this.form.authCode != "" ? md5(this.form.authCode) :
I	158	''
ec97e0	159	}).then((res) => {
I	160	this.isSending = false;
	161	if (res.code == 200) {
5dfef8	162	this.$emit("sendMsg");
I	163	this.$message.info("信息已送达..")
ec97e0	164	} else {
I	165	this.$notification.error({
	166	message: '好像哪里不对劲..',
	167	description: res.message,
	168	placement: 'bottomRight'
	169	});
	170	}
	171	}).catch((error) => {
	172	this.$message.error("请求失败")
	173	this.isSending = false;
	174	})
	175	// setTimeout(() => {
	176	// this.$message.info("发送成功")
	177	// this.isSending = false;
	178	// }, 3000);
	179
2f9d3c	180	}
I	181	},
ec97e0	182
2f9d3c	183	data() {
c14e32	184	let tempVisitorData = localStorage.getItem(this.VisitorDataKey);
cb7779	185	let vistorData = {
I	186	nickName: "",
	187	eMail: "",
	188	homePage: "",
af029b	189	isReceiveMail: false,
cb7779	190	isSecretMsg: false,
I	191	visitorContent: "",
	192	parentId: 0,
	193	replyId: 0,
	194	visitorId: 1,
	195	authCode: ''
	196	};
	197
	198	if (tempVisitorData != null && tempVisitorData != undefined) {
	199	tempVisitorData = JSON.parse(tempVisitorData);
	200	vistorData.nickName = tempVisitorData.nickName;
	201	vistorData.eMail = tempVisitorData.eMail;
	202	vistorData.homePage = tempVisitorData.homePage;
	203	vistorData.isReceiveMail = tempVisitorData.isReceiveMail;
	204	vistorData.isSecretMsg = tempVisitorData.isSecretMsg;
	205	vistorData.visitorId = tempVisitorData.visitorId;
	206	vistorData.authCode = tempVisitorData.authCode;
	207	}
	208
2f9d3c	209	return {
c14e32	210	VisitorDataKey: myConstant.VisitorDataKey,
ec97e0	211	isSending: false,
I	212	replyHolder: "",
2f9d3c	213	msgInfo: {
I	214	useName: "",
	215	userComment: "",
ec97e0	216	parentId: 0,
I	217	replyId: 0
2f9d3c	218	},
I	219	showReplyMsgInfo: false,
	220	labelCol: {
	221	span: 6,
	222	offset: 0,
	223	},
	224	wrapperCol: {
	225	span: 15,
	226	offset: 0
	227	},
cb7779	228	form: vistorData,
ec97e0	229	rules: {
I	230	"nickName": [{
	231	message: '怎么称呼?',
	232	}, {
	233	trigger: 'blur',
	234	max: 20,
	235	message: '你的名字也太长了..'
	236	}],
	237	"eMail": [{
	238	trigger: 'blur',
	239	pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
e45377	240	message: '你这邮箱有问题??'
ec97e0	241	}, {
I	242	trigger: 'blur',
	243	max: 50,
	244	message: '邮箱不要超过50字符..'
	245	}],
	246	"homePage": [{
	247	trigger: 'blur',
1cf6d9	248	pattern: /^((https\|http)?:\/\/)+/,
I	249	message: '仅支持 https:// \| http://'
ec97e0	250	}, {
I	251	trigger: 'blur',
	252	max: 50,
	253	message: '网址不要超过50字符..'
	254	}]
	255	},
2f9d3c	256	}
I	257	}
	258	}
	259	</script>
	260
	261	<style lang="less">
c14e32	262	.replyMsgInfo img {
I	263	margin-bottom: -0.125rem;
	264	img min-height: 3.5rem;
	265	height: 2em;
	266	}
	267
2f9d3c	268	.replyMsgInfo {
ec97e0	269	display: flex;
1169d0	270	flex-direction: column;
e33959	271	border-radius: 4px;
ec97e0	272	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	273	padding: 20px 25px 20px;
ec97e0	274	margin-left: 15px;
I	275	margin-top: 10px;
2f9d3c	276	}
1169d0	277
I	278	.OwO {
	279	padding: 0px 0px 20px 0px;
	280	}
	281
	282	.OwO .OwO-logo {
	283	height: 30px;
	284	}
	285
	286	.OwO .quyin,
	287	.OwO img {
	288	margin-bottom: -0.125rem;
	289	min-height: 3.5rem;
	290	height: 1em;
	291	}
2f9d3c	292	</style>