lucky_shop/pages_tool/file-preview/file-preview.vue

<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">{{ $lang("tool.file-preview.l15.t0") }}</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">{{ $lang("tool.file-preview.l15.t0") }}</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">{{ $lang("common.ns-video-player-popup.l17.t0") }}</view>
            </view>
            
            <!-- 其他文件类型 -->
            <view v-else class="file-viewer">
                <view class="error-message">{{ $lang("tool.file-preview.l32.t0") }}</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>