blog/blog-facade.git

inleft

2022-08-17 054cdefd40ac8963fac897e4fe98ffc1de4e0b69

commit \| author \| age
859ec7	1	<template>
a3ab3a	2	<div>
I	3	<div v-if="showBackButton">
	4	<a-button @click="()=>this.$router.back(-1)" style="position: sticky;">
	5	<a-icon type="left" />
	6	</a-button>
af029b	7	</div>
a3ab3a	8	<div class="boxMain">
I	9	<div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
	10	<videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
1cf6d9	11	</div>
054cde	12	<div
a3ab3a	13	v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
I	14	<div class="introduce myShadow" v-if="introduce!=''">
	15	<pre style="white-space: pre-line;">{{introduce}}</pre>
	16	</div>
	17	<div class="articleComment ">
	18	<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
	19	:foldReply="true" />
	20	</div>
1cf6d9	21	</div>
af029b	22	</div>
859ec7	23	</div>
I	24
	25	</template>
	26
	27	<script>
	28	import {
	29	history
	30	} from '../../api/blogArticleComment.js'
	31	import videoPlayBox from "../mini/box15-videoPlayBox.vue"
	32	import comment from "../mini/box12-comment.vue"
af029b	33
I	34	import {
	35	queryBlogArticleDetail
	36	} from '../../api/blogArticle.js'
859ec7	37
I	38	export default {
	39	components: {
	40	videoPlayBox,
	41	comment,
	42	},
a3ab3a	43	created() {
I	44	if (this.$route.query.id != undefined && this.$route.query.id != null && this.$route.query.id != "") {
	45	let item = {
	46	id: this.$route.query.id,
	47	isAllowedComment: this.isAllowedComment,
	48	introduce: this.introduce,
	49	}
	50	this.showVideo(item);
	51	this.showBackButton = true;
	52	}
	53	},
	54	deactivated() {
	55	if (this.showBackButton) {
	56	this.$emit('detailBackAction', {
	57	id: this.articleId,
	58	isAllowedComment: this.isAllowedComment,
	59	introduce: this.introduce,
	60	})
	61	}
	62	},
859ec7	63	watch: {
a3ab3a	64	'$route'(to, from) {
I	65	if ("videoDetail" === to.name) {
	66	let item = {
	67	id: this.$route.query.id,
	68	isAllowedComment: this.isAllowedComment,
	69	introduce: this.introduce,
	70	}
	71	this.showVideo(item);
	72	this.showBackButton = true;
	73	}
	74	},
859ec7	75	articleId: function(newValue, oldValue) {
I	76	if (newValue == undefined \|\| newValue == null \|\| newValue == "") {
	77	this.errorMsg = "日志id参数缺失";
	78	} else {
1cf6d9	79	if (this.newValue != this.oldValue) {
I	80	this.$nextTick(function() {
	81	this.$refs.myComment.updateCommentList(this.articleId);
	82	})
	83	}
859ec7	84	}
I	85	},
	86	},
	87	data() {
	88	return {
a3ab3a	89	showBackButton: false,
859ec7	90	articleId: "",
af029b	91	lastArticleId: "",
I	92	isAllowedComment: false,
	93	introduce: "",
	94	secret: "",
	95	myLock: false,
1cf6d9	96	showFade: true,
af029b	97	videoData: {
I	98	img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
	99	url: "",
0dd41b	100	type: "normal",
I	101	title: "",
e4f086	102	introduce: "",
0dd41b	103	id: ""
af029b	104	}
859ec7	105	}
I	106	},
	107	methods: {
e4f086	108	swichPlay(videoData) {
I	109	this.introduce = videoData.introduce;
1cf6d9	110	this.articleId = videoData.id
e4f086	111	this.$refs.myComment.updateCommentList(videoData.id);
I	112	},
af029b	113	showVideo(item) {
a3ab3a	114	this.showBackButton = false;
I	115
0dd41b	116	//防止重复加载
af029b	117	this.lastArticleId = this.articleId;
I	118	this.articleId = item.id
0dd41b	119
I	120	if (this.articleId == this.lastArticleId) {
	121	return
	122	}
	123
	124	this.isAllowedComment = item.isAllowedComment;
	125	this.introduce = item.introduce;
	126	this.loadData();
a3ab3a	127
859ec7	128	},
af029b	129	loadData() {
e4f086	130
a3ab3a	131	if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
1cf6d9	132	this.$message.info("视频源已切换..", 6)
e4f086	133	}
af029b	134
I	135	if (this.myLock) {
	136	this.$message.info("正在努力加载中..", 3)
	137	return
	138	}
	139
	140	let _this = this;
	141	queryBlogArticleDetail({
a3ab3a	142	id: _this.articleId,
I	143	authWord: _this.secret == "" ? null : md5(_this.secret)
af029b	144	}).then((res) => {
0dd41b	145	this.myLock = !this.myLock;
af029b	146
I	147	if (res.code != 200) {
	148
	149	if (res.code == 1019001) {
	150	//日志需要授权
	151	this.$message.error(res.message)
	152	} else if (res.code == 1019002) {
	153
	154	this.$message.error(res.message)
	155	} else {
	156	this.$notification.error({
	157	message: '好像哪里不对劲..',
	158	description: res.message,
	159	placement: 'bottomRight'
	160	});
	161	}
a3ab3a	162	this.myLock = !this.myLock;
af029b	163	return
I	164	}
	165
	166	this.isAllowedComment = res.data.isAllowedComment;
a3ab3a	167	this.introduce = res.data.introduce;
I	168
af029b	169	this.videoData.url = res.data.articleFileURL;
I	170	this.videoData.img = res.data.coverFileURL;
0dd41b	171	this.videoData.title = res.data.title;
e4f086	172	this.videoData.introduce = res.data.introduce;
0dd41b	173	this.videoData.id = res.data.id;
I	174
	175
af029b	176	if (res.data.articleFileURL != null &&
I	177	res.data.articleFileURL != "" &&
	178	res.data.articleFileURL.endsWith("m3u8")) {
	179	this.videoData.type = "customHls";
	180	} else {
	181	this.videoData.type = "normal";
	182	}
	183
0dd41b	184	this.myLock = !this.myLock;
af029b	185	if (this.lastArticleId != this.articleId) {
e4f086	186	let tempParam = JSON.parse(JSON.stringify(this.videoData))
I	187	_this.$refs.videoPlayBox.startPlay(tempParam)
af029b	188	}
I	189	})
	190
	191	}
859ec7	192	},
I	193	}
	194	</script>
