From 2ca7f1e9d3ff3c54ec5d10688a33c628ec296f8b Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期一, 12 五月 2025 10:22:42 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 244 insertions(+), 0 deletions(-)
diff --git a/src/books/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue b/src/books/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue
new file mode 100644
index 0000000..05ee0bd
--- /dev/null
+++ b/src/books/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue
@@ -0,0 +1,244 @@
+<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>
--
Gitblit v1.9.1