blog/blog-facade.git

inleft

2022-08-22 6461f5659505768e7a90594c3aab47f90d9ee213

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