blog/blog-facade.git

inleft

2022-08-23 93768186ca58acd0fc0b6963d0e017979c087631

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>
6461f5	52	<div v-viewer.static class="markdown-body article-detail" v-else>
I	53	<vue-markdown :source="source"></vue-markdown>
7b98c8	54	</div>
56a4b8	55	</div>
916b6b	56	<!-- <div class="articleInfoMiniData">
I	57	<div>
	58	<a-icon type="calendar" class="samllPadding" />
	59	<span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
	60	</div>
ec6f20	61	<div class="smallOption" @click="articleOptionHandle('dislike')">
I	62	<a-icon type="dislike" style="margin-top: 2px;" />
0b0125	63	</div>
I	64	<div>
	65	<a-icon type="read" class="samllPadding" />
	66	<span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
	67	</div>
ec6f20	68	<div class="smallOption" @click="articleOptionHandle('like')">
I	69	<a-icon type="like" class="samllPadding" />
	70	<span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
0b0125	71	</div>
I	72	<div>
	73	<a-icon type="book" class="samllPadding" />
	74	<span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
	75	</div>
916b6b	76	<a-icon type="folder-open" class="samllPadding" />
I	77	</div> -->
	78
937681	79	<div class="articleInfoMiniData">
I	80	<div class="myTitleDeal">
	81	<a-icon type="left" />
	82	<a-tooltip placement="bottomLeft" :title="'上一篇: '+articelMeta.previousRecord.title"
	83	v-if="articelMeta.previousRecord !=null">
	84	<router-link
	85	:to="{path:'/mdDetail',query:{id:articelMeta.previousRecord.id,articleFileType:articleFileType,typeId:typeId}}"
	86	class="article-title">
	87	{{articelMeta.previousRecord.title}}
	88	</router-link>
	89	</a-tooltip>
	90	<span v-else class="myTip">到顶啦..</span>
	91	</div>
	92	<div style="display: -webkit-box;">
	93	<div class="myTitleDeal">
	94	<a-tooltip placement="bottomLeft" :title="'下一篇: '+articelMeta.nextRecord.title"
	95	v-if="articelMeta.nextRecord !=null">
	96	<router-link
	97	:to="{path:'/mdDetail',query:{id:articelMeta.nextRecord.id,articleFileType:articleFileType,typeId:typeId}}"
	98	class="article-title">
	99	{{articelMeta.nextRecord.title}}
	100	</router-link>
	101	</a-tooltip>
	102	<span v-else class="myTip">到底啦..</span>
	103	</div>
	104	<a-icon type="right" />
	105	</div>
	106	</div>
	107
0b0125	108	<div class="articleComment">
I	109	<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
	110	</div>
	111
56a4b8	112	</div>
I	113	</template>
	114
	115	<script>
	116	import VueMarkdown from 'vue-markdown'
28d46d	117	import md5 from 'js-md5';
I	118
	119	import {
	120	queryBlogArticleDetail
	121	} from '../../api/blogArticle.js'
