From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/components/video/index.vue | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 177 insertions(+), 0 deletions(-)
diff --git a/src/components/video/index.vue b/src/components/video/index.vue
new file mode 100644
index 0000000..08afc56
--- /dev/null
+++ b/src/components/video/index.vue
@@ -0,0 +1,177 @@
+<template>
+ <div class="container">
+ <div class="videoBox">
+ <video
+ @canplay="getDuration"
+ @timeupdate="updateTime"
+ ref="audio"
+ controls
+ controlsList="nodownload"
+ autoplay
+ :src="videoSrc"
+ >
+ <!-- <source :src="videoSrc" type="video/mp4" ref="myPlayer" /> -->
+ </video>
+ </div>
+ <div class="calssInfo">
+ <el-tabs type="border-card">
+ <el-tab-pane label="璇剧▼绠�浠�">
+ <div class="tabItem" v-loading="descriptionLoading">
+ <div
+ class="richTextBox"
+ v-html="description.autism_introduction"
+ ></div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="绔犺妭鐩綍">
+ <div class="tabItem" v-loading="catalogueLoading">
+ <p v-for="(item, index) in catalogue" :key="index" class="selected">
+ {{ item.name }}
+ </p>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getImage } from "@/assets/js/toolClass";
+
+export default {
+ props: {
+ query: {
+ type: Object
+ },
+ idPath: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ videoSrc: "",
+ description: "",
+ catalogue: "",
+ descriptionLoading: true,
+ catalogueLoading: true
+ };
+ },
+ created() {
+ this.getData();
+ this.getCatalogue();
+ },
+ methods: {
+ // 鑾峰彇璇︽儏
+ getData() {
+ this.descriptionLoading = true;
+ let query = {
+ path: this.query.LinkPath,
+ fields: {
+ autism_introduction: [],
+ autism_totalDuration: []
+ },
+ filterList: {
+ "Id=": this.query.id
+ }
+ };
+ this.MG.resource.getItem(query).then((res) => {
+ this.description = res.datas[0];
+ this.descriptionLoading = false;
+ });
+ },
+ // 鑾峰彇鐩綍
+ getCatalogue() {
+ this.catalogueLoading = true;
+ let query = {
+ path: this.idPath,
+ fields: {
+ autism_video: [],
+ autism_introduction: [],
+ autism_totalDuration: []
+ },
+ filterList: {
+ "SysType=":"Cmsitem"
+ }
+ };
+ this.MG.resource.getItem(query).then((res) => {
+ this.catalogue = res.datas;
+ this.aliVod(this.catalogue[0].autism_video);
+ this.catalogueLoading = false;
+ });
+ },
+ // 鑾峰彇鍔犻�熷湴鍧�
+ aliVod(md5) {
+ let query = {
+ md5: md5,
+ appRefCode: this.config.appRefCode
+ };
+ this.MG.file.getAliVod(query).then((res) => {
+ if (res) {
+ this.videoSrc = res;
+ } else {
+ this.videoSrc = getImage(md5);
+ }
+ });
+ },
+ getDuration() {
+ this.audio = this.$refs.audio;
+ this.duration = this.timeFormat(this.$refs.audio.duration);
+ },
+ timeFormat(number) {
+ let minute = parseInt(number / 60);
+ let second = parseInt(number % 60);
+ minute = minute >= 10 ? minute : "0" + minute;
+ second = second >= 10 ? second : "0" + second;
+ return minute + ":" + second;
+ },
+ updateTime() {
+ if (!this.$refs.progress) return;
+ this.currentDuration = this.timeFormat(this.audio.currentTime);
+ //濡傛灉涓嶆槸姝ｅ湪绉诲姩 鍜� 娌℃湁鏆傚仠鎾斁灏辨墽琛�
+ if (!this.isMoveIn || !this.audio.paused) {
+ // 璁剧疆褰撳墠鏃堕棿
+ let MoveX =
+ this.$refs.progress.clientWidth *
+ (this.audio.currentTime / this.audio.duration);
+ //鎾斁鏃舵洿鏂拌窛绂�
+ this.$refs.currentProgress.style.width = MoveX + "px";
+ this.$refs.circle.style.left =
+ MoveX - this.$refs.circle.clientWidth / 2 + "px";
+ }
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.videoBox {
+ height: 657px;
+ width: 100%;
+ margin-top: 20px;
+}
+video {
+ width: 100%;
+ height: 100%;
+}
+.calssInfo {
+ margin-top: 20px;
+ height: 290px;
+ background-color: #e4e4e4;
+ margin-bottom: 20px;
+ padding: 30px;
+}
+.tabItem {
+ height: 220px;
+ .selected {
+ font-size: 14px;
+ color: #0079fe;
+ }
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+ background-color: rgba(0, 121, 254, 1);
+ color: #fff !important;
+}
+/deep/ .el-tabs__item {
+ font-size: 16px;
+}
+</style>
--
Gitblit v1.9.1