<template>
|
<div class="video-box">
|
<div class="video-title">
|
<img class="bg-img" :src="type == 'video'? videoBgIcon : audioBgIcon" alt="" />
|
<p class="video-title-name" v-if="type == 'video'">
|
<img @click="isDisplay = !isDisplay" :src="videoIcon" alt="" />
|
<span>视频资料</span>
|
</p>
|
<p class="video-title-name" v-else>
|
<img @click="isDisplay = !isDisplay" :src="audioIcon" alt="" />
|
<span>音频资料</span>
|
</p>
|
<p class="video-title-img" v-if="type == 'video'">
|
<span> {{ videoName }}</span>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
:content="localIsCollectVideo ? '点击取消' : '点击收藏'"
|
placement="top-start"
|
>
|
<img
|
:src="
|
collectResourceList.findIndex((item) => item.id == videoPath) > -1
|
? collectCheck
|
: collectImg
|
"
|
alt=""
|
class="collect-btn"
|
@click="handleCollect()"
|
/>
|
</el-tooltip>
|
</p>
|
<p class="video-title-img" v-if="type == 'audio'">
|
<span> {{ videoName }}</span>
|
</p>
|
</div>
|
<div class="video-main" v-if="isDisplay">
|
<video
|
:src="videoPathSrc"
|
webkit-playsinline="true"
|
x-webkit-airplay="true"
|
playsinline="true"
|
x5-video-orientation="h5"
|
x5-video-player-fullscreen="true"
|
x5-playsinline=""
|
controls
|
controlslist="nodownload"
|
class="w100 video"
|
v-if="type == 'video'"
|
></video>
|
<audio
|
:src="videoPathSrc"
|
controls
|
controlslist="nodownload"
|
class="w100 video"
|
v-else
|
></audio>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getResourcePath } from "@/assets/methods/resources";
|
import {
|
getCollectResource,
|
setCollectResource,
|
} from "@/assets/methods/resources";
|
export default {
|
data() {
|
return {
|
videoBgIcon: require("../../assets/images/0028-02.png"),
|
audioBgIcon: require("../../assets/images/0028-01.png"),
|
videoIcon: require("@/assets/images/videoLogo.png"),
|
audioIcon: require("@/assets/images/audioLogo.svg"),
|
collectCheck: require("@/assets/images/heart-check.png"),
|
collectImg: require("@/assets/images/heart.png"),
|
videoPathSrc: "",
|
collectResourceList: [],
|
localIsCollectVideo: this.isCollectVideo,
|
isDisplay: true,
|
};
|
},
|
props: {
|
videoPath: {
|
type: String,
|
required: "",
|
},
|
videoName: {
|
type: String,
|
required: "", // 默认值
|
},
|
type: {
|
type: String,
|
required: "video", // 默认值
|
},
|
BookId: {
|
type: String,
|
required: "", // 默认值
|
},
|
isCollectVideo: {
|
type: Boolean,
|
required: false, // 默认值
|
},
|
},
|
computed: {
|
// currentQuestion() {
|
// return this.questions[this.currentIndex];
|
// },
|
// setHoverStyles() {
|
// return {
|
// "--hover-bg-color": this.hoverBackgroundColor,
|
// "--hover-color": this.hoverColor,
|
// };
|
// },
|
// mergedStyles() {
|
// // 合并直接样式和计算属性样式
|
// return {
|
// borderColor: this.primaryColor,
|
// ...this.setHoverStyles,
|
// };
|
// },
|
},
|
async mounted() {
|
this.getVidoePath();
|
this.collectResourceList = await getCollectResource(this.BookId);
|
},
|
methods: {
|
async getVidoePath() {
|
this.videoPathSrc = await getResourcePath(this.videoPath);
|
debugger;
|
},
|
|
handleCollect() {
|
this.handleCollectResource(
|
this.videoPath,
|
this.videoPath,
|
"",
|
"视频",
|
"bits",
|
"视频：" + this.videoName
|
);
|
this.localIsCollectVideo = !this.localIsCollectVideo;
|
},
|
//资源收藏事件
|
// resourcePath 文件路径，
|
// resourceType 文件类型
|
// source 文件来源
|
handleCollectResource(
|
id,
|
md5,
|
resourcePath,
|
resourceType,
|
source,
|
resourceName
|
) {
|
let list = this.collectResourceList;
|
if (list.findIndex((item) => item.id == id) > -1) {
|
list = list.filter((item) => item.id != id);
|
} else {
|
list.push({
|
id,
|
md5,
|
resourcePath,
|
resourceType,
|
source,
|
resourceName,
|
});
|
}
|
this.collectResourceList = list;
|
setCollectResource(this.BookId, this.collectResourceList);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.video-box {
|
margin: 35px 0 20px 0;
|
border: 1px solid #078fb9;
|
}
|
|
.video-title {
|
display: flex;
|
justify-content: space-between;
|
background-color: #e1f4fc;
|
border-bottom: 1px solid #078fb9;
|
min-height: 25px;
|
position: relative;
|
|
.bg-img {
|
width: 12%;
|
position: absolute;
|
top: -29px;
|
}
|
}
|
|
.video-title-name {
|
padding: 0 2%;
|
display: flex;
|
align-items: center;
|
text-indent: 0em;
|
margin: 0 !important;
|
border-right: 1px solid #078fb9;
|
|
img {
|
cursor: pointer;
|
margin-right: 10px;
|
}
|
}
|
|
.video-title-img {
|
width: 75%;
|
padding-right: 2%;
|
text-indent: 0em;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin: 0;
|
|
span {
|
overflow: hidden;
|
}
|
|
img {
|
cursor: pointer;
|
}
|
}
|
|
.video-main {
|
margin: 5% 5%;
|
}
|
|
.collect-btn {
|
cursor: pointer;
|
width: 20px;
|
height: 20px;
|
margin-left: 10px;
|
margin-top: 0.3%;
|
}
|
|
.w100 {
|
width: 100%;
|
}
|
</style>
|
