视频预览

src/views/content_manage/course_manage/CreateRecorded.vue

@@ -128,10 +128,21 @@
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item label="课程视频" prop="videoResource" v-if="organizeForm.courseType===0">
-                            <upload :datafileList="createCourseForm.videoResource" :changeFillId="handleAvatarSuccess" :fileName="'courseVideo'" uploadType="mp4" :filleNumber="1" />
+                            <upload :datafileList="createCourseForm.videoResource" :changeFillId="handleAvatarSuccess" :fileName="'courseVideo'" uploadType="mp4" :filleNumber="1" :showList="true" />
+                            <div class="viedo-preview" :style="{height:createCourseForm.videoResource.length>0?'288px':'0px'}">
+                                <div class="video-item">
+                                    <div class="video" id="video-box"></div>
+                                </div>
+                                <a @click="handleDelCourseResource()"><i class="el-icon-delete"></i></a>
+                            </div>
+                            
                         </el-form-item>
                         <el-form-item label="课程音频" prop="audioResource" v-else>
-                            <upload :datafileList="createCourseForm.audioResource" :changeFillId="handleAvatarSuccess" :fileName="'courseAudio'" uploadType="mp3" :filleNumber="1" />
+                            <upload :datafileList="createCourseForm.audioResource" :changeFillId="handleAvatarSuccess" :fileName="'courseAudio'" uploadType="mp3" :filleNumber="1" :showList="true" />
+                            <li v-for="(itemR,indexR) in createCourseForm.audioResource" :key="indexR">
+                                <a @click="handlePreview(itemR)"><svg-icon icon-class="mp3" class="icon-logo"></svg-icon><span>{{itemR.name}}</span></a>
+                                <i class="el-icon-delete" @click="handleDelCourseResource()"></i>
+                            </li>
                         </el-form-item>
                         <el-form-item label="课节信息" prop="intro">
                             <Editor
@@ -217,7 +228,8 @@ import "tinymce/plugins/colorpicker";
 import { getLogin } from "@/api/ajax";
 const Base64 = require("js-base64").Base64;
 import { mapState } from 'vuex';
-
+import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css';
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -360,7 +372,8 @@ export default {
         resourceUrl: '', // 课节资源预览地址
         resourceFlag: false,
         file_preview_url: 'https://docpreview.utschool.cn',
-        loading: false
+        loading: false,
+        player: null,
     }
   },
   //计算属性 类似于data概念
@@ -423,6 +436,14 @@ export default {
             this.createCourseForm.videoResource = fileList
             this.createCourseForm.file_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
             this.createCourseForm.file_url = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_url:''
+            this.player = new Player({
+                id: 'video-box',
+                url: this.createCourseForm.file_url,
+                width: '100%',
+                height: '100%',
+                cssFullscreen: false,
+                poster: '', // 封面图
+            });
         }else if(name==='courseAudio'){
             this.createCourseForm.audioResource = fileList
             this.createCourseForm.file_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
@@ -478,6 +499,7 @@ export default {
             intro:'',
             resource:[]
         }
+        this.player.destroy()
     },
     // 保存课节
     handleSaveCourse(formName){
@@ -678,7 +700,11 @@ export default {
                 form.audioResource = res.lb_course_cs_item.file_id?[{
                     id:res.lb_course_cs_item.file_id,
                     name:'123'
-                }]:[]
+                }]:[],
+                form.videoResource = res.lb_course_cs_item.file_id?[{
+                    id:res.lb_course_cs_item.file_id,
+                    name:'123'
+                }]:[],
                 form.intro = res.lb_course_cs_item.intro
                 res.resource_file_list.forEach(item=>{
                     item.name = item.file_name
@@ -687,12 +713,28 @@ export default {
                     item.type = this.handleJudgeType(type)
                 })
                 form.resource = res.resource_file_list
+                this.player = new Player({
+                    id: 'video-box',
+                    url: res.lb_course_cs_item.file_url,
+                    width: '100%',
+                    height: '100%',
+                    cssFullscreen: false,
+                    poster: '', // 封面图
+                });
             }
         })
         .catch(() => {
             this.loading = false
         });
     },
+    // 删除课程视频/音频
+    handleDelCourseResource(){
+        this.createCourseForm.audioResource = []
+        this.createCourseForm.videoResource = []
+        this.createCourseForm.file_id = ''
+        this.createCourseForm.file_url = ''
+        this.player.destroy()
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -838,6 +880,27 @@ export default {
         }
     }
 }
+.viedo-preview{
+    height: 288px;
+    display: flex;
+    align-items: flex-end;
+    overflow: hidden;
+    .video-item{
+        width: 500px;
+        height: 288px;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #EBEBEB;
+        background: #FFF;
+    }
+    >a{
+        padding: 8px;
+        border-radius: 2px;
+        border: 1px solid #E5E6EB;
+        line-height: 16px;
+        margin-left: 10px;
+    }
+}
 </style>
 
 <style lang="scss">