更新

src/components/col-upload-video/index.tsx

@@ -88,12 +88,16 @@ export default defineComponent({
           this.responseList.push(this.tempUrls[uploadFile.uid])
         }
         // 说明已经上传完成
+        // console.log(uploadFiles, 'uploadFiles')
+        // console.log(this.responseList, 'responseList')
         if (uploadFiles.length === this.responseList.length) {
           this.btnLoading = false
           this.multipleModel(this.responseList)
+          this.responseList = [] as any
+          this.fileList = [] as any
         }
       } else {
-        let url = this.ossUploadUrl + '/' + this.dataObj.key
+        const url = this.ossUploadUrl + '/' + this.dataObj.key
         this.$emit('update:modelValue', url)
       }
     },
@@ -102,6 +106,8 @@ export default defineComponent({
     },
     handleChange() {
       console.log('handleChange')
+      // this.responseList = []
+      // this.tempUrls = []
     },
     handleProgress(e) {
       console.log('handleProgress', e)

src/components/col-video/index.tsx

@@ -20,6 +20,14 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    progress: {
+      type: Boolean,
+      default: true
+    },
+    volume: {
+      type: Boolean,
+      default: true
+    },
     styleValue: {
       type: Object,
       default: () => ({})
@@ -58,15 +66,19 @@ export default defineComponent({
       //   'fullscreen' ,  // 切换全屏
       // ] ;
       // 'current-time',
-      let controls = [
+      const controls = [
         'play-large',
         'play',
-        'progress',
         'captions',
         'fullscreen',
-        'duration',
-        'volume',
+        'duration'
       ]
+      if (this.progress) {
+        controls.push('progress')
+      }
+      if (this.volume) {
+        controls.push('volume')
+      }
       this.player = new Plyr((this as any).$refs.video, {
         controls: controls,
         ...this.setting

src/views/user-info/video-operation/course-content/index.module.less

@@ -10,5 +10,11 @@
     .el-dialog__footer {
       background-color: #f6f8f9;
     }
+
+    .plyr {
+      width: 150px;
+      height: 85px;
+      min-width: auto;
+    }
   }
 }

src/views/user-info/video-operation/course-content/index.tsx

@@ -22,6 +22,7 @@ import styles from './index.module.less'
 import iconDown from '../images/icon_down.png'
 import iconUp from '../images/icon_up.png'
 import iconDelete from '../images/icon_delete.png'
+import ColVideo from '@/components/col-video'
 
 export default defineComponent({
   name: 'course-content',
@@ -120,14 +121,16 @@ export default defineComponent({
           model={createState}
         >
           <ElFormItem label="课程视频" required>
-            <ColUploadVideo
-              multiple
-              limit={3}
-              bucket="video-course"
-              multipleModel={(urls: any) => {
-                this.handleUpload(urls)
-              }}
-            />
+            <div>
+              <ColUploadVideo
+                multiple
+                limit={3}
+                bucket="video-course"
+                multipleModel={(urls: any) => {
+                  this.handleUpload(urls)
+                }}
+              />
+            </div>
             {/* <ElInput placeholder="请输入课程名称" /> */}
           </ElFormItem>
           {createState.lessonList.map((item: any, index: number) => (
@@ -198,10 +201,18 @@ export default defineComponent({
               <ElRow>
                 <ElCol span={10}>
                   <ElFormItem label={`第${index + 1}课`}>
-                    <ColUploadVideo
+                    {/* <ColUploadVideo
                       v-model:modelValue={item.videoUrl}
                       disabled
+                    /> */}
+                    <ColVideo
+                      styleValue={{ with: '150px', height: '85px' }}
+                      controls={false}
+                      src={item.videoUrl}
+                      // progress={false}
+                      volume={false}
                     />
+                    <p></p>
                   </ElFormItem>
                 </ElCol>
                 <ElCol span={10}>