1/* 2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16<template> 17 <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleOk" @visible-change="visibleChange" 18 @cancel="handleCancel" :width="700" :can-fullscreen="false" :show-cancel-btn="false" :show-ok-btn="false"> 19 <div class="content"> 20 <span class="title">{{ video.name }}</span> 21 <span class="remark">{{ video.remark }}</span> 22 <videoPlay ref="playRef" v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" 23 @canplay="onCanplay" /> 24 <div class="footer"> 25 <a-button class="btn" @click="handleNoPass">不通过</a-button> 26 <a-button class="btn" type="primary" @click="handlePass">通过</a-button> 27 </div> 28 </div> 29 </BasicModal> 30</template> 31<script lang="ts" setup> 32import 'vue3-video-play/dist/style.css'; 33import { videoPlay } from 'vue3-video-play'; 34import { reactive, computed, ref } from 'vue'; 35import { BasicModal, useModalInner } from '/@/components/Modal'; 36import { saveOrUpdate } from './video.api'; 37import { getFileAccessHttpUrl } from '/@/utils/common/compUtils'; 38 39// 声明Emits 40const emit = defineEmits(['success', 'register']); 41let video = reactive({ name: '', status: 0 }); 42const playRef = ref(null); 43// 表单赋值 44const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { 45 setModalProps({ confirmLoading: false }); 46 video = data.record; 47 options.src = getFileAccessHttpUrl(data.record?.url); 48}); 49// 设置标题 50const getTitle = computed(() => ('审核')); 51const options = reactive({ 52 width: '100%', // 播放器 53 color: '#409eff', // 主题色 54 muted: false, // 静音 55 webFullScreen: false, 56 speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], // 播放倍速 57 autoPlay: false, // 自动播放 58 loop: false, // 循环播放 59 mirror: false, // 镜像画面 60 ligthOff: false, // 关灯模式 61 volume: 0.3, // 默认音量大小 62 control: true, // 是否显示控制器 63 title: '', // 视频名称 64 src: '', // 视频源 65 poster: '', // 封面 66 fit: 'contain' 67}); 68 69const onPlay = (ev) => { 70 console.log(ev, '播放'); 71}; 72 73const onPause = (ev) => { 74 console.log(ev, '暂停'); 75}; 76 77const onTimeupdate = (ev) => { 78 console.log(ev, '时间更新'); 79}; 80 81const onCanplay = (ev) => { 82 console.log(ev, '可以播放'); 83}; 84 85// 表单提交事件 86async function handleOk() { 87 try { 88 // 关闭弹窗 89 closeModal(); 90 // 刷新列表 91 emit('success'); 92 } finally { 93 setModalProps({ confirmLoading: false }); 94 } 95} 96 97async function handleCancel() { 98 try { 99 // 关闭弹窗 100 closeModal(); 101 } finally { 102 setModalProps({ confirmLoading: false }); 103 } 104} 105 106async function handleNoPass() { 107 // 提交表单 108 video.status = 2; 109 await saveOrUpdate(video, true); 110 handleOk(); 111} 112 113async function handlePass() { 114 // 提交表单 115 video.status = 1; 116 await saveOrUpdate(video, true); 117 handleOk(); 118} 119 120function visibleChange() { 121 const play = playRef.value; 122 if (play) { 123 play.pause(); 124 } 125} 126</script> 127 128<style lang="less" scoped> 129.content { 130 display: flex; 131 width: 100%; 132 height: 100%; 133 justify-content: center; 134 align-items: center; 135 flex-direction: column; 136} 137 138.title { 139 font-size: 16px; 140 font-weight: 500; 141 margin-bottom: 10px; 142} 143 144.remark { 145 font-size: 12px; 146 font-weight: 500; 147 color: #999; 148 margin-bottom: 10px; 149} 150 151.footer { 152 width: 100%; 153 display: flex; 154 align-items: center; 155 justify-content: center; 156 margin-top: 20px; 157 158 .btn { 159 margin-left: 10px; 160 margin-right: 10px; 161 } 162} 163</style> 164