blog/blog-facade.git

inleft

2022-03-03 0b0125884c449378a2e80f888a43a2d20974c8df

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