From 1cf6d9fb8cf2f10e302509f033d8d55b4e60712c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 01:45:42 +0800
Subject: [PATCH] 优化友链布局,月台窗口自适应,处理hls取消后仍然缓存问题

---
 src/components/mini/box16-videoDetail.vue |  163 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 148 insertions(+), 15 deletions(-)

diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index 126478e..9c9f19e 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,11 +1,17 @@
 <template>
-	<div>
-		 <div class="boxMain">
-		 	<videoPlayBox></videoPlayBox>
-		 </div>
-		 <div class="articleComment">
-		 	<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/>
-		 </div>
+	<div class="boxMain">
+		<div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
+			<videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
+		</div>
+		<div v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
+			<div class="introduce myShadow" v-if="introduce!=''">
+				<pre style="white-space: pre-line;">{{introduce}}</pre>
+			</div>
+			<div class="articleComment ">
+				<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
+					:foldReply="true" />
+			</div>
+		</div>
 	</div>
 
 </template>
@@ -16,6 +22,10 @@
 	} from '../../api/blogArticleComment.js'
 	import videoPlayBox from "../mini/box15-videoPlayBox.vue"
 	import comment from "../mini/box12-comment.vue"
+
+	import {
+		queryBlogArticleDetail
+	} from '../../api/blogArticle.js'
 
 	export default {
 		components: {
@@ -31,25 +41,114 @@
 			// },
 			articleId: function(newValue, oldValue) {
 				if (newValue == undefined || newValue == null || newValue == "") {
-					this.showMsg = true;
 					this.errorMsg = "日志id参数缺失";
 				} else {
-					this.$nextTick(function() {
-						this.$refs.myComment.updateCommentList(this.articleId);
-					})
+					if (this.newValue != this.oldValue) {
+						this.$nextTick(function() {
+							this.$refs.myComment.updateCommentList(this.articleId);
+						})
+					}
 				}
 			},
 		},
 		data() {
 			return {
 				articleId: "",
-				isAllowedComment: false
+				lastArticleId: "",
+				isAllowedComment: false,
+				introduce: "",
+				secret: "",
+				myLock: false,
+				showFade: true,
+				videoData: {
+					img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+					url: "",
+					type: "normal",
+					title: "",
+					introduce: "",
+					id: ""
+				}
 			}
 		},
 		methods: {
-			showVideo(param) {
-				this.articleId = param.id
+			swichPlay(videoData) {
+				this.introduce = videoData.introduce;
+				this.articleId = videoData.id
+				this.$refs.myComment.updateCommentList(videoData.id);
 			},
+			showVideo(item) {
+				//防止重复加载
+				this.lastArticleId = this.articleId;
+				this.articleId = item.id
+
+				if (this.articleId == this.lastArticleId) {
+					return
+				}
+
+				this.isAllowedComment = item.isAllowedComment;
+				this.introduce = item.introduce;
+				this.loadData();
+			},
+			loadData() {
+
+				if (this.$refs.videoPlayBox.isPlaying) {
+					this.$message.info("视频源已切换..", 6)
+				}
+
+				if (this.myLock) {
+					this.$message.info("正在努力加载中..", 3)
+					return
+				}
+
+				let _this = this;
+				queryBlogArticleDetail({
+					id: this.articleId,
+					authWord: this.secret == "" ? null : md5(this.secret)
+				}).then((res) => {
+					this.myLock = !this.myLock;
+
+					if (res.code != 200) {
+
+						if (res.code == 1019001) {
+							//日志需要授权
+							this.$message.error(res.message)
+						} else if (res.code == 1019002) {
+
+							this.$message.error(res.message)
+						} else {
+							this.$notification.error({
+								message: '好像哪里不对劲..',
+								description: res.message,
+								placement: 'bottomRight'
+							});
+						}
+						return
+					}
+
+					this.isAllowedComment = res.data.isAllowedComment;
+					this.videoData.url = res.data.articleFileURL;
+					this.videoData.img = res.data.coverFileURL;
+					this.videoData.title = res.data.title;
+					this.videoData.introduce = res.data.introduce;
+					this.videoData.id = res.data.id;
+
+
+					if (res.data.articleFileURL != null &&
+						res.data.articleFileURL != "" &&
+						res.data.articleFileURL.endsWith("m3u8")) {
+						this.videoData.type = "customHls";
+					} else {
+						this.videoData.type = "normal";
+					}
+
+					this.myLock = !this.myLock;
+					if (this.lastArticleId != this.articleId) {
+						let tempParam = JSON.parse(JSON.stringify(this.videoData))
+						_this.$refs.videoPlayBox.startPlay(tempParam)
+					}
+				})
+
+			}
 		},
 	}
 </script>
@@ -58,9 +157,43 @@
 		color: black;
 	}
 
+	pre {
+		font-family: 'HYTangMeiRen';
+		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");
+	}
+
 	.boxMain {
+		user-select: none;
+		grid-template-columns: repeat(2, 1fr);
+		display: grid;
+		clear: both;
+		gap: 2rem;
+		max-height: 100%;
+	}
+
+	.playBox {
 		display: flex;
 		justify-content: center;
-		padding: 20px;
+		padding: 20px 0px;
 	}
+
+	.myShadow {
+
+		box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
+			-8px -8px 18px #ffffff;
+	}
+
+	.introduce {
+		padding: 20px 20px 5px;
+		margin-bottom: 20px;
+	}
+
+	@media screen and (max-width: 1023px) {
+		.boxMain {
+			grid-template-columns: repeat(1, 1fr);
+			gap: 0rem;
+		}
+
+	}
+
 </style>

--
Gitblit v1.9.1