feat(页面): 新增文件预览页面

2026-01-12 15:28:04 +08:00
parent 8b01d8f8ec
commit ce26a9be5f
2 changed files with 198 additions and 9 deletions
--- a/pages_tool/file-preview/file-preview.vue
+++ b/pages_tool/file-preview/file-preview.vue
@@ -0,0 +1,183 @@
+<template>
+    <view class="file-preview-container" :style="themeColor">
+        <view class="header">
+            <view class="back-btn" @click="goBack">
+                <text class="iconfont icon-back"></text>
+            </view>
+            <view class="header-title">{{ fileName }}</view>
+            <view class="placeholder"></view>
+        </view>
+        
+        <view class="content">
+            <!-- PDF 文件预览 -->
+            <view v-if="fileType === 'pdf'" class="file-viewer">
+                <web-view v-if="fileUrl" :src="fileUrl"></web-view>
+                <view v-else class="error-message">文件地址不存在</view>
+            </view>
+            
+            <!-- Word 文件预览 -->
+            <view v-else-if="fileType === 'word'" class="file-viewer">
+                <web-view v-if="fileUrl" :src="fileUrl"></web-view>
+                <view v-else class="error-message">文件地址不存在</view>
+            </view>
+            
+            <!-- 视频文件预览 -->
+            <view v-else-if="fileType === 'video'" class="video-viewer">
+                <video v-if="fileUrl" :src="fileUrl" controls autoplay class="video-player"></video>
+                <view v-else class="error-message">视频地址不存在</view>
+            </view>
+            
+            <!-- 其他文件类型 -->
+            <view v-else class="file-viewer">
+                <view class="error-message">不支持的文件类型</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            fileName: '',
+            fileUrl: '',
+            fileType: ''
+        };
+    },
+    onLoad(option) {
+        // 解析传递的参数
+        if (option.fileName) {
+            this.fileName = decodeURIComponent(option.fileName);
+        }
+        
+        if (option.fileUrl) {
+            this.fileUrl = decodeURIComponent(option.fileUrl);
+        }
+        
+        if (option.fileType) {
+            this.fileType = decodeURIComponent(option.fileType);
+        } else {
+            // 根据文件名后缀推断文件类型
+            this.inferFileType();
+        }
+    },
+    methods: {
+        /**
+         * 根据文件名后缀推断文件类型
+         */
+        inferFileType() {
+            if (this.fileName) {
+                const ext = this.fileName.split('.').pop().toLowerCase();
+                if (['pdf'].includes(ext)) {
+                    this.fileType = 'pdf';
+                } else if (['doc', 'docx'].includes(ext)) {
+                    this.fileType = 'word';
+                } else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
+                    this.fileType = 'video';
+                }
+            }
+        },
+        
+        /**
+         * 返回上一页
+         */
+        goBack() {
+            uni.navigateBack();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.file-preview-container {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 100rpx;
+        padding: 0 30rpx;
+        background-color: #fff;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        
+        .back-btn {
+            width: 60rpx;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            .icon-back {
+                font-size: 32rpx;
+                color: #333;
+            }
+        }
+        
+        .header-title {
+            flex: 1;
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #333;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        
+        .placeholder {
+            width: 60rpx;
+        }
+    }
+    
+    .content {
+        flex: 1;
+        padding: 20rpx;
+        
+        .file-viewer {
+            width: 100%;
+            min-height: 80vh;
+            background-color: #fff;
+            border-radius: 12rpx;
+            overflow: hidden;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+            
+            .error-message {
+                width: 100%;
+                height: 80vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #999;
+                font-size: 28rpx;
+            }
+        }
+        
+        .video-viewer {
+            width: 100%;
+            min-height: 80vh;
+            background-color: #000;
+            border-radius: 12rpx;
+            overflow: hidden;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+            
+            .video-player {
+                width: 100%;
+                height: 80vh;
+            }
+            
+            .error-message {
+                width: 100%;
+                height: 80vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #999;
+                font-size: 28rpx;
+                background-color: #000;
+            }
+        }
+    }
+}
+</style>