blog/blog-facade.git

inleft

2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f

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">
I	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>
	18
	19	</a-form-model>
	20	</div>
	21	<div class="replyMsgInfo" v-if="showReplyMsgInfo">
ec97e0	22	<div>{{msgInfo.useName}} </div>
I	23	<div style="padding: 0px 3px;"> : </div>
	24	<div>
	25	<span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
	26	</div>
2f9d3c	27	</div>
I	28	<a-comment>
	29	<div slot="content">
	30	<a-form-item>
ec97e0	31	<a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
2f9d3c	32	</a-form-item>
I	33	<div>
ec97e0	34	<a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo" @click="send()"
I	35	:disabled="isSending">
2f9d3c	36	高低整两句
I	37	</a-button>
ec97e0	38	<a-button html-type="submit" type="primary" v-else @click="send()" :disabled="isSending">
2f9d3c	39	回复Ta
I	40	</a-button>
	41	</div>
	42
	43	<div>
ec97e0	44	<a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
I	45	悄悄说..<span class="myTip">(仅登录后可查看)</span>
2f9d3c	46	</a-checkbox>
ec97e0	47	<!-- <a-checkbox v-model="form.isReceiveMail">
2f9d3c	48	接收邮件回复通知
ec97e0	49	</a-checkbox> -->
2f9d3c	50	</div>
I	51	</div>
	52	</a-comment>
	53	</div>
	54	</template>
	55
	56	<script>
ec97e0	57	import {
I	58	blogCommentAdd
	59	} from '../../api/blogArticleComment.js'
	60
2f9d3c	61	export default {
846bd0	62	props: ["articleId"],
2f9d3c	63	methods: {
I	64	getMsgInfo(param) {
	65	this.msgInfo = param;
	66	this.showReplyMsgInfo = true;
ec97e0	67	this.replyHolder = "@" + this.msgInfo.useName;
I	68	},
846bd0	69	send() {
ec97e0	70	console.log(this.msgInfo);
I	71	if (this.form.nickName === "") {
	72	this.$message.info("怎么称呼..")
	73	return
	74	}
	75
	76	if (this.form.visitorContent === "") {
	77	this.$message.info("你可能需要说点什么..")
	78	return
	79	}
	80
	81	var res;
	82	this.$refs.myForm.validate(valid => {
	83	if (valid) {
	84	//this.$message.info("校验通过")
	85	res = true;
	86	} else {
	87	this.$message.info("校验失败")
	88	res = false;
	89	}
	90	});
846bd0	91	var articleId=this.$attrs.acticleId;
I	92	console.log(articleId);
ec97e0	93
I	94	let commentType = (articleId == null \|\| articleId == undefined) ? 1 : 2;
	95	this.isSending = true;
	96
	97	blogCommentAdd({
	98	parentId: this.msgInfo.parentId,
	99	replyId: this.msgInfo.replyId,
	100	"visitorId": "1",
	101	"isReceiveMail": 0,
	102	"articleId": articleId,
	103	"commentType": commentType,
	104	"authStatus": this.form.isSecretMsg ? 2 : 1,
	105	// "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
	106	"visitorEmail": this.form.eMail,
	107	"visitorHomePage": this.form.homePage,
	108	"visitorNickName": this.form.nickName,
	109	"commentContent": this.form.visitorContent,
	110	}).then((res) => {
	111	this.isSending = false;
	112	if (res.code == 200) {
	113	this.$message.info("已送达,审核通过后显示..")
	114	} else {
	115	this.$notification.error({
	116	message: '好像哪里不对劲..',
	117	description: res.message,
	118	placement: 'bottomRight'
	119	});
	120	}
	121	}).catch((error) => {
	122	this.$message.error("请求失败")
	123	this.isSending = false;
	124	})
	125	// setTimeout(() => {
	126	// this.$message.info("发送成功")
	127	// this.isSending = false;
	128	// }, 3000);
	129
2f9d3c	130	}
I	131	},
ec97e0	132
2f9d3c	133	data() {
I	134	return {
ec97e0	135	isSending: false,
I	136	replyHolder: "",
2f9d3c	137	msgInfo: {
I	138	useName: "",
	139	userComment: "",
ec97e0	140	parentId: 0,
I	141	replyId: 0
2f9d3c	142	},
I	143	showReplyMsgInfo: false,
	144	labelCol: {
	145	span: 6,
	146	offset: 0,
	147	},
	148	wrapperCol: {
	149	span: 15,
	150	offset: 0
	151	},
	152	form: {
ec97e0	153	nickName: "",
I	154	eMail: "",
	155	homePage: "",
	156	isReceiveMail: false,
	157	isSecretMsg: false,
	158	visitorContent: "",
	159	parentId: 0,
	160	replyId: 0
2f9d3c	161	},
ec97e0	162	rules: {
I	163	"nickName": [{
	164	message: '怎么称呼?',
	165	}, {
	166	trigger: 'blur',
	167	max: 20,
	168	message: '你的名字也太长了..'
	169	}],
	170	"eMail": [{
	171	trigger: 'blur',
	172	pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
	173	message: '邮箱格式不正确'
	174	}, {
	175	trigger: 'blur',
	176	max: 50,
	177	message: '邮箱不要超过50字符..'
	178	}],
	179	"homePage": [{
	180	trigger: 'blur',
	181	pattern: /^((https\|http)?:\/\/)[^\s]+/,
	182	message: '仅支持 https \| http'
	183	}, {
	184	trigger: 'blur',
	185	max: 50,
	186	message: '网址不要超过50字符..'
	187	}]
	188	},
2f9d3c	189	}
I	190	}
	191	}
	192	</script>
	193
	194	<style lang="less">
	195	.replyMsgInfo {
ec97e0	196	display: flex;
e33959	197	border-radius: 4px;
ec97e0	198	box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959	199	padding: 20px 25px 20px;
ec97e0	200	margin-left: 15px;
I	201	margin-top: 10px;
2f9d3c	202	}
I	203	</style>