054cde	195	<style lang="less">
af029b	196	pre {
I	197	font-family: 'HYTangMeiRen';
	198	src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
	199	}
	200
859ec7	201	.boxMain {
e4f086	202	user-select: none;
1cf6d9	203	grid-template-columns: repeat(2, 1fr);
I	204	display: grid;
	205	clear: both;
a3ab3a	206	grid-row-gap: 2rem;
1cf6d9	207	max-height: 100%;
054cde	208
I	209	a {
	210	color: black;
	211	}
	212
	213	.playBox {
	214	display: flex;
	215	justify-content: center;
	216	padding: 35px 0px;
	217	}
	218
	219	.showButtonMargin {
	220	margin: 75px 0px 0px 0px;
	221	}
	222
	223	.myShadow {
	224
	225	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
	226	-8px -8px 18px #ffffff;
	227	}
	228
	229	.introduce {
	230	padding: 20px 20px 5px;
	231	margin-bottom: 20px;
	232	}
1cf6d9	233	}
I	234
a3ab3a	235
1cf6d9	236
I	237	@media screen and (max-width: 1023px) {
	238	.boxMain {
	239	grid-template-columns: repeat(1, 1fr);
	240	gap: 0rem;
	241	}
	242
a3ab3a	243	.showButtonMargin {
I	244	margin: 0px;
	245	}
1cf6d9	246	}
859ec7	247	</style>