From a3ab3afe580daa80e9689f6e513e75a385f75bac Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 21:00:37 +0800
Subject: [PATCH] 添加视频详情页
---
src/components/mini/box16-videoDetail.vue | 88 +++++++++++++++++++++++++++++++++----------
1 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index 9c9f19e..804dd89 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,15 +1,23 @@
<template>
- <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-if="showBackButton">
+ <a-button @click="()=>this.$router.back(-1)" style="position: sticky;">
+ <a-icon type="left" />
+ </a-button>
</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 class="boxMain">
+ <div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
+ <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
</div>
- <div class="articleComment ">
- <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
- :foldReply="true" />
+ <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>
@@ -32,13 +40,38 @@
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参数缺失";
@@ -53,6 +86,7 @@
},
data() {
return {
+ showBackButton: false,
articleId: "",
lastArticleId: "",
isAllowedComment: false,
@@ -77,6 +111,8 @@
this.$refs.myComment.updateCommentList(videoData.id);
},
showVideo(item) {
+ this.showBackButton = false;
+
//防止重复加载
this.lastArticleId = this.articleId;
this.articleId = item.id
@@ -88,10 +124,11 @@
this.isAllowedComment = item.isAllowedComment;
this.introduce = item.introduce;
this.loadData();
+
},
loadData() {
- if (this.$refs.videoPlayBox.isPlaying) {
+ if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
this.$message.info("视频源已切换..", 6)
}
@@ -102,8 +139,8 @@
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 = !this.myLock;
@@ -122,10 +159,13 @@
placement: 'bottomRight'
});
}
+ this.myLock = !this.myLock;
return
}
this.isAllowedComment = res.data.isAllowedComment;
+ this.introduce = res.data.introduce;
+
this.videoData.url = res.data.articleFileURL;
this.videoData.img = res.data.coverFileURL;
this.videoData.title = res.data.title;
@@ -167,14 +207,18 @@
grid-template-columns: repeat(2, 1fr);
display: grid;
clear: both;
- gap: 2rem;
+ grid-row-gap: 2rem;
max-height: 100%;
}
.playBox {
display: flex;
justify-content: center;
- padding: 20px 0px;
+ padding: 35px 0px;
+ }
+
+ .showButtonMargin {
+ margin: 75px 0px 0px 0px;
}
.myShadow {
@@ -194,6 +238,8 @@
gap: 0rem;
}
+ .showButtonMargin {
+ margin: 0px;
+ }
}
-
</style>
--
Gitblit v1.9.1