<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">
|
<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>
|
|
<script>
|
import {
|
history
|
} 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: {
|
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 ("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 {
|
if (this.newValue != this.oldValue) {
|
this.$nextTick(function() {
|
this.$refs.myComment.updateCommentList(this.articleId);
|
})
|
}
|
}
|
},
|
},
|
data() {
|
return {
|
showBackButton: false,
|
articleId: "",
|
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: {
|
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
|
}
|
|
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;
|
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>
|
<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");
|
}
|
|
.boxMain {
|
user-select: none;
|
grid-template-columns: repeat(2, 1fr);
|
display: grid;
|
clear: both;
|
grid-row-gap: 2rem;
|
max-height: 100%;
|
}
|
|
.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;
|
}
|
|
@media screen and (max-width: 1023px) {
|
.boxMain {
|
grid-template-columns: repeat(1, 1fr);
|
gap: 0rem;
|
}
|
|
.showButtonMargin {
|
margin: 0px;
|
}
|
}
|
</style>
|
