From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 18:23:08 +0800 Subject: [PATCH] 统计模块异步加载 --- src/components/mini/box16-videoDetail.vue | 230 +++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 204 insertions(+), 26 deletions(-) diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue index 126478e..feb99a5 100644 --- a/src/components/mini/box16-videoDetail.vue +++ b/src/components/mini/box16-videoDetail.vue @@ -1,11 +1,25 @@ <template> <div> - <div class="boxMain"> - <videoPlayBox></videoPlayBox> - </div> - <div class="articleComment"> - <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/> - </div> + <div v-if="showBackButton"> + <a-button @click="()=>this.$router.back(-1)" style="position: sticky;"> + <a-icon type="left" /> + </a-button> + </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="{ showButtonMargin:( showBackButton ) ,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> </div> </template> @@ -17,50 +31,214 @@ import videoPlayBox from "../mini/box15-videoPlayBox.vue" import comment from "../mini/box12-comment.vue" + import { + queryBlogArticleDetail + } from '../../api/blogArticle.js' + export default { components: { videoPlayBox, comment, }, + created() { + if (this.$route.query.id != undefined && this.$route.query.id != null && this.$route.query.id != "") { + let item = { + id: this.$route.query.id, + isAllowedComment: this.isAllowedComment, + introduce: this.introduce, + } + this.showVideo(item); + this.showBackButton = true; + } + }, + deactivated() { + if (this.showBackButton) { + this.$emit('detailBackAction', { + id: this.articleId, + isAllowedComment: this.isAllowedComment, + introduce: this.introduce, + }) + } + }, watch: { - // '$route'(to, from) { - // if ("mdDetail" === to.name) { - // this.articleId = this.$route.query.id; - // this.articleFileType = this.$route.query.articleFileType; - // } - // }, + '$route'(to, from) { + if ("videoDetail" === to.name) { + let item = { + id: this.$route.query.id, + isAllowedComment: this.isAllowedComment, + introduce: this.introduce, + } + this.showVideo(item); + this.showBackButton = true; + } + }, 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 { + loadFinish: false, + showBackButton: false, articleId: "", - isAllowedComment: false + lastArticleId: "", + isAllowedComment: false, + introduce: "", + secret: "", + myLock: false, + showFade: true, + videoData: { + pic: "", + 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.showBackButton = false; + + //防止重复加载 + 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 != undefined && 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' + }); + } + this.myLock = !this.myLock; + return + } + + if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { + this.$notification.error({ + message: '此视频还没有上传资源..', + placement: 'bottomRight' + }); + this.videoData.url = ""; + } else { + this.videoData.url = res.data.videoUrlList[0]; + } + + this.isAllowedComment = res.data.isAllowedComment; + this.introduce = res.data.introduce; + + + this.videoData.pic = res.data.coverFileURL; + this.videoData.title = res.data.title; + this.videoData.introduce = res.data.introduce; + this.videoData.id = res.data.id; + + this.myLock = !this.myLock; + if (this.lastArticleId != this.articleId) { + let tempParam = JSON.parse(JSON.stringify(this.videoData)) + _this.$refs.videoPlayBox.startPlay(tempParam) + } + }) + + } }, } </script> -<style scoped> - a { - color: black; +<style lang="less"> + .boxMain { + user-select: none; + grid-template-columns: repeat(2, 1fr); + display: grid; + clear: both; + grid-row-gap: 2rem; + max-height: 100%; + + a { + color: black; + } + + .playBox { + display: flex; + justify-content: center; + padding: 35px 0px; + } + + .showButtonMargin { + margin: 75px 0px 0px 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; + } } - .boxMain { - display: flex; - justify-content: center; - padding: 20px; + + + @media screen and (max-width: 1023px) { + .boxMain { + grid-template-columns: repeat(1, 1fr); + gap: 0rem; + } + + .showButtonMargin { + margin: 0px; + } } </style> -- Gitblit v1.9.1