Otsuka-APP/utils/utils.js

// 格式化价格，保留两位小数
export const formatPrice = (value) => {
    if (!value && value !== 0) return '0.00'
    return Number(value).toFixed(2)
}

import { securityFileDownload } from '@/api/FileUpload/FileUpload.js';
import * as pdfjsLib from 'pdfjs-dist';

// 设置PDF.js worker路径（使用CDN）
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

// 存储当前页面的弹框实例
let popupInstance = null;
let styleInjected = false;

// 注入CSS样式
const injectPdfStyle = () => {
    if (styleInjected) return;
    
    const styleId = 'pdf_preview_style';
    if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;
        style.innerHTML = `
            .pdf-preview-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            .pdf-preview-container {
                width: 95vw;
                max-width: 900px;
                height: 90vh;
                background-color: #fff;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                animation: pdfFadeIn 0.3s;
            }
            @keyframes pdfFadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
            .pdf-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                border-bottom: 1px solid #eee;
                background-color: #fff;
            }
            .pdf-title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pdf-close {
                font-size: 28px;
                color: #999;
                cursor: pointer;
                padding: 0 8px;
                line-height: 1;
            }
            .pdf-close:hover {
                color: #333;
            }
            .pdf-content {
                flex: 1;
                background-color: #525659;
                position: relative;
                overflow: auto;
                padding: 20px;
                box-sizing: border-box;
            }
            .pdf-canvas-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            .pdf-page-canvas {
                width: 100%;
                height: auto;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                border-radius: 4px;
                background-color: white;
            }
            .pdf-footer {
                display: flex;
                justify-content: flex-end;
                padding: 12px 16px;
                border-top: 1px solid #eee;
                background-color: #fff;
            }
            .pdf-footer button {
                margin: 0 0 0 8px;
                min-width: 80px;
                padding: 8px 16px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                background-color: #fff;
                color: #606266;
                cursor: pointer;
                font-size: 14px;
            }
            .pdf-footer button:hover {
                background-color: #f5f7fa;
            }
            .pdf-footer button.primary {
                background-color: #409eff;
                color: #fff;
                border-color: #409eff;
            }
            .pdf-footer button.primary:hover {
                background-color: #66b1ff;
            }
            .pdf-loading {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 16px;
                text-align: center;
            }
            .pdf-pagination {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 12px;
                background-color: #fff;
                border-top: 1px solid #eee;
            }
            .pdf-pagination button {
                margin: 0 8px;
                padding: 4px 12px;
                border: 1px solid #dcdfe6;
                background-color: #fff;
                border-radius: 4px;
                cursor: pointer;
            }
            .pdf-pagination button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            .pdf-pagination span {
                margin: 0 8px;
                color: #606266;
            }
        `;
        document.head.appendChild(style);
        styleInjected = true;
    }
};

