From 2e74e9db08e127525fcacde33f00bc3d1e0b8418 Mon Sep 17 00:00:00 2001
From: hb <hb@git.com>
Date: Sun, 27 Jul 2025 21:57:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B5=84=E6=BA=90=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/system/video-player/index.vue | 159 ++++++++++++++++++++++++
 src/pages/system/web-viewer/index.vue   | 111 +++++++++++++++++
 2 files changed, 270 insertions(+)
 create mode 100644 src/pages/system/video-player/index.vue
 create mode 100644 src/pages/system/web-viewer/index.vue

diff --git a/src/pages/system/video-player/index.vue b/src/pages/system/video-player/index.vue
new file mode 100644
index 0000000..7ba44f3
--- /dev/null
+++ b/src/pages/system/video-player/index.vue
@@ -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> 
\ No newline at end of file
diff --git a/src/pages/system/web-viewer/index.vue b/src/pages/system/web-viewer/index.vue
new file mode 100644
index 0000000..2b3e578
--- /dev/null
+++ b/src/pages/system/web-viewer/index.vue
@@ -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> 
\ No newline at end of file