blog/blog-facade.git

inleft

2022-08-17 054cdefd40ac8963fac897e4fe98ffc1de4e0b69

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