846bd0	122	import comment from "../mini/box12-comment.vue"
28d46d	123
I	124	import axios from 'axios'
105729	125	import myConstant from "../../config/myConstant.js"
af029b	126
56a4b8	127	export default {
I	128	components: {
846bd0	129	VueMarkdown,
I	130	comment
56a4b8	131	},
I	132	data() {
	133	return {
af029b	134	myConstant: myConstant,
937681	135	articelMeta: '',
0b0125	136	isAllowedComment: 1,
a3ab3a	137	introduce: "",
5dfef8	138	articleId: "",
105729	139	articleFileType: myConstant.fileTypeMarkDown,
937681	140	typeId: null,
0b0125	141	source: "",
28d46d	142	showMsg: false,
I	143	myLock: false,
	144	errorMsg: '',
7b98c8	145	secret: '',
I	146	search: {
	147	placeholder: "",
0b0125	148	autoFocus: false,
7b98c8	149	backfill: true,
I	150	value: '',
	151	disabled: false
	152	},
8ec9c5	153	coverURL: ""
56a4b8	154	}
I	155	},
7b98c8	156	created() {
5dfef8	157	this.articleId = this.$route.query.id;
944ca6	158	this.articleFileType = this.$route.query.articleFileType;
937681	159	this.typeId = this.$route.query.typeId;
7b98c8	160	},
I	161	watch: {
	162	'$route'(to, from) {
28d46d	163	if ("mdDetail" === to.name) {
5dfef8	164	this.articleId = this.$route.query.id;
944ca6	165	this.articleFileType = this.$route.query.articleFileType;
937681	166	this.typeId = this.$route.query.typeId;
7b98c8	167	}
28d46d	168	},
5dfef8	169	articleId: function(newValue, oldValue) {
28d46d	170	if (newValue == undefined \|\| newValue == null \|\| newValue == "") {
I	171	this.showMsg = true;
	172	this.errorMsg = "日志id参数缺失";
	173	} else {
	174	this.queryDetail();
5dfef8	175	this.$refs.myComment.updateCommentList(this.articleId);
28d46d	176	}
0b0125	177	},
7b98c8	178	},
56a4b8	179	methods: {
0b0125	180	articleOptionHandle(type) {
I	181	this.$message.info(type)
	182	},
28d46d	183	queryDetail() {
4b854c	184	this.showMsg = true;
I	185	this.errorMsg = "加载中..";
944ca6	186
054cde	187	// if (this.articleFileType == myConstant.fileTypeShort) {
I	188	// this.errorMsg = "该类型日志在这里没有更多啦..";
	189	// return
	190	// }
944ca6	191
28d46d	192	queryBlogArticleDetail({
5dfef8	193	id: this.articleId,
937681	194	authWord: this.secret == "" ? null : md5(this.secret),
I	195	typeId: this.typeId,
	196	fileType: this.articleFileType
28d46d	197	}).then((res) => {
I	198	this.showMsg = true;
	199	this.myLock = false;
	200	this.errorMsg = res.message;
	201	this.source = "";
	202	if (res.code != 200) {
	203
	204	if (res.code == 1019001) {
	205	//日志需要授权
	206	this.errorMsg = "";
	207	this.myLock = true;
	208	} else if (res.code == 1019002) {
	209	//授权码错误
	210	this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
	211	this.myLock = true;
	212	} else {
	213	this.$notification.error({
	214	message: '好像哪里不对劲..',
	215	description: res.message,
	216	placement: 'bottomRight'
	217	});
	218	}
	219	return
	220	}
0b0125	221	// this.test = res.data.isAllowedComment == 1 ? true : false;
28d46d	222
0b0125	223	this.isAllowedComment = res.data.isAllowedComment;
a3ab3a	224	this.introduce = res.data.introduce;
bc9518	225	this.articleFileType = res.data.articleFileType;
916b6b	226	if (res.data.coverFileURL != null && res.data.coverFileURL != '') {
I	227	this.coverURL = res.data.coverFileURL;
	228	} else {
	229	this.coverURL = "http://t.inleft.com/share/media_photo/background.jpg";
	230	}
a3ab3a	231
0b0125	232	this.articelMeta = res.data;
a3ab3a	233
I	234	if (res.data.articleFileType == myConstant.fileTypeMarkDown \|\|
	235	res.data.articleFileType == myConstant.fileTypeHtml) {
937681	236	if (res.data.articleFileURL != null && res.data.articleFileURL != '') {
I	237	this.$axios
	238	.get(res.data.articleFileURL)
	239	.then((res) => {
	240	this.source = res.data;
	241	}).catch(() => [
	242	this.$message.error("获取文件好像失败了..", 3)
	243	])
	244	}
a3ab3a	245	}
c23efb	246
I	247	//获取日志资源文件
	248	this.showMsg = false;
	249	this.errorMsg = "";
28d46d	250	})
I	251	},
	252	pressEnter() {
7b98c8	253	if (this.secret == "") {
I	254	return
	255	}
	256	this.search.disabled = true
28d46d	257	this.source = "";
7b98c8	258	this.$message
28d46d	259	.loading('卍解..', 1)
7b98c8	260	.then(() => {
28d46d	261	this.queryDetail();
7b98c8	262	this.search.disabled = false;
I	263	})
	264
56a4b8	265	}
I	266	},
c23efb	267
56a4b8	268	}
I	269	</script>
	270
