编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>农资小程序 - 身份选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #1a5f2a 0%, #2d8a3e 50%, #3ca850 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #ffffff;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0,0,0,0.4);
            position: relative;
        }
        
        .screen {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            display: none;
            flex-direction: column;
        }
        
        .screen.active {
            display: flex;
        }
        
        /* 首页样式 */
        .home-screen {
            background: linear-gradient(180deg, #1a5f2a 0%, #2d8a3e 40%, #f5f5f5 40%);
        }
        
        .home-header {
            padding: 60px 30px 40px;
            text-align: center;
            color: white;
        }
        
        .home-header .logo {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 20px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .home-header .logo svg {
            width: 50px;
            height: 50px;
        }
        
        .home-header h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .home-header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .home-content {
            flex: 1;
            background: #f5f5f5;
            padding: 30px 25px;
        }
        
        .home-content h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .role-cards {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .role-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: 2px solid transparent;
        }
        
        .role-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        
        .role-card:active {
            transform: scale(0.98);
        }
        
        .role-card.selected {
            border-color: #2d8a3e;
            background: linear-gradient(135deg, rgba(45,138,62,0.05) 0%, rgba(45,138,62,0.1) 100%);
        }
        
        .role-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .role-icon.dealer {
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
        }
        
        .role-icon.coop {
            background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
        }
        
        .role-icon svg {
            width: 32px;
            height: 32px;
            fill: white;
        }
        
        .role-info {
            flex: 1;
        }
        
        .role-info h3 {
            font-size: 17px;
            color: #333;
            margin-bottom: 6px;
        }
        
        .role-info p {
            font-size: 13px;
            color: #888;
            line-height: 1.4;
        }
        
        .role-arrow {
            width: 24px;
            height: 24px;
            fill: #ccc;
        }
        
        .next-btn {
            margin-top: 30px;
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 15px 40px;
            font-size: 17px;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(45,138,62,0.3);
        }
        
        .next-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45,138,62,0.4);
        }
        
        .next-btn:disabled {
            background: #ccc;
            box-shadow: none;
            cursor: not-allowed;
        }
        
        /* 资质上传页面 */
        .upload-screen {
            background: #f5f5f5;
        }
        
        .page-header {
            background: white;
            padding: 50px 20px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            transition: background 0.2s;
        }
        
        .back-btn:hover {
            background: #f0f0f0;
        }
        
        .back-btn svg {
            width: 24px;
            height: 24px;
            fill: #333;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
        }
        
        .page-content {
            padding: 20px;
            flex: 1;
        }
        
        .role-badge {
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .role-badge.coop {
            background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
        }
        
        .role-badge svg {
            width: 16px;
            height: 16px;
            fill: white;
        }
        
        .section-title {
            font-size: 16px;
            color: #333;
            font-weight: 600;
            margin: 25px 0 15px;
        }
        
        .upload-tips {
            background: #fff9e6;
            border: 1px solid #ffe58f;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .upload-tips h4 {
            font-size: 14px;
            color: #d48806;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .upload-tips h4 svg {
            width: 16px;
            height: 16px;
            fill: #d48806;
        }
        
        .upload-tips ul {
            font-size: 12px;
            color: #8c6d1f;
            padding-left: 20px;
            line-height: 1.8;
        }
        
        .upload-area {
            background: white;
            border: 2px dashed #ddd;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .upload-area:hover {
            border-color: #2d8a3e;
            background: rgba(45,138,62,0.02);
        }
        
        .upload-area.has-file {
            border-style: solid;
            border-color: #2d8a3e;
            background: rgba(45,138,62,0.05);
        }
        
        .upload-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .upload-icon svg {
            width: 30px;
            height: 30px;
            fill: #999;
        }
        
        .upload-area.has-file .upload-icon {
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
        }
        
        .upload-area.has-file .upload-icon svg {
            fill: white;
        }
        
        .upload-text {
            font-size: 15px;
            color: #333;
            margin-bottom: 5px;
        }
        
        .upload-hint {
            font-size: 12px;
            color: #999;
        }
        
        .file-preview {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 10px;
            text-align: left;
        }
        
        .upload-area.has-file .file-preview {
            display: block;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: white;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .file-item:last-child {
            margin-bottom: 0;
        }
        
        .file-icon {
            width: 40px;
            height: 40px;
            background: #e3f2fd;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .file-icon svg {
            width: 24px;
            height: 24px;
            fill: #1976D2;
        }
        
        .file-info {
            flex: 1;
        }
        
        .file-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 2px;
        }
        
        .file-size {
            font-size: 12px;
            color: #999;
        }
        
        .file-remove {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            transition: background 0.2s;
        }
        
        .file-remove:hover {
            background: #ffebee;
        }
        
        .file-remove svg {
            width: 20px;
            height: 20px;
            fill: #f44336;
        }
        
        .upload-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .submit-btn {
            margin: 30px 0;
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 15px 40px;
            font-size: 17px;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(45,138,62,0.3);
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45,138,62,0.4);
        }
        
        .submit-btn:disabled {
            background: #ccc;
            box-shadow: none;
            cursor: not-allowed;
        }
        
        /* 提交成功页面 */
        .success-screen {
            background: white;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 40px;
        }
        
        .success-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            animation: successPulse 1s ease-out;
        }
        
        @keyframes successPulse {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .success-icon svg {
            width: 50px;
            height: 50px;
            fill: white;
        }
        
        .success-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .success-desc {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        
        .success-info {
            background: #f5f5f5;
            border-radius: 12px;
            padding: 20px;
            text-align: left;
            margin-bottom: 30px;
        }
        
        .success-info h4 {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .success-info p {
            font-size: 15px;
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .success-info p svg {
            width: 18px;
            height: 18px;
            fill: #2d8a3e;
        }
        
        .entry-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #2d8a3e 100%);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 15px 60px;
            font-size: 17px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(45,138,62,0.3);
        }
        
        .entry-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45,138,62,0.4);
        }
        
        /* 隐藏文件输入 */
        .hidden-input {
            display: none;
        }
        
        /* 动画 */
        .fade-in {
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 底部安全区 */
        .safe-area {
            height: 34px;
            background: white;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div id="homeScreen" class="screen home-screen active">
            <div class="home-header">
                <div class="logo">
                    <svg viewBox="0 0 24 24" fill="#2d8a3e">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <h1>农资服务平台</h1>
                <p>选择您的身份，开始使用</p>
            </div>
            <div class="home-content">
                <h2>请选择您的身份类型</h2>
                <div class="role-cards">
                    <div class="role-card" onclick="selectRole('dealer')" data-role="dealer">
                        <div class="role-icon dealer">
                            <svg viewBox="0 0 24 24">
                                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-4H8v-2h2V9h2v2h2v2h-2v4zm3-8V7h2v2h-2z"/>
                            </svg>
                        </div>
                        <div class="role-info">
                            <h3>农资经销商</h3>
                            <p>销售种子、化肥、农药等农资产品</p>
                        </div>
                        <svg class="role-arrow" viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </div>
                    <div class="role-card" onclick="selectRole('coop')" data-role="coop">
                        <div class="role-icon coop">
                            <svg viewBox="0 0 24 24">
                                <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                            </svg>
                        </div>
                        <div class="role-info">
                            <h3>农业合作社</h3>
                            <p>农业生产组织，提供农业服务</p>
                        </div>
                        <svg class="role-arrow" viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </div>
                </div>
                <button class="next-btn" id="nextBtn" disabled onclick="goToUpload()">下一步</button>
            </div>
        </div>
        
        <!-- 资质上传页面 -->
        <div id="uploadScreen" class="screen upload-screen">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()">
                    <svg viewBox="0 0 24 24">
                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                    </svg>
                </div>
                <div class="page-title">上传资质证明</div>
                <div style="width: 40px;"></div>
            </div>
            <div class="page-content">
                <div class="role-badge" id="roleBadge">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                    <span id="roleBadgeText">农资经销商</span>
                </div>
                
                <h3 class="section-title">请上传以下资质文件</h3>
                
                <div class="upload-tips">
                    <h4>
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                        </svg>
                        温馨提示
                    </h4>
                    <ul id="uploadTipsList">
                        <li>请上传清晰、完整的证件照片</li>
                        <li>支持 JPG、PNG 格式</li>
                        <li>单个文件不超过 5MB</li>
                    </ul>
                </div>
                
                <div class="upload-list" id="uploadList">
                    <!-- 动态生成上传区域 -->
                </div>
                
                <button class="submit-btn" id="submitBtn" disabled onclick="submitQualification()">提交认证</button>
            </div>
            <div class="safe-area"></div>
        </div>
        
        <!-- 提交成功页面 -->
        <div id="successScreen" class="screen success-screen">
            <div class="success-icon">
                <svg viewBox="0 0 24 24">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                </svg>
            </div>
            <h2 class="success-title">提交成功！</h2>
            <p class="success-desc">您的资质正在审核中<br>审核结果将在1-3个工作日内通知您</p>
            <div class="success-info">
                <h4>温馨提示</h4>
                <p>
                    <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    审核通过后可使用全部功能
                </p>
                <p>
                    <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    请保持联系方式畅通
                </p>
                <p>
                    <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    可随时查看审核进度
                </p>
            </div>
            <button class="entry-btn" onclick="goToHome()">返回首页</button>
        </div>
    </div>

    <script>
        // 当前选中的角色
        let selectedRole = null;
        // 已上传的文件
        let uploadedFiles = {};
        // 需要的资质文件列表
        const qualifications = {
            dealer: [
                { id: 'business_license', name: '营业执照', required: true },
                { id: 'food_operation', name: '食品经营许可证', required: true },
                { id: 'pesticide_permit', name: '农药经营许可证', required: true }
            ],
            coop: [
                { id: 'business_license', name: '营业执照', required: true },
                { id: 'coop_certificate', name: '农民专业合作社法人营业执照', required: true },
                { id: 'organization_code', name: '组织机构代码证', required: false }
            ]
        };

        // 选择角色
        function selectRole(role) {
            selectedRole = role;
            // 更新UI
            document.querySelectorAll('.role-card').forEach(card => {
                card.classList.remove('selected');
            });
            document.querySelector(`[data-role="${role}"]`).classList.add('selected');
            document.getElementById('nextBtn').disabled = false;
        }

        // 跳转到上传页面
        function goToUpload() {
            if (!selectedRole) return;
            
            // 更新角色标识
            const badge = document.getElementById('roleBadge');
            const badgeText = document.getElementById('roleBadgeText');
            
            if (selectedRole === 'dealer') {
                badge.classList.remove('coop');
                badgeText.textContent = '农资经销商';
                badge.querySelector('svg').innerHTML = '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-4H8v-2h2V9h2v2h2v2h-2v4zm3-8V7h2v2h-2z"/>';
            } else {
                badge.classList.add('coop');
                badgeText.textContent = '农业合作社';
                badge.querySelector('svg').innerHTML = '<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/>';
            }
            
            // 更新提示信息
            const tipsList = document.getElementById('uploadTipsList');
            if (selectedRole === 'dealer') {
                tipsList.innerHTML = `
                    <li>请上传清晰、完整的证件照片</li>
                    <li>支持 JPG、PNG 格式</li>
                    <li>单个文件不超过 5MB</li>
                    <li>农药经营许可证为必须上传</li>
                `;
            } else {
                tipsList.innerHTML = `
                    <li>请上传清晰、完整的证件照片</li>
                    <li>支持 JPG、PNG 格式</li>
                    <li>单个文件不超过 5MB</li>
                    <li>营业执照为必须上传</li>
                `;
            }
            
            // 生成上传区域
            generateUploadAreas();
            
            // 切换页面
            document.getElementById('homeScreen').classList.remove('active');
            document.getElementById('uploadScreen').classList.add('active');
            document.getElementById('uploadScreen').classList.add('fade-in');
        }

        // 生成上传区域
        function generateUploadAreas() {
            const uploadList = document.getElementById('uploadList');
            uploadList.innerHTML = '';
            uploadedFiles = {};
            
            const qualList = qualifications[selectedRole];
            qualList.forEach(qual => {
                const area = document.createElement('div');
                area.className = 'upload-area';
                area.id = `upload-${qual.id}`;
                area.onclick = () => document.getElementById(`input-${qual.id}`).click();
                
                area.innerHTML = `
                    <div class="upload-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                    </div>
                    <div class="upload-text">${qual.name}${qual.required ? '（必填）' : '（选填）'}</div>
                    <div class="upload-hint">点击上传</div>
                    <div class="file-preview" id="preview-${qual.id}"></div>
                    <input type="file" class="hidden-input" id="input-${qual.id}" 
                           accept="image/*" onchange="handleFileSelect('${qual.id}', this)">
                `;
                
                uploadList.appendChild(area);
            });
            
            checkSubmitStatus();
        }

        // 处理文件选择
        function handleFileSelect(qualId, input) {
            const file = input.files[0];
            if (!file) return;
            
            // 验证文件大小
            if (file.size > 5 * 1024 * 1024) {
                alert('文件大小不能超过5MB');
                input.value = '';
                return;
            }
            
            // 验证文件类型
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!allowedTypes.includes(file.type)) {
                alert('仅支持 JPG、PNG 格式');
                input.value = '';
                return;
            }
            
            // 存储文件信息
            uploadedFiles[qualId] = {
                name: file.name,
                size: file.size,
                type: file.type
            };
            
            // 更新UI
            const area = document.getElementById(`upload-${qualId}`);
            const preview = document.getElementById(`preview-${qualId}`);
            
            area.classList.add('has-file');
            preview.innerHTML = `
                <div class="file-item">
                    <div class="file-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                        </svg>
                    </div>
                    <div class="file-info">
                        <div class="file-name">${file.name}</div>
                        <div class="file-size">${formatFileSize(file.size)}</div>
                    </div>
                    <div class="file-remove" onclick="removeFile('${qualId}', event)">
                        <svg viewBox="0 0 24 24">
                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                        </svg>
                    </div>
                </div>
            `;
            
            checkSubmitStatus();
        }

        // 移除文件
        function removeFile(qualId, event) {
            event.stopPropagation();
            delete uploadedFiles[qualId];
            
            const area = document.getElementById(`upload-${qualId}`);
            const preview = document.getElementById(`preview-${qualId}`);
            
            area.classList.remove('has-file');
            preview.innerHTML = '';
            document.getElementById(`input-${qualId}`).value = '';
            
            checkSubmitStatus();
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        }

        // 检查提交按钮状态
        function checkSubmitStatus() {
            const qualList = qualifications[selectedRole];
            const requiredQuals = qualList.filter(q => q.required);
            
            const allRequired = requiredQuals.every(q => uploadedFiles[q.id]);
            document.getElementById('submitBtn').disabled = !allRequired;
        }

        // 提交认证
        function submitQualification() {
            // 显示成功页面
            document.getElementById('uploadScreen').classList.remove('active');
            document.getElementById('successScreen').classList.add('active');
            document.getElementById('successScreen').classList.add('fade-in');
        }

        // 返回首页
        function goBack() {
            document.getElementById('uploadScreen').classList.remove('active');
            document.getElementById('homeScreen').classList.add('active');
        }

        // 返回首页（从成功页）
        function goToHome() {
            // 重置状态
            selectedRole = null;
            uploadedFiles = {};
            document.querySelectorAll('.role-card').forEach(card => card.classList.remove('selected'));
            document.getElementById('nextBtn').disabled = true;
            
            document.getElementById('successScreen').classList.remove('active');
            document.getElementById('homeScreen').classList.add('active');
        }
    </script>
</body>
</html>