// H5环境：使用Canvas渲染PDF
const createH5Popup = (url, fileName) => {
    // 先关闭已存在的弹框
    if (popupInstance) {
        document.body.removeChild(popupInstance);
        popupInstance = null;
    }

    // 注入样式
    injectPdfStyle();

    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.className = 'pdf-preview-overlay';

    // 创建弹框容器
    const container = document.createElement('div');
    container.className = 'pdf-preview-container';

    // 创建头部
    const header = document.createElement('div');
    header.className = 'pdf-header';
    
    const title = document.createElement('span');
    title.className = 'pdf-title';
    title.textContent = fileName || 'PDF预览';
    
    const closeBtn = document.createElement('span');
    closeBtn.className = 'pdf-close';
    closeBtn.textContent = '×';
    closeBtn.onclick = () => {
        document.body.removeChild(overlay);
        if (url && url.startsWith('blob:')) {
            URL.revokeObjectURL(url);
        }
        popupInstance = null;
    };
    
    header.appendChild(title);
    // header.appendChild(closeBtn);

    // 创建内容区域
    const content = document.createElement('div');
    content.className = 'pdf-content';
    
    // 创建Canvas容器
    const canvasContainer = document.createElement('div');
    canvasContainer.className = 'pdf-canvas-container';
    content.appendChild(canvasContainer);
    
    // 添加加载提示
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'pdf-loading';
    loadingDiv.textContent = '正在加载PDF文档...';
    content.appendChild(loadingDiv);
    
    container.appendChild(header);
    container.appendChild(content);
    
    // 创建底部
    const footer = document.createElement('div');
    footer.className = 'pdf-footer';
    
    const closeFooterBtn = document.createElement('button');
    closeFooterBtn.textContent = '关闭';
    closeFooterBtn.onclick = closeBtn.onclick;
    
    const downloadBtn = document.createElement('button');
    downloadBtn.textContent = '下载';
    downloadBtn.className = 'primary';
    downloadBtn.onclick = () => {
        window.open(url);
    };
    
    // footer.appendChild(downloadBtn);
    footer.appendChild(closeFooterBtn);
    container.appendChild(footer);
    overlay.appendChild(container);
    document.body.appendChild(overlay);
    
    // 使用PDF.js渲染PDF
    pdfjsLib.getDocument(url).promise.then(pdf => {
        // 移除加载提示
        if (content.contains(loadingDiv)) {
            content.removeChild(loadingDiv);
        }
        
        // 添加分页控制器
        const paginationDiv = document.createElement('div');
        paginationDiv.className = 'pdf-pagination';
        
        let currentPage = 1;
        const totalPages = pdf.numPages;
        
        const prevBtn = document.createElement('button');
        prevBtn.textContent = '上一页';
        prevBtn.disabled = true;
        
        const nextBtn = document.createElement('button');
        nextBtn.textContent = '下一页';
        
        const pageInfo = document.createElement('span');
        pageInfo.textContent = `${currentPage} / ${totalPages}`;
        
        prevBtn.onclick = () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
                pageInfo.textContent = `${currentPage} / ${totalPages}`;
                prevBtn.disabled = currentPage === 1;
                nextBtn.disabled = currentPage === totalPages;
            }
        };
        
        nextBtn.onclick = () => {
            if (currentPage < totalPages) {
                currentPage++;
                renderPage(currentPage);
                pageInfo.textContent = `${currentPage} / ${totalPages}`;
                prevBtn.disabled = currentPage === 1;
                nextBtn.disabled = currentPage === totalPages;
            }
        };
        
        // paginationDiv.appendChild(prevBtn);
        // paginationDiv.appendChild(pageInfo);
        // paginationDiv.appendChild(nextBtn);
        // content.appendChild(paginationDiv);
        
        // 创建Canvas元素
        const canvas = document.createElement('canvas');
        canvas.className = 'pdf-page-canvas';
        canvasContainer.appendChild(canvas);
        
        // 渲染指定页面
        const renderPage = (pageNumber) => {
            pdf.getPage(pageNumber).then(page => {
                // 根据容器宽度计算缩放比例
                const containerWidth = content.clientWidth - 40; // 减去padding
                const viewport = page.getViewport({ scale: 1.0 });
                const scale = containerWidth / viewport.width;
                
                const scaledViewport = page.getViewport({ scale });
                
                canvas.height = scaledViewport.height;
                canvas.width = scaledViewport.width;
                
                const context = canvas.getContext('2d');
                
                const renderContext = {
                    canvasContext: context,
                    viewport: scaledViewport
                };
                
                return page.render(renderContext).promise;
            });
        };
        
        // 渲染第一页
        renderPage(1);
        
        // 监听窗口大小变化，重新渲染
        const resizeHandler = () => {
            renderPage(currentPage);
        };
        window.addEventListener('resize', resizeHandler);
        
        // 清理事件监听
        const originalClose = closeBtn.onclick;
        closeBtn.onclick = () => {
            window.removeEventListener('resize', resizeHandler);
            originalClose.call(closeBtn);
        };
        
    }).catch(error => {
        console.error('PDF渲染失败:', error);
        if (content.contains(loadingDiv)) {
            content.removeChild(loadingDiv);
        }
        content.innerHTML = `
            <div style="display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:20px; text-align:center;">
                <div style="color:#f56c6c; font-size:18px; margin-bottom:16px;">
                    <span style="display:block; margin-bottom:8px;">⚠️ PDF预览失败</span>
                </div>
                <div style="color:#999; font-size:14px; margin-bottom:24px; max-width:80%; word-break:break-all;">
                    ${error.message || '未知错误'}
                </div>
                <button onclick="window.open('${url}')" 
                    style="padding:12px 32px; background-color:#409eff; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:16px; font-weight:500;">
                    下载PDF文件
                </button>
            </div>
        `;
    });

    popupInstance = overlay;

    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
            closeBtn.onclick();
        }
    });

    return overlay;
};

