blog/blog-facade.git

inleft

2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f

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