新增资源预览
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