赵忠林
4af50e6449
- 调整 import 语句格式，统一空格和引号风格 - 修复函数参数跨行时的格式对齐问题 - 清理多余空行和注释中的空白字符 - 统一对象属性结尾逗号的使用规范 - 规范化字符串拼接和模板语法的格式 - 优化长参数列表的换行和缩进格式
126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<!-- 角色编辑弹窗 -->
|
||
<template>
|
||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||
<a-card :bordered="false">
|
||
<div class="w-[700px]">
|
||
<ele-xg-player
|
||
:config="{
|
||
id: 'demoPlayer1',
|
||
lang: 'zh-cn',
|
||
fluid: true,
|
||
// 视频地址
|
||
url: form.path,
|
||
// 封面
|
||
poster: '',
|
||
// 开启倍速播放
|
||
playbackRate: [0.5, 1, 1.5, 2],
|
||
// 开启画中画
|
||
pip: true
|
||
}"
|
||
@player="onPlayer1"
|
||
/>
|
||
</div>
|
||
<a-space direction="vertical" class="mt-5">
|
||
<div class="ele-text-secondary"> 文件名称：{{ form.name }} </div>
|
||
<div class="ele-text-secondary"> 文件路径：{{ form.path }} </div>
|
||
<div class="ele-text-secondary"> 视频描述：{{ form.comments }} </div>
|
||
</a-space>
|
||
</a-card>
|
||
</a-page-header>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, watch, unref } from 'vue';
|
||
import Player from 'xgplayer';
|
||
import { useRouter } from 'vue-router';
|
||
import { toDateString } from 'ele-admin-pro';
|
||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||
import { message } from 'ant-design-vue/es';
|
||
import useFormData from '@/utils/use-form-data';
|
||
import { FileRecord } from '@/api/system/file/model';
|
||
import { getFile } from '@/api/system/file';
|
||
|
||
const { currentRoute } = useRouter();
|
||
import { getPageTitle } from '@/utils/common';
|
||
|
||
const ROUTE_PATH = '/cms/video/player';
|
||
|
||
// 视频播放器一实例
|
||
let player1: Player;
|
||
// 视频播放器一是否实例化完成
|
||
const ready1 = ref(false);
|
||
|
||
// 视频播放器一配置
|
||
const config1 = reactive({
|
||
id: 'demoPlayer1',
|
||
lang: 'zh-cn',
|
||
fluid: true,
|
||
// 视频地址
|
||
url: 'https://file.wsdns.cn/20221126/cf17ef352db54bf28efeda268107714f.mp4',
|
||
// 封面
|
||
poster:
|
||
'https://file.wsdns.cn/20221125/49f0c461d61e48f28b324366a0a63a2e.jpg',
|
||
// 开启倍速播放
|
||
playbackRate: [0.5, 1, 1.5, 2],
|
||
// 开启画中画
|
||
pip: true
|
||
});
|
||
|
||
/* 播放器一渲染完成 */
|
||
const onPlayer1 = (player: Player) => {
|
||
player1 = player;
|
||
player1.on('play', () => {
|
||
ready1.value = true;
|
||
});
|
||
};
|
||
// 视频信息
|
||
const { form, assignFields } = useFormData<FileRecord>({
|
||
id: 0,
|
||
name: '',
|
||
url: '',
|
||
path: '',
|
||
comments: '',
|
||
createNickname: '',
|
||
createTime: ''
|
||
});
|
||
// 请求状态
|
||
const loading = ref(true);
|
||
/* */
|
||
const query = () => {
|
||
const { query } = unref(currentRoute);
|
||
const id = query.id;
|
||
if (!id || form.id === Number(id)) {
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
getFile(Number(id))
|
||
.then((data) => {
|
||
loading.value = false;
|
||
assignFields({
|
||
...data,
|
||
createTime: toDateString(data.createTime)
|
||
});
|
||
// 修改页签标题
|
||
if (unref(currentRoute).path === ROUTE_PATH) {
|
||
setPageTabTitle(String(data.comments));
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
loading.value = false;
|
||
message.error(e.message);
|
||
});
|
||
};
|
||
|
||
watch(
|
||
currentRoute,
|
||
(route) => {
|
||
const { path } = unref(route);
|
||
if (path !== ROUTE_PATH) {
|
||
return;
|
||
}
|
||
query();
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
</script>
|