blog/blog-facade.git

inleft

2022-08-16 f07ea7f9ce1e213addb9df00aec053945e909d3f

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