b505f3	271	<style lang="less">
I	272	@import '../../assets/md.less';
937681	273
56a4b8	274
916b6b	275	.headertop {
I	276	position: relative;
	277	overflow: hidden;
	278	border-radius: 14px;
	279	}
	280
	281	.centerbg {
	282	width: 100%;
	283	margin: 0;
	284	padding: 0;
	285	background-repeat: no-repeat;
	286	// background-attachment: fixed;
	287	background-size: cover;
	288	z-index: -1;
	289	// background-image: url("http://t.inleft.com/blog//cover/这世界那么多人.jpg");
	290	height: 222px;
	291	background-size: 100% auto;
	292	background-position: center;
	293	}
	294
	295
	296	.headertop::before {
	297	content: '';
	298	position: absolute;
	299	top: 0;
	300	bottom: 0;
	301	left: 0;
	302	right: 0;
	303	z-index: 3;
	304	background-attachment: fixed;
	305	}
	306
	307	.headertop.filter-dot::before {
	308	// background-image: url("https://blog-img-1258635493.cos.ap-chengdu.myqcloud.com/cdn/img/other/dot.gif");
	309	// background-image: url("http://blog.inleft.com/photo/dot.gif");
	310	}
	311
	312	// .headertop-bar::after {
	313	// content: '';
	314	// width: 150%;
	315	// height: 4.375rem;
	316	// background: linear-gradient(0deg, #fff, 84%, #ffffff4f);
	317	// left: -25%;
	318	// bottom: -2.875rem;
	319	// border-radius: 100%;
	320	// position: absolute;
	321	// z-index: 4;
	322	// }
0b0125	323
I	324	.smallOption {
	325	transition-function: ease-out;
	326	transition-duration: 200ms;
	327	-webkit-transition-function: ease-out;
	328	-webkit-transition-duration: 200ms;
	329	-moztransition-function: ease-out;
	330	-moztransition-duration: 200ms;
	331	-o-transition-function: ease-out;
	332	-o-transition-duration: 200ms;
	333	}
	334
	335	.smallOption:hover {
	336	transform: scale(1.55, 1.55);
	337	-webkit-transform: scale(1.55, 1.55);
	338	-moz-transform: scale(1.55, 1.55);
	339	-o-transform: scale(1.55, 1.55);
	340	}
	341
	342	.articleInfoMiniData {
	343	user-select: none;
	344	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
916b6b	345	padding: 10px 23px;
937681	346	margin: 20px 0px;
0b0125	347	display: flex;
I	348	justify-content: space-between;
	349	flex-wrap: wrap;
937681	350
I	351
	352	a {
	353	color: black;
	354	}
	355
	356	.myTitleDeal {
	357	max-width: 300px;
	358	-webkit-line-clamp: 1;
	359	text-overflow: ellipsis;
	360	overflow: hidden;
	361	word-wrap: break-word;
	362	white-space: nowrap;
	363	word-break: break-all;
	364	}
0b0125	365	}
I	366
7b98c8	367	.mySecret {
054cde	368	height: 515px;
7b98c8	369	display: flex;
I	370	flex-direction: column;
	371	justify-content: center;
	372	padding-left: auto;
	373	align-items: center;
	374	}
00e46d	375
944ca6	376	.mySecretSamll {
a3ab3a	377	padding: 30px 10px 10px;
944ca6	378	height: 115px;
I	379	display: flex;
	380	flex-direction: column;
	381	justify-content: center;
	382	padding-left: auto;
	383	align-items: center;
	384	}
7b98c8	385
846bd0	386
I	387	.markdown-body,
	388	.articleComment {
859ec7	389	min-height: 70%;
a3ab3a	390	padding: 30px 20px 20px 20px;
b505f3	391	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
I	392	-8px -8px 18px #ffffff;
	393	}
56a4b8	394
937681	395
I	396	@media screen and (max-width:768px) {
	397	.articleInfoMiniData {
	398	.myTitleDeal {
	399	max-width: 120px;
	400	}
	401	}
56a4b8	402	}
I	403	</style>