blog/blog-facade.git

inleft

2022-03-04 74344a2ec388b78fe906a22c31f8fdb77fc60b12

commit \| author \| age
56a4b8	1	<template>
0b0125	2	<div class="article-meta">
7b98c8	3	<div>
I	4	<a-button @click="back" style="position: absolute;">
	5	<a-icon type="left" />
	6	</a-button>
	7	</div>
	8
28d46d	9	<div class="mySecret" v-if="showMsg && !myLock">
I	10	<h1>怎样才能让你看到我呢</h1>
	11	<h1>只要你要,只要我有...</h1>
	12	<span class="myTip">{{errorMsg}}</span>
7b98c8	13	</div>
28d46d	14
7b98c8	15	<div v-else>
I	16	<div class="mySecret" v-if="myLock">
	17	<h1>越不正经的人越深情..</h1>
	18	<h3>受庇护的文字..输入神秘代码以解除封印</h3>
28d46d	19
I	20	<a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
	21	<a-input-password @pressEnter="pressEnter">
7b98c8	22	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
I	23	</a-input-password>
	24	</a-auto-complete>
28d46d	25	<span class="myTip">{{errorMsg}}</span>
7b98c8	26	</div>
I	27
	28	<div class="markdown-body article-detail" v-else>
	29	<vue-markdown :source="source"></vue-markdown>
	30	</div>
56a4b8	31	</div>
0b0125	32	<div class="articleInfoMiniData">
I	33
	34	<div class="smallOption" @click="articleOptionHandle('like')">
	35	<a-icon type="like" class="samllPadding" />
	36	<span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
	37	</div>
	38	<div>
	39	<a-icon type="read" class="samllPadding" />
	40	<span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
	41	</div>
	42	<div class="smallOption" @click="articleOptionHandle('dislike')">
	43	<a-icon type="dislike" style="margin-top: 2px;" />
	44	</div>
	45	<div>
	46	<!-- <a-icon type="folder-open" class="samllPadding" /> -->
	47	<a-icon type="book" class="samllPadding" />
	48	<span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
	49	</div>
	50	<div>
	51	<a-icon type="calendar" class="samllPadding" />
	52	<span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
	53	</div>
846bd0	54	</div>
0b0125	55	<div class="articleComment">
I	56	<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
	57	</div>
	58
56a4b8	59	</div>
28d46d	60
56a4b8	61	</template>
I	62
	63	<script>
	64	import VueMarkdown from 'vue-markdown'
28d46d	65	import md5 from 'js-md5';
I	66
	67	import {
	68	queryBlogArticleDetail
	69	} from '../../api/blogArticle.js'
846bd0	70	import comment from "../mini/box12-comment.vue"
28d46d	71
I	72	import axios from 'axios'
56a4b8	73
I	74	export default {
	75	components: {
846bd0	76	VueMarkdown,
I	77	comment
56a4b8	78	},
I	79	data() {
	80	return {
0b0125	81	articelMeta: "",
I	82	isAllowedComment: 1,
5dfef8	83	articleId: "",
0b0125	84	source: "",
28d46d	85	showMsg: false,
I	86	myLock: false,
	87	errorMsg: '',
7b98c8	88	secret: '',
I	89	search: {
	90	placeholder: "",
0b0125	91	autoFocus: false,
7b98c8	92	backfill: true,
I	93	value: '',
	94	disabled: false
	95	},
56a4b8	96	}
I	97	},
7b98c8	98	created() {
5dfef8	99	this.articleId = this.$route.query.id;
7b98c8	100	},
I	101	watch: {
	102	'$route'(to, from) {
28d46d	103	if ("mdDetail" === to.name) {
5dfef8	104	this.articleId = this.$route.query.id;
7b98c8	105	}
28d46d	106	},
5dfef8	107	articleId: function(newValue, oldValue) {
28d46d	108	if (newValue == undefined \|\| newValue == null \|\| newValue == "") {
I	109	this.showMsg = true;
	110	this.errorMsg = "日志id参数缺失";
	111	} else {
	112	this.queryDetail();
5dfef8	113	this.$refs.myComment.updateCommentList(this.articleId);
28d46d	114	}
0b0125	115	},
7b98c8	116	},
56a4b8	117	methods: {
0b0125	118	articleOptionHandle(type) {
I	119	this.$message.info(type)
	120	},
28d46d	121	queryDetail() {
4b854c	122	this.showMsg = true;
I	123	this.errorMsg = "加载中..";
28d46d	124	queryBlogArticleDetail({
5dfef8	125	id: this.articleId,
28d46d	126	authWord: this.secret == "" ? null : md5(this.secret)
I	127	}).then((res) => {
	128	this.showMsg = true;
	129	this.myLock = false;
	130	this.errorMsg = res.message;
	131	this.source = "";
	132	if (res.code != 200) {
	133
	134	if (res.code == 1019001) {
	135	//日志需要授权
	136	this.errorMsg = "";
	137	this.myLock = true;
	138	} else if (res.code == 1019002) {
	139	//授权码错误
	140	this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
	141	this.myLock = true;
	142	} else {
	143	this.$notification.error({
	144	message: '好像哪里不对劲..',
	145	description: res.message,
	146	placement: 'bottomRight'
	147	});
	148	}
	149	return
	150	}
0b0125	151	// this.test = res.data.isAllowedComment == 1 ? true : false;
28d46d	152
0b0125	153	this.isAllowedComment = res.data.isAllowedComment;
I	154	this.articelMeta = res.data;
28d46d	155	this.$axios
I	156	.get(res.data.articleFileURL)
	157	.then((res) => {
	158	this.source = res.data;
	159	})
c23efb	160
I	161	//获取日志资源文件
	162	this.showMsg = false;
	163	this.errorMsg = "";
28d46d	164	})
I	165	},
	166	pressEnter() {
7b98c8	167	if (this.secret == "") {
I	168	return
	169	}
	170	this.search.disabled = true
28d46d	171	this.source = "";
7b98c8	172	this.$message
28d46d	173	.loading('卍解..', 1)
7b98c8	174	.then(() => {
28d46d	175	this.queryDetail();
7b98c8	176	this.search.disabled = false;
I	177	})
	178
	179	},
56a4b8	180	back: function() {
I	181	this.$router.go(-1);
	182	}
	183	},
c23efb	184
56a4b8	185	}
I	186	</script>
	187
