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 | 91 ++++++++++++++++++++++++++++++++++++--------- 1 files changed, 72 insertions(+), 19 deletions(-) diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue index 8874d56..9c9f19e 100644 --- a/src/components/mini/box16-videoDetail.vue +++ b/src/components/mini/box16-videoDetail.vue @@ -1,13 +1,16 @@ <template> - <div> - <div class="boxMain"> - <videoPlayBox ref="videoPlayBox"></videoPlayBox> + <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 style="padding: 20px 20px 5px;" class="myShadow"> - <pre>{{introduce}}</pre> - </div> - <div class="articleComment"> - <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" /> + <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> @@ -40,9 +43,11 @@ if (newValue == undefined || newValue == null || newValue == "") { 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); + }) + } } }, }, @@ -54,22 +59,41 @@ introduce: "", secret: "", myLock: false, + showFade: true, videoData: { img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", url: "", - type: "normal" + type: "normal", + title: "", + introduce: "", + id: "" } } }, methods: { + 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 - this.isAllowedComment = item.isAllowedComment - this.introduce = item.introduce - this.loadData() + + 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) @@ -81,7 +105,7 @@ id: this.articleId, authWord: this.secret == "" ? null : md5(this.secret) }).then((res) => { - this.myLock = true; + this.myLock = !this.myLock; if (res.code != 200) { @@ -104,6 +128,11 @@ 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")) { @@ -112,9 +141,10 @@ this.videoData.type = "normal"; } - this.myLock = false; + this.myLock = !this.myLock; if (this.lastArticleId != this.articleId) { - _this.$refs.videoPlayBox.changePlay(this.videoData) + let tempParam = JSON.parse(JSON.stringify(this.videoData)) + _this.$refs.videoPlayBox.startPlay(tempParam) } }) @@ -133,9 +163,18 @@ } .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: 5px 20px; + padding: 20px 0px; } .myShadow { @@ -143,4 +182,18 @@ 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