// APP环境：保存Blob到临时文件
const saveBlobToFile = (blob, fileName) => {
    return new Promise((resolve, reject) => {
        // #ifdef APP-PLUS
        const reader = new FileReader();
        reader.onload = (e) => {
            const base64Data = e.target.result.split(',')[1];
            const filePath = '_doc/' + Date.now() + '_' + fileName;
            plus.io.writeFile({
                filename: filePath,
                data: base64Data,
                success: () => {
                    resolve(filePath);
                },
                fail: (err) => {
                    reject(err);
                }
            });
        };
        reader.onerror = (err) => {
            reject(err);
        };
        reader.readAsDataURL(blob);
        // #endif
        // #ifndef APP-PLUS
        reject(new Error('非APP环境'));
        // #endif
    });
};

// APP环境：使用本地文件预览
const createAppPopup = (filePath, fileName) => {
    // #ifdef APP-PLUS
    if (popupInstance) {
        popupInstance.close();
        popupInstance = null;
    }

    const popupId = 'pdf_preview_' + Date.now();
    
    const html = `<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                background-color: #fff;
                height: 100vh;
                display: flex;
                flex-direction: column;
            }
            .pdf-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                border-bottom: 1px solid #eee;
                background-color: #fff;
            }
            .pdf-title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pdf-close {
                font-size: 28px;
                color: #999;
                cursor: pointer;
                padding: 0 8px;
            }
            .pdf-content {
                flex: 1;
                background-color: #525659;
                overflow: auto;
                padding: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .pdf-canvas {
                width: 100%;
                height: auto;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                border-radius: 4px;
                margin-bottom: 20px;
            }
            .pdf-footer {
                display: flex;
                justify-content: flex-end;
                padding: 12px 16px;
                border-top: 1px solid #eee;
                background-color: #fff;
            }
            .pdf-footer button {
                margin: 0 0 0 8px;
                min-width: 80px;
                padding: 8px 16px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                background-color: #fff;
                color: #606266;
                font-size: 14px;
                cursor: pointer;
            }
            .pdf-footer button.primary {
                background-color: #409eff;
                color: #fff;
                border-color: #409eff;
            }
            .pdf-loading {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div class="pdf-header">
            <span class="pdf-title">${fileName || 'PDF预览'}</span>
            <span class="pdf-close" onclick="closePopup()">×</span>
        </div>
        <div class="pdf-content" id="pdfContent">
            <div class="pdf-loading" id="loading">正在加载PDF...</div>
        </div>
        <div class="pdf-footer">
            <button onclick="downloadFile()" class="primary">下载</button>
            <button onclick="closePopup()">关闭</button>
        </div>
        <script>
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
            
            const url = '${filePath}';
            const content = document.getElementById('pdfContent');
            const loading = document.getElementById('loading');
            
            pdfjsLib.getDocument(url).promise.then(pdf => {
                loading.style.display = 'none';
                
                const renderPage = (pageNumber) => {
                    pdf.getPage(pageNumber).then(page => {
                        const containerWidth = content.clientWidth - 40;
                        const viewport = page.getViewport({ scale: 1.0 });
                        const scale = containerWidth / viewport.width;
                        
                        const scaledViewport = page.getViewport({ scale });
                        
                        const canvas = document.createElement('canvas');
                        canvas.className = 'pdf-canvas';
                        canvas.height = scaledViewport.height;
                        canvas.width = scaledViewport.width;
                        
                        const context = canvas.getContext('2d');
                        
                        const renderContext = {
                            canvasContext: context,
                            viewport: scaledViewport
                        };
                        
                        page.render(renderContext).promise.then(() => {
                            content.appendChild(canvas);
                            
                            // 渲染下一页
                            if (pageNumber < pdf.numPages) {
                                renderPage(pageNumber + 1);
                            }
                        });
                    });
                };
                
                renderPage(1);
            }).catch(error => {
                loading.style.display = 'none';
                content.innerHTML = '<div style="color:#f56c6c; text-align:center; padding:40px;">PDF加载失败<br><br><button onclick="downloadFile()" style="padding:8px 24px; background:#409eff; color:#fff; border:none; border-radius:4px;">下载文件</button></div>';
            });
            
            function closePopup() {
                plus.webview.currentWebview().close();
            }
            
            function downloadFile() {
                plus.runtime.openWeb('${filePath}');
            }
        <\/script>
    </body>
    </html>`;

    const webview = plus.webview.create('', popupId, {
        top: '10vh',
        left: '5vw',
        width: '90vw',
        height: '80vh',
        scrollIndicator: 'none',
        backgroundColor: '#ffffff',
        borderRadius: '12px',
        mask: 'rgba(0,0,0,0.5)'
    });
    
    webview.loadHTML(html);
    webview.show();
    popupInstance = webview;
    
    return webview;
    // #endif
};

