From afab3a98a65f7fb4f342251238ab3c329e4242dd Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 18:44:23 +0800
Subject: [PATCH] 调整统计脚本渲染逻辑 新增自定义表情组件
---
src/components/mini/box16-videoDetail.vue | 198 +++++++++++++++++++++++++++++++++++++------------
1 files changed, 148 insertions(+), 50 deletions(-)
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index 8874d56..feb99a5 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,13 +1,24 @@
<template>
<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">
- <videoPlayBox ref="videoPlayBox"></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 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>
@@ -29,47 +40,98 @@
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.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: "",
lastArticleId: "",
isAllowedComment: false,
introduce: "",
secret: "",
myLock: false,
+ showFade: true,
videoData: {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ pic: "",
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.showBackButton = false;
+
+ //防止重复加载
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 != undefined && this.$refs.videoPlayBox.isPlaying) {
+ this.$message.info("视频源已切换..", 6)
+ }
if (this.myLock) {
this.$message.info("正在努力加载中..", 3)
@@ -78,10 +140,10 @@
let _this = this;
queryBlogArticleDetail({
- id: this.articleId,
- authWord: this.secret == "" ? null : md5(this.secret)
+ id: _this.articleId,
+ authWord: _this.secret == "" ? null : md5(_this.secret)
}).then((res) => {
- this.myLock = true;
+ this.myLock = !this.myLock;
if (res.code != 200) {
@@ -98,23 +160,33 @@
placement: 'bottomRight'
});
}
+ this.myLock = !this.myLock;
return
}
- this.isAllowedComment = res.data.isAllowedComment;
- this.videoData.url = res.data.articleFileURL;
- this.videoData.img = res.data.coverFileURL;
- if (res.data.articleFileURL != null &&
- res.data.articleFileURL != "" &&
- res.data.articleFileURL.endsWith("m3u8")) {
- this.videoData.type = "customHls";
+ if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
+ this.$notification.error({
+ message: '此视频还没有上传资源..',
+ placement: 'bottomRight'
+ });
+ this.videoData.url = "";
} else {
- this.videoData.type = "normal";
+ this.videoData.url = res.data.videoUrlList[0];
}
- this.myLock = false;
+ 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) {
- _this.$refs.videoPlayBox.changePlay(this.videoData)
+ let tempParam = JSON.parse(JSON.stringify(this.videoData))
+ _this.$refs.videoPlayBox.startPlay(tempParam)
}
})
@@ -122,25 +194,51 @@
},
}
</script>
-<style scoped>
- a {
- 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");
- }
-
+<style lang="less">
.boxMain {
- display: flex;
- justify-content: center;
- padding: 5px 20px;
+ 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;
+ }
}
- .myShadow {
- box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
- -8px -8px 18px #ffffff;
+
+ @media screen and (max-width: 1023px) {
+ .boxMain {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 0rem;
+ }
+
+ .showButtonMargin {
+ margin: 0px;
+ }
}
</style>
--
Gitblit v1.9.1