新增动态预览视频

src/components/VideoPreview/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import main from './src'
+
+const testComponent = Vue.extend(main)
+
+export default function (src) {
+  const extendComponent = new testComponent({
+    data() {
+      return {
+        src,
+      }
+    },
+  }).$mount()
+  document.body.appendChild(extendComponent.$el)
+}

src/components/VideoPreview/src/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="video-box">
+    <video :src="src" class="video" controls autoplay></video>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: '',
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.video-box {
+  position: fixed;
+  inset: 0;
+  background-color: rgba($color: #000000, $alpha: 0.325);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .video {
+    width: 50%;
+  }
+}
+</style>

src/views/shortVideo/index.vue

@@ -25,18 +25,34 @@
           <el-col :span="1.5">
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
           </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']"
+              >删除</el-button
+            >
+          </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
         <!--列表数据模块-->
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="ID" align="center" prop="id" />
           <el-table-column label="视频标题" align="center" prop="title" />
           <el-table-column label="视频描述" align="center" prop="videoDescribe" />
-          <el-table-column label="视频预览" align="center" width="300px">
+          <!-- <el-table-column label="视频预览" align="center" width="300px">
             <template slot-scope="scope">
               <video :src="scope.row.fileUrl" class="videoPreview" :poster="scope.row.coverFileUrl" controls preload="meta"></video>
             </template>
+          </el-table-column> -->
+          <el-table-column label="视频封面" align="center" width="200px">
+            <template slot-scope="scope">
+              <div>
+                <el-card :body-style="{ padding: '0 0 5px' }">
+                  <img :src="scope.row.coverFileUrl" class="imgPreview" />
+                  <el-button type="primary" size="mini" @click="videoPreview(scope.row.fileUrl)" :disabled="!scope.row.fileUrl">预览视频</el-button>
+                </el-card>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column label="视频时长" align="center" prop="videoDuration">
             <template slot-scope="scope">
@@ -53,7 +69,7 @@
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"
                 >修改</el-button
@@ -139,6 +155,7 @@
 import shortVideoApi from '@/api/stortVideo/index'
 import { vodSignature } from '@/api/upload'
 import TcVod from 'vod-js-sdk-v6'
+import VideoPreview from '@/components/VideoPreview/index'
 
 export default {
   name: 'stortVideo',
@@ -179,29 +196,32 @@ export default {
       form: {},
       defaultProps: {
         children: 'children',
-        label: 'typeName'
+        label: 'typeName',
       },
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 表单校验
       rules: {
-        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
-      }
+        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+      },
     }
   },
   async created() {
     this.tcVod = new TcVod({
-      getSignature: vodSignature
+      getSignature: vodSignature,
     })
     this.getList()
-    this.getDicts('sys_normal_disable').then(response => {
+    this.getDicts('sys_normal_disable').then((response) => {
       this.statusOptions = response.data
     })
   },
   methods: {
+    videoPreview(videoSrc) {
+      VideoPreview(videoSrc)
+    },
     /** 查询短视频列表 */
     async getList() {
       this.loading = true
@@ -220,12 +240,12 @@ export default {
       }
       this.videoPercentage = 0
       const uploader = this.tcVod.upload({
-        mediaFile: this.mediaFile // 媒体文件（视频或音频或图片），类型为 File
+        mediaFile: this.mediaFile, // 媒体文件（视频或音频或图片），类型为 File
       })
-      uploader.on('media_progress', info => {
+      uploader.on('media_progress', (info) => {
         this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
       })
-      uploader.done().then(doneResult => {
+      uploader.done().then((doneResult) => {
         this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
       })
     },
@@ -236,7 +256,7 @@ export default {
       let formData = new FormData()
       formData.append('coverFile', this.coverFile)
       formData.append('fileId', this.form.vodVideoFileId)
-      const { data } = await shortVideoApi.uploadCover(formData, e => {
+      const { data } = await shortVideoApi.uploadCover(formData, (e) => {
         this.imagePercentage = Math.floor((e.loaded / e.total) * 100 * 100) / 100
       })
       this.$set(this.form, 'coverFileId', data.fileId)
@@ -248,7 +268,7 @@ export default {
         await this.$confirm(`确认要 ${text} ${row.title}吗?`, '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning'
+          type: 'warning',
         })
         await shortVideoApi.changeUserStatus(row.id, row.shelfStatus)
       } catch (error) {
@@ -281,7 +301,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId)
+      this.ids = selection.map((item) => item.id)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
@@ -301,7 +321,7 @@ export default {
     },
     /** 提交按钮 */
     async submitForm() {
-      this.$refs['form'].validate(valid => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.id != undefined) {
             const data = {
@@ -309,9 +329,9 @@ export default {
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId
+              coverFileId: this.form.coverFileId,
             }
-            shortVideoApi.updateVideo(data).then(response => {
+            shortVideoApi.updateVideo(data).then((response) => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
@@ -322,9 +342,9 @@ export default {
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId
+              coverFileId: this.form.coverFileId,
             }
-            shortVideoApi.addVideo(data).then(response => {
+            shortVideoApi.addVideo(data).then((response) => {
               this.msgSuccess('新增成功')
               this.open = false
               this.getList()
@@ -340,13 +360,13 @@ export default {
         await this.$confirm(`是否删除ID为${ids}的短视频`, '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning'
+          type: 'warning',
         })
         await shortVideoApi.delVideo(ids)
         this.getList()
       } catch (error) {}
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -355,4 +375,7 @@ export default {
   object-fit: contain;
   height: 180px;
 }
+.imgPreview {
+  width: 100%;
+}
 </style>