<template>
|
<div class="knowledgeExpansion theme-color">
|
<div class="questionBank-video">
|
<svgIcon icon-file-name="sanJiao"></svgIcon>
|
<span>视频</span>
|
</div>
|
<div class="knowledgeExpansion-video">
|
<p class="center text td-0">
|
<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"></video>
|
</p>
|
<p class="center videoname">
|
<span>{{ videoName }}</span>
|
<el-tooltip class="item" effect="dark" :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
|
placement="top-start">
|
<svgIcon class="collect-btn " :icon-file-name="collectResourceList.findIndex(
|
(item) => item.id == videoPath
|
) > -1
|
? collectCheck
|
: collectImg
|
" @click="handleCollect()"></svgIcon>
|
</el-tooltip>
|
</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getResourcePath } from "@/assets/methods/resources";
|
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
|
import svgIcon from "@/components/svgIcon";
|
export default {
|
components: {
|
svgIcon
|
},
|
data() {
|
return {
|
collectImg: "heart",
|
collectCheck: "heart-check",
|
videoPathSrc: "",
|
collectResourceList: [],
|
localIsCollectVideo: false,
|
isDisplay: true,
|
videoName: this.videoInfo.resourceName
|
};
|
},
|
props: {
|
videoInfo: {
|
type: Object,
|
},
|
BookId: {
|
type: String,
|
required: "",// 默认值
|
},
|
},
|
async mounted() {
|
await this.getVidoePath();
|
this.collectResourceList = await getCollectResource(
|
this.BookId
|
);
|
},
|
methods: {
|
async getVidoePath() {
|
console.log(this.videoInfo, "this.videoInfo.md5");
|
this.videoPathSrc = await getResourcePath(
|
this.videoInfo.md5
|
);
|
},
|
|
handleCollect() {
|
debugger
|
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>
|
.knowledgeExpansionVideo {
|
margin: 30px 0;
|
padding: 10px 0;
|
/* 使用新的 --logo-color-rgb 变量 */
|
border-top: 10px solid rgba(var(--logo-color-rgb), 0.6);
|
border-bottom: 10px solid rgba(var(--logo-color-rgb), 0.6);
|
position: relative;
|
}
|
|
|
|
.questionBank-video {
|
position: relative;
|
line-height: 0px;
|
display: flex;
|
align-items: center;
|
top: -29px;
|
left: 30px;
|
|
svgIcon {
|
width: 13px;
|
}
|
|
span {
|
font-size: 14px;
|
font-weight: 600;
|
margin-left: 1px;
|
}
|
|
}
|
|
.knowledgeExpansion-video {
|
padding: 0 8%;
|
}
|
</style>
|
