blog/blog-facade.git

inleft

2022-08-16 f07ea7f9ce1e213addb9df00aec053945e909d3f

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';
f07ea7	75	// import OwO from 'owo/dist/OwO.min.js';
1169d0	76	// import OwO from '/public/OWO.js';
I	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	}
f07ea7	267
I	268	;(() => {
	269	class OwO {
	270	constructor(option) {
	271	const defaultOption = {
	272	container: document.getElementsByClassName('OwO')[0],
	273	target: document.getElementsByTagName('textarea')[0],
	274	position: 'down',
	275	width: '100%',
	276	maxHeight: '250px',
	277	api: 'https://api.anotherhome.net/OwO/OwO.json'
	278	}
	279	for (let defaultKey in defaultOption) {
	280	if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
	281	option[defaultKey] = defaultOption[defaultKey]
	282	}
	283	}
	284	this.container = option.container
	285	this.target = option.target
	286	if (option.position === 'up') {
	287	this.container.classList.add('OwO-up')
	288	}
	289	const xhr = new XMLHttpRequest()
	290	xhr.onreadystatechange = () => {
	291	if (xhr.readyState === 4) {
	292	if ((xhr.status >= 200 && xhr.status < 300) \|\| xhr.status === 304) {
	293	this.odata = JSON.parse(xhr.responseText)
	294	this.init(option)
	295	} else {
	296	console.log('OwO data request was unsuccessful: ' + xhr.status)
	297	}
	298	}
	299	}
	300	xhr.open('get', option.api, true)
	301	xhr.send(null)
	302	}
	303
	304	init(option) {
	305	this.area = option.target
	306	this.packages = Object.keys(this.odata)
	307
	308	// fill in HTML
	309	let html = `
	310	<div class="OwO-logo"><span>OωO</span></div>
	311	<div class="OwO-body" style="width: ${option.width}"><div class="OwO-jio"></div>`
	312
	313	for (let i = 0; i < this.packages.length; i++) {
	314	html += `
	315	<ul class="OwO-items OwO-items-${this.odata[this.packages[i]].type}" style="max-height: ${parseInt(option.maxHeight) - 53 + 'px'};">`
	316	var type = this.odata[this.packages[i]].type
	317	let opackage = this.odata[this.packages[i]].container
	318	for (let i = 0; i < opackage.length; i++) {
	319	if (type == 'image') {
	320	html += `
	321	<li class="OwO-item" data-id="${opackage[i].data}" title="${opackage[i].text}"><img class="biaoqing ${opackage[i].css}" src="${opackage[i].icon}"></li>`
	322	} else {
	323	html += `
	324	<li class="OwO-item" data-id="not-given" title="${opackage[i].text}">${opackage[i].icon}</li>`
	325	}
	326	}
	327
	328	html += `
	329	</ul>`
	330	}
	331
	332	html += `
	333	<div class="OwO-bar">
	334	<ul class="OwO-packages">`
	335
	336	for (let i = 0; i < this.packages.length; i++) {
	337	html += `
	338	<li><span>${this.packages[i]}</span></li>`
	339	}
	340
	341	html += `
	342	</ul>
	343	</div>
	344	</div>
	345	`
	346	this.container.innerHTML = html
	347
	348	// bind event
	349	this.logo = document.getElementsByClassName('OwO-logo')[0]
	350	this.logo.addEventListener('click', e => {
	351	e.stopPropagation()
	352	this.toggle()
	353	})
	354
	355	this.container.getElementsByClassName('OwO-body')[0].addEventListener('click', e => {
	356	let target = null
	357	if (e.target.classList.contains('OwO-item')) {
	358	target = e.target
	359	} else if (e.target.parentNode.classList.contains('OwO-item')) {
	360	target = e.target.parentNode
	361	}
	362	if (target) {
	363	const cursorPos = this.area.selectionEnd
	364	let areaValue = this.area.value
	365	//this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos);
	366	if (target.dataset.id == 'not-given') {
	367	this.area.value = areaValue.slice(0, cursorPos) + target.innerHTML + areaValue.slice(cursorPos)
	368	} else {
	369	this.area.value = areaValue.slice(0, cursorPos) + target.dataset.id + areaValue.slice(cursorPos)
	370	}
	371	this.area.focus()
	372	this.toggle()
	373	}
	374	})
	375	this.packagesEle = this.container.getElementsByClassName('OwO-packages')[0]
	376	for (let i = 0; i < this.packagesEle.children.length; i++) {
	377	;(index => {
	378	this.packagesEle.children[i].addEventListener('click', e => {
	379	e.stopPropagation()
	380	this.tab(index)
	381	})
	382	})(i)
	383	}
	384	this.tab(0)
	385	}
	386
	387	toggle() {
	388	if (this.container.classList.contains('OwO-open')) {
	389	this.container.classList.remove('OwO-open')
	390	} else {
	391	this.container.classList.add('OwO-open')
	392	}
	393	}
	394
	395	tab(index) {
	396	const itemsShow = this.container.getElementsByClassName('OwO-items-show')[0]
	397	if (itemsShow) {
	398	itemsShow.classList.remove('OwO-items-show')
	399	}
	400	this.container.getElementsByClassName('OwO-items')[index].classList.add('OwO-items-show')
	401
	402	const packageActive = this.container.getElementsByClassName('OwO-package-active')[0]
	403	if (packageActive) {
	404	packageActive.classList.remove('OwO-package-active')
	405	}
	406	this.packagesEle.getElementsByTagName('li')[index].classList.add('OwO-package-active')
	407	}
	408	}
	409
	410	if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
	411	module.exports = OwO
	412	} else {
	413	window.OwO = OwO
	414	}
	415	})()
	416
2f9d3c	417	</script>
I	418
	419	<style lang="less">
	420	.replyMsgInfo {
ec97e0	421	display: flex;
1169d0	422	flex-direction: column;
e33959	423	border-radius: 4px;
ec97e0	424	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	425	padding: 20px 25px 20px;
ec97e0	426	margin-left: 15px;
I	427	margin-top: 10px;
2f9d3c	428	}
1169d0	429
I	430	.OwO {
	431	padding: 0px 0px 20px 0px;
	432	}
	433
	434	.OwO .OwO-logo {
	435	height: 30px;
	436	}
	437
	438	.OwO .quyin,
	439	.OwO img {
	440	margin-bottom: -0.125rem;
	441	min-height: 3.5rem;
	442	height: 1em;
	443	}
2f9d3c	444	</style>