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/box15-videoPlayBox.vue | 13 ++-
src/components/mini/mdDetail.vue | 40 ++++++---
src/components/group/MyVideo.vue | 6 +
src/components/group/boxLeft.vue | 6
src/components/mini/box14-video.vue | 7 -
src/components/mini/box-new-article.vue | 38 ++++++---
src/components/mini/box16-videoDetail.vue | 88 ++++++++++++++++-----
src/components/layouts/baseLayout.vue | 8 +
8 files changed, 142 insertions(+), 64 deletions(-)
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
index c04e931..378918b 100644
--- a/src/components/group/MyVideo.vue
+++ b/src/components/group/MyVideo.vue
@@ -1,7 +1,7 @@
<template>
<div class="myModal">
<a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true"
- :bodyStyle="{'overflow':'overlay','height': '750px'}" :afterClose="afterClose" >
+ :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose">
<videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
</a-modal>
</div>
@@ -62,6 +62,10 @@
}
},
showModal(param) {
+ if (this.$route.path == "/videoDetail") {
+ this.$message.info("已经在播放页面啦..")
+ return
+ }
this.visible = true;
this.$nextTick(function() {
this.$refs.videoDetail.showVideo(param)
diff --git a/src/components/group/boxLeft.vue b/src/components/group/boxLeft.vue
index 9512c91..f75aba0 100644
--- a/src/components/group/boxLeft.vue
+++ b/src/components/group/boxLeft.vue
@@ -1,13 +1,13 @@
<template>
<div class="blog-left-side fadeInLeft">
<div class="blog-cell">
- <box1></box1>
+ <box1 ></box1>
</div>
<div class="blog-cell">
- <box2></box2>
+ <box2 ></box2>
</div>
<div class="blog-cell">
- <box3></box3>
+ <box3 ></box3>
</div>
</div>
</template>
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index f5b0b62..af50842 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/src/components/layouts/baseLayout.vue
@@ -6,13 +6,13 @@
</a-layout-header>
<keep-alive>
- <router-view @showMyVideo="showMyVideo"></router-view>
+ <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></router-view>
</keep-alive>
<a-layout-footer>
<AplayerBox />
<tagFooter />
- <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo" />
+ <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo"/>
<a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight"
style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)">
@@ -55,6 +55,10 @@
this.miniVideoPlayData = param;
this.$refs.MyVideo.showModal(param);
},
+ detailBackAction(param) {
+ this.miniVideoPlayData = param;
+ this.closeMyVideo()
+ },
closeMyVideo() {
if (this.firstQuery) {
this.firstQuery = !this.firstQuery;
diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue
index b197f12..05327cd 100644
--- a/src/components/mini/box-new-article.vue
+++ b/src/components/mini/box-new-article.vue
@@ -4,7 +4,8 @@
<div class="miniTag" v-if="isTop==1">置顶</div>
<div class="post_cover left_radius" v-if="index%2==0">
- <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
+ <router-link :to="{path:'videoDetail',query:{id:id}}" :title="title"
+ v-if="articleFileType==myConstant.fileTypeVideo">
<div class="block left_radius"></div>
<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
</router-link>
@@ -20,7 +21,8 @@
</div>
<div class="post_cover right_radius" v-else>
- <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
+ <router-link :to="{path:'videoDetail',query:{id:id}}" :title="title"
+ v-if="articleFileType==myConstant.fileTypeVideo">
<div class="block left_radius"></div>
<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
</router-link>
@@ -37,19 +39,28 @@
<div class="recent-post-info">
- <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
- class="article-title">
+ <router-link :to="{path:'/videoDetail',query:{id:id}}" class="article-title"
+ v-if="articleFileType==myConstant.fileTypeVideo">
<a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
<a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
{{title}}
<a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
</router-link>
+
+ <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
+ class="article-title" v-else>
+ <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
+ <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
+ {{title}}
+ <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
+ </router-link>
+
<!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
<div class="article-meta-wrap" style="display: flex;">
<span class="post-meta-date">
<a-icon type="calendar" />
<span class="article-meta-label"></span>
- <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00"> {{publishDate}} </time>
+ <time> {{publishDate}} </time>
</span>
<span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
@@ -59,7 +70,7 @@
class="article-meta__categories"> {{articleTypeName}}</router-link>
<span v-if="articleFileType==myConstant.fileTypeShort">
<span v-if="jumpURL !=null && jumpURL!=''">
- <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
+ <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
<span class="post-meta-date">
<a-icon type="share-alt" />
<a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a>
@@ -67,7 +78,7 @@
</span>
<span v-else>
- <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
+ <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
<span class="post-meta-date">
<a-icon type="thunderbolt" />碎碎念
</span>
@@ -75,14 +86,13 @@
</span>
<span v-if="articleFileType==myConstant.fileTypeVideo">
- <span v-if="jumpURL !=null && jumpURL!=''">
- <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
- <span class="post-meta-date">
- <a-icon type="video-camera" />
- <a :href="jumpURL" target="_blank" class="no-underline"> 视频 </a>
- </span>
+ <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
+ <span class="post-meta-date">
+ <a-icon type="video-camera" />
+ <router-link :to="{path:'/videoDetail',query:{id:id}}">
+ 视频
+ </router-link>
</span>
-
</span>
<!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
</span>
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 328edae..ad280c1 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -15,10 +15,10 @@
<div class="entry-post">
<div class="entry-header">
<h5 class="entry-title">
- <!-- <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
+ <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
{{item.title}}
- </router-link> -->
- {{item.title}}
+ </router-link>
+ <!-- {{item.title}} -->
</h5>
<div class="post_content">
{{item.introduce}}
@@ -200,7 +200,6 @@
.entry-preview .entry-meta {
display: flex;
- justify-content: space-between;
font-size: .5rem;
padding: .5rem 0 0 0;
flex-wrap: wrap;
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 34690fd..6685448 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -77,7 +77,7 @@
var _this = this;
//调整音量
- _this.$message.success("加载完成,请注意音量是否合适..")
+ _this.$message.success("模块加载完成,请注意音量是否合适..")
this.dp.volume(this.volumeInit, true, false);
@@ -153,6 +153,11 @@
},
//加载播放
startPlay(videoData) {
+ if (videoData == null || videoData == undefined) {
+ this.$message.error("无效资源..")
+ return
+ }
+
//重要!!防止hls类型视频在切换后不停在后台缓存
if (this.hls != null) {
this.hls.destroy();
@@ -169,9 +174,8 @@
this.hls = new Hls();
}
- setTimeout(() => {
- this.dp.switchVideo(this.playingVideoData)
- }, 500);
+ this.dp.switchVideo(this.playingVideoData)
+
},
//播放器初始化
init() {
@@ -196,7 +200,6 @@
},
],
-
highlight: [
//进度条上的自定义时间标记
// 进度条时间点高亮
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>
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 541fcde..58022b4 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -1,7 +1,7 @@
<template>
<div class="article-meta">
<div>
- <a-button @click="back" style="position: absolute;">
+ <a-button @click="()=>this.$router.back(-1)" style="position: absolute;">
<a-icon type="left" />
</a-button>
</div>
@@ -10,6 +10,7 @@
<div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
<p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
</div>
+
<div class="mySecret" v-else>
<h1>怎样才能让你看到我呢</h1>
<h1>只要你要,只要我有...</h1>
@@ -30,10 +31,18 @@
<span class="myTip">{{errorMsg}}</span>
</div>
+ <div class="mySecret"
+ v-else-if="articleFileType==myConstant.fileTypeVideo|| articleFileType==myConstant.fileTypeMp3">
+ <pre style="white-space: pre-line;">
+ {{introduce}}
+ </pre>
+ </div>
+
<div class="markdown-body article-detail" v-else>
<vue-markdown :source="source"></vue-markdown>
</div>
</div>
+
<div class="articleInfoMiniData">
<div class="smallOption" @click="articleOptionHandle('dislike')">
<a-icon type="dislike" style="margin-top: 2px;" />
@@ -86,6 +95,7 @@
myConstant: myConstant,
articelMeta: "",
isAllowedComment: 1,
+ introduce: "",
articleId: "",
articleFileType: myConstant.fileTypeMarkDown,
source: "",
@@ -131,9 +141,7 @@
this.showMsg = true;
this.errorMsg = "加载中..";
- if (this.articleFileType == myConstant.fileTypeShort ||
- this.articleFileType == myConstant.fileTypeVideo ||
- this.articleFileType == myConstant.fileTypeMp3) {
+ if (this.articleFileType == myConstant.fileTypeShort) {
this.errorMsg = "该类型日志在这里没有更多啦..";
return
}
@@ -168,12 +176,19 @@
// this.test = res.data.isAllowedComment == 1 ? true : false;
this.isAllowedComment = res.data.isAllowedComment;
+ this.introduce = res.data.introduce;
+
this.articelMeta = res.data;
- this.$axios
- .get(res.data.articleFileURL)
- .then((res) => {
- this.source = res.data;
- })
+
+ if (res.data.articleFileType == myConstant.fileTypeMarkDown ||
+ res.data.articleFileType == myConstant.fileTypeHtml) {
+
+ this.$axios
+ .get(res.data.articleFileURL)
+ .then((res) => {
+ this.source = res.data;
+ })
+ }
//获取日志资源文件
this.showMsg = false;
@@ -193,9 +208,6 @@
this.search.disabled = false;
})
- },
- back: function() {
- this.$router.back(-1);
}
},
@@ -243,7 +255,7 @@
}
.mySecretSamll {
- padding: 30px 10px 10px;
+ padding: 30px 10px 10px;
height: 115px;
display: flex;
flex-direction: column;
@@ -256,7 +268,7 @@
.markdown-body,
.articleComment {
min-height: 70%;
- padding: 35px 20px 30px 20px;
+ padding: 30px 20px 20px 20px;
box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
-8px -8px 18px #ffffff;
}
--
Gitblit v1.9.1