blog/blog-facade.git

inleft

2022-08-17 bc95187efc506413cf85749fe36fe748cf75fed5

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