blog/blog-facade.git

inleft

2022-08-24 38a800ff006e7d90342ceb53ad547a8aaa2bd4d5

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