新增资源预览
This commit is contained in:
hb
parent
e5a8d7e322
commit
2e74e9db08
159
src/pages/system/video-player/index.vue
Normal file
159
src/pages/system/video-player/index.vue
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<view class="video-player-page">
|
||||||
|
<view class="player-header">
|
||||||
|
<view class="header-left">
|
||||||
|
<u-icon name="arrow-left" size="20" @click="goBack"></u-icon>
|
||||||
|
<text class="header-title">{{ videoTitle }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="video-container">
|
||||||
|
<video
|
||||||
|
:src="videoUrl"
|
||||||
|
:poster="posterUrl"
|
||||||
|
:title="videoTitle"
|
||||||
|
controls
|
||||||
|
show-center-play-btn
|
||||||
|
show-play-btn
|
||||||
|
show-fullscreen-btn
|
||||||
|
show-progress
|
||||||
|
enable-progress-gesture
|
||||||
|
@error="handleVideoError"
|
||||||
|
@fullscreenchange="handleFullscreenChange"
|
||||||
|
@play="handleVideoPlay"
|
||||||
|
@pause="handleVideoPause"
|
||||||
|
@ended="handleVideoEnded"
|
||||||
|
class="video-player"
|
||||||
|
></video>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="video-info">
|
||||||
|
<view class="info-title">{{ videoTitle }}</view>
|
||||||
|
<view class="info-desc" v-if="videoDesc">{{ videoDesc }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
|
|
||||||
|
const videoUrl = ref('');
|
||||||
|
const videoTitle = ref('视频播放');
|
||||||
|
const videoDesc = ref('');
|
||||||
|
const posterUrl = ref('');
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
if (options.url) {
|
||||||
|
videoUrl.value = decodeURIComponent(options.url);
|
||||||
|
}
|
||||||
|
if (options.title) {
|
||||||
|
videoTitle.value = decodeURIComponent(options.title);
|
||||||
|
}
|
||||||
|
if (options.desc) {
|
||||||
|
videoDesc.value = decodeURIComponent(options.desc);
|
||||||
|
}
|
||||||
|
if (options.poster) {
|
||||||
|
posterUrl.value = decodeURIComponent(options.poster);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('视频播放URL:', videoUrl.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVideoError = (e) => {
|
||||||
|
console.error('视频播放错误:', e);
|
||||||
|
uni.showToast({
|
||||||
|
title: '视频播放失败，请检查网络连接',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFullscreenChange = (e) => {
|
||||||
|
console.log('全屏状态变化:', e.detail.fullScreen);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVideoPlay = () => {
|
||||||
|
console.log('视频开始播放');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVideoPause = () => {
|
||||||
|
console.log('视频暂停');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVideoEnded = () => {
|
||||||
|
console.log('视频播放结束');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.video-player-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
max-width: 400rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-player {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-info {
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-desc {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
111
src/pages/system/web-viewer/index.vue
Normal file
111
src/pages/system/web-viewer/index.vue
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<view class="web-viewer">
|
||||||
|
<view class="viewer-header">
|
||||||
|
<view class="header-left">
|
||||||
|
<u-icon name="arrow-left" size="20" @click="goBack"></u-icon>
|
||||||
|
<text class="header-title">{{ pageTitle }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="header-right">
|
||||||
|
<u-button size="mini" @click="refreshPage">刷新</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<web-view
|
||||||
|
:src="previewUrl"
|
||||||
|
@message="handleMessage"
|
||||||
|
@error="handleError"
|
||||||
|
class="viewer-content"
|
||||||
|
></web-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
|
|
||||||
|
const previewUrl = ref('');
|
||||||
|
const pageTitle = ref('文件预览');
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
if (options.url) {
|
||||||
|
previewUrl.value = decodeURIComponent(options.url);
|
||||||
|
}
|
||||||
|
if (options.title) {
|
||||||
|
pageTitle.value = decodeURIComponent(options.title);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Web-View预览URL:', previewUrl.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshPage = () => {
|
||||||
|
// 重新加载页面
|
||||||
|
const currentUrl = previewUrl.value;
|
||||||
|
previewUrl.value = '';
|
||||||
|
setTimeout(() => {
|
||||||
|
previewUrl.value = currentUrl;
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMessage = (e) => {
|
||||||
|
console.log('Web-view消息:', e.detail);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleError = (e) => {
|
||||||
|
console.error('Web-view错误:', e.detail);
|
||||||
|
uni.showToast({
|
||||||
|
title: '预览加载失败，请检查网络连接',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.web-viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1rpx solid #e0e0e0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
max-width: 400rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-content {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user