b505f3	188	<style lang="less">
I	189	@import '../../assets/md.less';
56a4b8	190
0b0125	191
I	192	.smallOption {
	193	transition-function: ease-out;
	194	transition-duration: 200ms;
	195	-webkit-transition-function: ease-out;
	196	-webkit-transition-duration: 200ms;
	197	-moztransition-function: ease-out;
	198	-moztransition-duration: 200ms;
	199	-o-transition-function: ease-out;
	200	-o-transition-duration: 200ms;
	201	}
	202
	203	.smallOption:hover {
	204	transform: scale(1.55, 1.55);
	205	-webkit-transform: scale(1.55, 1.55);
	206	-moz-transform: scale(1.55, 1.55);
	207	-o-transform: scale(1.55, 1.55);
	208	}
	209
	210	.articleInfoMiniData {
	211	user-select: none;
	212	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
	213	padding: 10px 50px;
	214	display: flex;
	215	justify-content: space-between;
	216	flex-wrap: wrap;
	217	}
	218
7b98c8	219	.mySecret {
I	220	height: 715px;
	221	display: flex;
	222	flex-direction: column;
	223	justify-content: center;
	224	padding-left: auto;
	225	align-items: center;
	226	}
	227
846bd0	228
I	229	.markdown-body,
	230	.articleComment {
81c155	231	min-height: 750px;
I	232	padding: 35px 20px 10px 20px;
b505f3	233	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
I	234	-8px -8px 18px #ffffff;
	235	}
56a4b8	236
I	237	/* #test{
	238	padding-left: 25%;
	239	padding-right: 25%;
	240	} */
	241	/* h3 {
	242	margin: 40px 0 0;
	243	}
	244
	245	ul {
	246	list-style-type: none;
	247	padding: 0;
	248	}
	249
	250	li {
	251	display: inline-block;
	252	margin: 0 10px;
	253	}
	254
	255	a {
	256	color: #42b983;
	257	}
	258
	259	*/
	260
	261
	262	/* 自己也可以再调整调整 (贡献一版我们调整的一版样式) */
	263	/* .markdown-body {
	264	padding: 20px;
	265	min-width: 200px;
	266	max-width: 900px;
	267	font-size: 12px;
	268
	269	h2 {
	270	font-size: 18px;
	271	margin: 1em 0 15px;
	272	padding-top: 0.8em;
	273	padding-bottom: 0.8em;
	274	}
	275
	276	h3 {
	277	font-size: 14px;
	278	margin: 22px 0 16px;
	279	}
	280
	281	h4 {
	282	font-size: 13px;
	283	margin: 20px 0 16px;
	284	}
	285
	286	h5 {
	287	font-size: 12px;
	288	margin: 16px 0 16px;
	289	font-weight: 700;
	290	}
	291
	292	p {
	293	font-size: 12px;
	294	line-height: 24px;
	295	color: #666666;
	296	margin-top: 0px;
	297	margin: 8px 0;
	298	margin: 14px 0 14px;
	299	}
	300
	301	pre {
	302	background-color: #eee;
	303	margin-bottom: 8px;
	304	margin-top: 8px;
	305	margin: 12px 0 12px;
	306	}
	307
	308	blockquote {
	309	margin-bottom: 8px;
	310	margin-top: 8px;
	311	margin: 14px 0 14px;
	312	background-color: #eee;
	313	padding: 16px 16px;
	314	}
	315
	316	tr {
	317	background-color: #f5f5f5;
	318	}
	319
	320	code {
	321	background-color: #eee;
	322	}
	323
	324	ul,
	325	ol,
	326	li {
	327	list-style: unset;
	328	font-size: 12px;
	329	line-height: 20px;
	330	color: #666666;
	331	margin-top: 0px;
	332	margin: 8px 0;
	333	}
	334
	335	blockquote {
	336	border-color: #48b6e2;
	337	}
	338
	339	table {
	340	display: table;
	341	width: 100%;
	342	max-width: 100%;
	343	margin-bottom: 20px;
	344	}
	345	} */
	346	</style>