// 主函数
export const YuLanfile = async (filePath, returnUrlOnly = false) => {
    if (!filePath) {
        uni.showToast({ title: '文件路径不存在', icon: 'none' })
        return
    }
    
    try {
        uni.showLoading({ title: '加载中...', mask: true })
        
        const response = await securityFileDownload({
            fileName: filePath,
            delete: false
        })
        
        // 转换为 Blob
        let blob;
        if (response instanceof ArrayBuffer) {
            blob = new Blob([response], { type: 'application/pdf' });
        } else if (response instanceof Blob) {
            blob = response;
        } else {
            try {
                const uint8Array = new Uint8Array(response.length);
                for (let i = 0; i < response.length; i++) {
                    uint8Array[i] = response.charCodeAt(i) & 0xFF;
                }
                blob = new Blob([uint8Array], { type: 'application/pdf' });
            } catch (e) {
                throw new Error('无法转换文件格式');
            }
        }
        
        // 获取文件名
        const fileName = filePath.split('\\').pop() || 'document.pdf';
        
        // #ifdef H5
        // H5环境：创建本地文件URL
        const url = URL.createObjectURL(blob);
        
        if (returnUrlOnly) {
            uni.hideLoading();
            return url;
        }
        
        // 使用Canvas渲染PDF
        createH5Popup(url, fileName);
        uni.hideLoading();
        return url;
        // #endif
        
        // #ifdef APP-PLUS
        // APP环境：保存到临时文件
        const tempFilePath = await saveBlobToFile(blob, fileName);
        if (returnUrlOnly) {
            uni.hideLoading();
            return tempFilePath;
        }
        createAppPopup(tempFilePath, fileName);
        uni.hideLoading();
        return tempFilePath;
        // #endif
        
        // #ifdef MP-WEIXIN
        // 微信小程序：使用wx.openDocument
        const wxUrl = URL.createObjectURL(blob);
        const fs = wx.getFileSystemManager();
        const tempFilePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '_' + fileName;
        
        // 将blob转换为ArrayBuffer
        const arrayBuffer = await blob.arrayBuffer();
        
        fs.writeFile({
            filePath: tempFilePath,
            data: arrayBuffer,
            encoding: 'binary',
            success: () => {
                wx.openDocument({
                    filePath: tempFilePath,
                    showMenu: true,
                    success: () => {
                        URL.revokeObjectURL(wxUrl);
                    },
                    fail: (err) => {
                        console.error('打开文档失败:', err);
                        uni.showToast({ title: '打开文件失败', icon: 'none' });
                        URL.revokeObjectURL(wxUrl);
                    }
                });
            },
            fail: (err) => {
                console.error('写入文件失败:', err);
                uni.showToast({ title: '文件处理失败', icon: 'none' });
                URL.revokeObjectURL(wxUrl);
            }
        });
        uni.hideLoading();
        return tempFilePath;
        // #endif
        
    } catch (error) {
        console.error('文件预览失败:', error);
        uni.hideLoading();
        uni.showToast({ title: '文件加载失败', icon: 'none' });
        throw error;
    }
}