puge
/
bankCard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量导入 - 自助开卡系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-credit-card"></i> 自助开卡系统</h1>
            <div class="header-actions">
                <a href="/" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </header>

        <main>
            <h2><i class="fas fa-file-import"></i> 批量导入开卡申请</h2>
            
            <div class="import-instructions">
                <div class="instruction-card">
                    <h3><i class="fas fa-info-circle"></i> 导入说明</h3>
                    <p>请上传包含开卡申请数据的CSV或TXT文件。文件格式要求：</p>
                    <ul>
                        <li>文件应为制表符或逗号分隔的文本文件</li>
                        <li>每行包含一条完整的申请记录</li>
                        <li>字段顺序应与示例数据一致</li>
                        <li>系统会自动识别字段分隔符</li>
                    </ul>
                    
                    <div class="sample-data">
                        <h4><i class="fas fa-table"></i> 示例数据格式</h4>
                        <pre>David   Comstick   7801 caber way   Antelope   CA   95843   d.comstock@bellsouth.net     384209422   C88824C200   CA   9163323221   9163323221   5000   WELLS FARGO   93253120   657420543   USA   SYHDUYE873</pre>
                        <p class="note"><i class="fas fa-lightbulb"></i> 注意：字段顺序必须保持一致，空字段用空白表示</p>
                    </div>
                </div>
                
                <div class="import-form-card">
                    <h3><i class="fas fa-upload"></i> 上传文件</h3>
                    <form id="import-form" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="file-input">选择文件</label>
                            <input type="file" id="file-input" name="file" accept=".csv,.txt" required>
                            <p class="file-help">支持CSV或TXT格式，最大16MB</p>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" id="import-btn">
                                <i class="fas fa-upload"></i> 开始导入
                            </button>
                            <div id="loading-spinner" class="spinner" style="display: none;">
                                <i class="fas fa-spinner fa-spin"></i> 正在导入，请稍候...
                            </div>
                        </div>
                    </form>
                    
                    <div id="import-result" class="result-area"></div>
                </div>
            </div>
            
            <div class="back-to-home">
                <a href="/" class="btn btn-secondary">
                    <i class="fas fa-home"></i> 返回首页
                </a>
            </div>
        </main>

        <footer>
            <p>自助开卡系统 &copy; 2026</p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script>
        // 导入页面特定的JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            const importForm = document.getElementById('import-form');
            const fileInput = document.getElementById('file-input');
            const importBtn = document.getElementById('import-btn');
            const loadingSpinner = document.getElementById('loading-spinner');
            const resultArea = document.getElementById('import-result');
            
            importForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const file = fileInput.files[0];
                if (!file) {
                    resultArea.innerHTML = '<div class="alert alert-danger">请选择要上传的文件</div>';
                    return;
                }
                
                // 检查文件类型
                const fileExt = file.name.split('.').pop().toLowerCase();
                if (!['csv', 'txt'].includes(fileExt)) {
                    resultArea.innerHTML = '<div class="alert alert-danger">只支持CSV或TXT格式的文件</div>';
                    return;
                }
                
                // 显示加载状态
                importBtn.disabled = true;
                loadingSpinner.style.display = 'block';
                resultArea.innerHTML = '';
                
                // 创建FormData对象
                const formData = new FormData();
                formData.append('file', file);
                
                // 发送上传请求
                fetch('/import', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(result => {
                    // 恢复按钮状态
                    importBtn.disabled = false;
                    loadingSpinner.style.display = 'none';
                    
                    if (result.success) {
                        resultArea.innerHTML = `<div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> ${result.message}
                            <p>3秒后自动返回首页...</p>
                        </div>`;
                        
                        // 3秒后跳转回首页
                        setTimeout(() => {
                            window.location.href = '/';
                        }, 3000);
                    } else {
                        resultArea.innerHTML = `<div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> ${result.message}
                        </div>`;
                    }
                })
                .catch(error => {
                    // 恢复按钮状态
                    importBtn.disabled = false;
                    loadingSpinner.style.display = 'none';
                    
                    resultArea.innerHTML = `<div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
                    </div>`;
                });
            });
        });
    </script>
</body>
</html>