blog/blog-facade.git

inleft

2022-03-04 ec6f207325f1996d71fb4e0c6acada906ec026bd

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