视频交互题

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -255,7 +255,7 @@ export default {
       } else if (this.type === 'video' || this.type === 'video_interaction') {
         fileType = ['mp4'];
         typeTip = '视频文件只能是 mp4 格式!';
-      } else if (this.type === 'upload_preview') {
+      } else if (this.type === 'upload_preview' || this.type === 'video_interaction_file') {
         fileType = [
           'txt',
           'pdf',

src/views/book/courseware/create/components/question/video_interaction/VideoInteraction.vue

@@ -20,8 +20,49 @@
       />
       <div class="interaction-box" v-if="data.video_list.length > 0">
         <video id="interaction-video" :src="data.video_list[0].file_url" width="100%" height="400" controls></video>
-        <el-button type="primary" size="small">暂停视频上传文件</el-button>
+        <el-button type="primary" size="small" @click="handlePause">暂停视频上传文件</el-button>
+        <ul v-if="data.file_info_list.length > 0" class="file-list">
+          <li v-for="(file, i) in data.file_info_list" :key="i">
+            <div class="file-name">
+              <span>
+                <span>时间：{{ file.currentTime }}s</span>
+                <span>{{ file.file_name ?? file.name }}</span>
+              </span>
+            </div>
+            <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
+          </li>
+        </ul>
       </div>
+      <!-- 上传 -->
+      <el-dialog
+        :visible.sync="sourceAddFlag"
+        width="500px"
+        append-to-body
+        :show-close="true"
+        title="上传文件"
+        :close-on-click-modal="false"
+        class="module-content"
+      >
+        <UploadFile
+          v-if="sourceAddFlag"
+          key="upload_resources"
+          type="video_interaction_file"
+          :total-size="20000"
+          :file-list="file_list"
+          :file-id-list="file_id_list"
+          :label-text="''"
+          :accept-file-type="'*'"
+          :icon-class="''"
+          :limit="1"
+          :single-size="2000"
+          :upload-tip="''"
+          @updateFileList="updateFileLists"
+        />
+        <footer style="text-align: right">
+          <el-button @click="handleCancle">取 消</el-button>
+          <el-button :loading="loading" type="primary" @click="submitAdd">确 定</el-button>
+        </footer>
+      </el-dialog>
     </template>
   </ModuleBase>
 </template>
@@ -30,12 +71,11 @@
 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 },
+  components: { UploadFile },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -44,6 +84,11 @@ export default {
       acceptFileType: '.mp4',
       uploadTip: '支持上传mp4格式视频文件，单个视频文件最大2GB，总文件体积不超10GB。',
       iconClass: 'video',
+      sourceAddFlag: false,
+      file_list: [],
+      file_id_list: [],
+      loading: false,
+      currentTime: 0,
     };
   },
   watch: {
@@ -61,7 +106,10 @@ export default {
     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;
+      this.data.video_info_list = file_info_list;
+      if (file_list.length === 0) {
+        this.data.file_info_list = [];
+      }
     },
 
     handleData() {
@@ -82,6 +130,46 @@ export default {
       });
       this.data.mind_map.node_list = node_list;
     },
+    updateFileLists({ file_list, file_id_list }) {
+      this.file_list = file_list;
+      this.file_id_list = file_id_list;
+      if (file_list.length > 0 && file_list[0].file_id) {
+        let obj = file_list[0];
+        obj.currentTime = this.currentTime;
+        this.data.file_info_list.push(obj);
+        this.sourceAddFlag = false;
+      }
+    },
+    handleCancle() {
+      this.sourceAddFlag = false;
+      this.file_list = [];
+      this.file_id_list = [];
+    },
+    // 确定新增资源
+    submitAdd() {
+      this.loading = true;
+    },
+    // 暂停视频上传资源
+    handlePause() {
+      const video = document.getElementById('interaction-video');
+      video.pause();
+      this.currentTime = video.currentTime.toFixed(3);
+      this.file_list = [];
+      this.file_id_list = [];
+      this.sourceAddFlag = true;
+    },
+    // 删除文件
+    removeFile(file, i) {
+      this.$confirm('是否删除当前文件？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.data.file_info_list.splice(i, 1);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -118,4 +206,39 @@ export default {
 .interaction-box {
   padding: 10px 0;
 }
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin-top: 10px;
+
+  li {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+
+    .file-name {
+      display: flex;
+      column-gap: 14px;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 500px; // 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;
+    }
+  }
+}
 </style>