|
@@ -0,0 +1,120 @@
|
|
|
+<template>
|
|
|
+ <ModuleBase :type="data.type">
|
|
|
+ <template #content>
|
|
|
+ <UploadFile
|
|
|
+ key="upload_image"
|
|
|
+ :courseware-id="courseware_id"
|
|
|
+ :component-id="id"
|
|
|
+ :type="data.type"
|
|
|
+ :total-size="data.total_size"
|
|
|
+ :file-list="data.video_list"
|
|
|
+ :file-id-list="data.video_info_list"
|
|
|
+ :file-info-list="data.video_id_list"
|
|
|
+ :label-text="labelText"
|
|
|
+ :accept-file-type="acceptFileType"
|
|
|
+ :icon-class="iconClass"
|
|
|
+ :upload-tip="uploadTip"
|
|
|
+ :limit="1"
|
|
|
+ :single-size="500"
|
|
|
+ @updateFileList="updateFileList"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </ModuleBase>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ModuleMixin from '../../common/ModuleMixin';
|
|
|
+import UploadFile from '../../base/common/UploadFile.vue';
|
|
|
+import { getVideoInteractionData } from '@/views/book/courseware/data/videoInteraction';
|
|
|
+import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
|
|
|
+import { GetFileURLMap } from '@/api/app';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'VideoInteractionPage',
|
|
|
+ components: { UploadFile, SelectUpload },
|
|
|
+ mixins: [ModuleMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: getVideoInteractionData(),
|
|
|
+ labelText: '视频',
|
|
|
+ acceptFileType: '.mp4',
|
|
|
+ uploadTip: '支持上传mp4格式视频文件,单个视频文件最大2GB,总文件体积不超10GB。',
|
|
|
+ iconClass: 'video',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'data.video_list': {
|
|
|
+ handler(val) {
|
|
|
+ if (val.length > 0) {
|
|
|
+ this.handleData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ 'data.property.file_list': 'handleMindMap',
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateFileList({ file_list, file_id_list, file_info_list }) {
|
|
|
+ this.data.video_list = file_list;
|
|
|
+ this.data.video_id_list = file_id_list;
|
|
|
+ this.data.video_id_list = file_info_list;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleData() {
|
|
|
+ this.data.video_list.forEach((item) => {
|
|
|
+ GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
|
|
|
+ this.$set(item, 'file_url', url_map[item.file_id]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleMindMap() {
|
|
|
+ // 思维导图数据
|
|
|
+ let node_list = [];
|
|
|
+ this.data.file_list.forEach((item) => {
|
|
|
+ node_list.push({
|
|
|
+ name: item.file_name,
|
|
|
+ id: Math.random().toString(36).substring(2, 12),
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.data.mind_map.node_list = node_list;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.upload-file {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ margin: 8px 0;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ max-width: 360px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d2129;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.image-size {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+</style>
|