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