blog/blog-facade.git

inleft

2022-08-12 e4f0862bd8af0ac1c7aab59904b69dd071526aff

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