puge
/
bankCard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<!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="/bankAdm" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </header>

        <main class="detail-page">
            <h2><i class="fas fa-id-card"></i> 申请详情</h2>
            
            <div class="detail-actions">
                <button id="edit-toggle" class="btn btn-primary">
                    <i class="fas fa-edit"></i> 编辑信息
                </button>
                <button id="save-btn" class="btn btn-success" style="display: none;">
                    <i class="fas fa-save"></i> 保存更改
                </button>
                <button id="cancel-edit" class="btn btn-secondary" style="display: none;">
                    <i class="fas fa-times"></i> 取消编辑
                </button>
            </div>
            
            <form id="application-form" class="detail-form">
                <!-- 基本信息 -->
                <div class="form-section">
                    <h3><i class="fas fa-user"></i> 基本信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="first_name">名</label>
                            <input type="text" id="first_name" name="first_name" 
                                   value="{{ application.first_name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="last_name">姓</label>
                            <input type="text" id="last_name" name="last_name" 
                                   value="{{ application.last_name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">出生日期</label>
                            <input type="date" id="date_of_birth" name="date_of_birth" 
                                   value="{{ application.date_of_birth or '' }}" readonly>
                        </div>
                    </div>
                </div>
                
                <!-- 联系信息 -->
                <div class="form-section">
                    <h3><i class="fas fa-address-book"></i> 联系信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" id="email" name="email" 
                                   value="{{ application.email }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="phone">电话</label>
                            <input type="text" id="phone" name="phone" 
                                   value="{{ application.phone }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="cell_phone">手机</label>
                            <input type="text" id="cell_phone" name="cell_phone" 
                                   value="{{ application.cell_phone }}" readonly>
                        </div>
                    </div>
                </div>
                
                <!-- 地址信息 -->
                <div class="form-section">
                    <h3><i class="fas fa-home"></i> 地址信息</h3>
                    <div class="form-group">
                        <label for="address">地址</label>
                        <input type="text" id="address" name="address" 
                               value="{{ application.address }}" readonly>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="city">城市</label>
                            <input type="text" id="city" name="city" 
                                   value="{{ application.city }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="state">州/省</label>
                            <input type="text" id="state" name="state" 
                                   value="{{ application.state }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="zip_code">邮政编码</label>
                            <input type="text" id="zip_code" name="zip_code" 
                                   value="{{ application.zip_code }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="country">国家</label>
                            <input type="text" id="country" name="country" 
                                   value="{{ application.country }}" readonly>
                        </div>
                    </div>
                </div>
                
                <!-- 身份信息 -->
                <div class="form-section">
                    <h3><i class="fas fa-id-badge"></i> 身份信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="ssn">社会保障号</label>
                            <input type="text" id="ssn" name="ssn" 
                                   value="{{ application.ssn }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="dl_number">驾驶证号码</label>
                            <input type="text" id="dl_number" name="dl_number" 
                                   value="{{ application.dl_number }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="dl_state">驾驶证颁发州</label>
                            <input type="text" id="dl_state" name="dl_state" 
                                   value="{{ application.dl_state }}" readonly>
                        </div>
                    </div>
                </div>
                
                <!-- 银行信息 -->
                <div class="form-section">
                    <h3><i class="fas fa-university"></i> 银行信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="bank_name">银行名称</label>
                            <input type="text" id="bank_name" name="bank_name" 
                                   value="{{ application.bank_name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="bank_account">银行账号</label>
                            <input type="text" id="bank_account" name="bank_account" 
                                   value="{{ application.bank_account }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="iban_number">IBAN号码</label>
                            <input type="text" id="iban_number" name="iban_number" 
                                   value="{{ application.iban_number }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="amount_requested">申请金额</label>
                            <input type="number" step="0.01" id="amount_requested" name="amount_requested" 
                                   value="{{ application.amount_requested }}" readonly>
                        </div>
                    </div>
                </div>

                <!-- 卡号信息（如果存在） -->
                <div class="form-section">
                    <h3><i class="fas fa-credit-card"></i> 卡号信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="card_number">信用卡号</label>
                            <input type="text" id="card_number" name="card_number" 
                                value="{{ application.card_number }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="cvc">安全码 (CVC)</label>
                            <input type="text" id="cvc" name="cvc" 
                                value="{{ application.cvc }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="expiration_date">有效期</label>
                            <input type="text" id="expiration_date" name="expiration_date" 
                                value="{{ application.expiration_date }}" readonly>
                        </div>
                    </div>
                </div>

                <!-- 错误信息（如果存在） -->
                {% if application.application_state == '出错' and application.error_reason %}
                <div class="form-section error-section">
                    <h3><i class="fas fa-exclamation-triangle"></i> 错误信息</h3>
                    <div class="form-group">
                        <pre id="error_reason" name="error_reason" readonly rows="3">{{ application.error_reason }}</pre>
                    </div>
                </div>
                {% endif %}
                
                <!-- 验证与状态 -->
                <div class="form-section">
                    <h3><i class="fas fa-shield-alt"></i> 验证与状态</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="verification_code">验证码</label>
                            <input type="text" id="verification_code" name="verification_code" 
                                   value="{{ application.verification_code }}" readonly>
                        </div>
                        <div class="form-group">
                            <label for="application_state">申请状态</label>
                            <select id="application_state" name="application_state" disabled>
                                <option value="待设置" {% if application.application_state == '待设置' %}selected{% endif %}>待设置</option>
                                <option value="待执行" {% if application.application_state == '待执行' %}selected{% endif %}>待执行</option>
                                <option value="处理中" {% if application.application_state == '处理中' %}selected{% endif %}>处理中</option>
                                <option value="已完成" {% if application.application_state == '已完成' %}selected{% endif %}>已完成</option>
                                <option value="出错" {% if application.application_state == '出错' %}selected{% endif %}>出错</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 元数据 -->
                <div class="form-section">
                    <h3><i class="fas fa-info-circle"></i> 系统信息</h3>
                    <div class="metadata">
                        <p><strong>申请ID:</strong> {{ application.id }}</p>
                        <p><strong>创建时间:</strong> {{ application.created_at }}</p>
                        <p><strong>最后更新:</strong> {{ application.updated_at }}</p>
                    </div>
                </div>
            </form>
            
            <div id="message-area"></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 editToggle = document.getElementById('edit-toggle');
            const saveBtn = document.getElementById('save-btn');
            const cancelBtn = document.getElementById('cancel-edit');
            const form = document.getElementById('application-form');
            const inputs = form.querySelectorAll('input, select');
            const messageArea = document.getElementById('message-area');
            const appId = {{ application.id }};
            
            let originalValues = {};
            
            // 保存原始值
            inputs.forEach(input => {
                if (input.type !== 'button' && input.type !== 'submit') {
                    originalValues[input.id] = input.value;
                }
            });
            
            // 启用编辑模式
            editToggle.addEventListener('click', function() {
                inputs.forEach(input => {
                    if (input.id !== 'application_state') {
                        input.readOnly = false;
                        input.disabled = false;
                    }
                });
                
                // 特别处理下拉菜单
                const stateSelect = document.getElementById('application_state');
                stateSelect.disabled = false;
                
                editToggle.style.display = 'none';
                saveBtn.style.display = 'inline-block';
                cancelBtn.style.display = 'inline-block';
                
                messageArea.innerHTML = '';
            });
            
            // 取消编辑
            cancelBtn.addEventListener('click', function() {
                inputs.forEach(input => {
                    if (input.id in originalValues) {
                        input.value = originalValues[input.id];
                    }
                    input.readOnly = true;
                    input.disabled = true;
                });
                
                // 特别处理下拉菜单
                const stateSelect = document.getElementById('application_state');
                stateSelect.disabled = true;
                
                editToggle.style.display = 'inline-block';
                saveBtn.style.display = 'none';
                cancelBtn.style.display = 'none';
                
                messageArea.innerHTML = '<div class="alert alert-info">编辑已取消</div>';
            });
            
            // 保存更改
            saveBtn.addEventListener('click', function() {
                const formData = new FormData(form);
                
                // 转换为普通对象
                const data = {};
                formData.forEach((value, key) => {
                    data[key] = value;
                });
                
                // 发送更新请求
                fetch(`/edit/${appId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        // 更新成功，重新设置原始值
                        inputs.forEach(input => {
                            if (input.id in data) {
                                originalValues[input.id] = data[input.id];
                            }
                            input.readOnly = true;
                            input.disabled = true;
                        });
                        
                        // 特别处理下拉菜单
                        const stateSelect = document.getElementById('application_state');
                        stateSelect.disabled = true;
                        
                        editToggle.style.display = 'inline-block';
                        saveBtn.style.display = 'none';
                        cancelBtn.style.display = 'none';
                        
                        messageArea.innerHTML = '<div class="alert alert-success">申请信息已成功更新</div>';
                    } else {
                        messageArea.innerHTML = `<div class="alert alert-danger">更新失败: ${result.message}</div>`;
                    }
                })
                .catch(error => {
                    messageArea.innerHTML = `<div class="alert alert-danger">网络错误: ${error}</div>`;
                });
            });
        });
    </script>
</body>
</html>