blog/blog-facade.git

inleft

2022-08-19 8ec9c517c58b70918f2d72f2bfa6ab4b0a4145f9

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