运动员报�?- 运动会管理系�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; color: #333; } .container { max-width: 600px; margin: 50px auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } h1 { color: #2c3e50; font-size: 2rem; margin-bottom: 10px; } .back-link { display: inline-block; margin-bottom: 20px; color: #3498db; text-decoration: none; font-weight: bold; } .back-link:hover { text-decoration: underline; } .form-container { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } input:focus, select:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .btn { display: block; width: 100%; padding: 12px; background-color: #2ecc71; color: white; border: none; border-radius: 5px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: #27ae60; } .message { margin-top: 20px; padding: 10px; border-radius: 5px; text-align: center; font-weight: bold; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Responsive design */ @media (max-width: 768px) { .container { margin: 20px; padding: 0; } .form-container { padding: 20px; } } </style> </head> <body> <div class="container"> <header> <a href="index.html" class="back-link">�?返回首页</a> <h1>📝 运动员报�?/h1> <p>请填写以下信息完成报�?/p> </header> <div class="form-container"> <form id="registerForm"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required placeholder="请输入姓�?> </div> <div class="form-group"> <label for="id_card">身份证号</label> <input type="text" id="id_card" name="id_card" required placeholder="请输入身份证�?> </div> <div class="form-group"> <label for="department">所属部�?/label> <select id="department" name="department" required> <option value="">请选择部门</option>  </select> </div> <div class="form-group"> <label for="team">所属队�?/label> <select id="team" name="team" required> <option value="">请选择队伍</option>  </select> </div> <button type="submit" class="btn">提交报名</button> </form> <div id="message" class="message" style="display: none;"></div> </div> </div> <script> // API base URL const API_BASE = '/api'; // Elements const registerForm = document.getElementById('registerForm'); const departmentSelect = document.getElementById('department'); const teamSelect = document.getElementById('team'); const messageDiv = document.getElementById('message'); // Load departments and teams on page load async function loadDepartments() { try { const response = await fetch(`${API_BASE}/departments`); const departments = await response.json(); // Clear existing options except placeholder departmentSelect.innerHTML = '<option value="">请选择部门</option>'; // Add departments to select departments.forEach(dept => { const option = document.createElement('option'); option.value = dept.id; option.textContent = dept.name; departmentSelect.appendChild(option); }); } catch (error) { showMessage('加载部门信息失败', 'error'); } } async function loadTeams(departmentId) { try { const response = await fetch(`${API_BASE}/teams`); const teams = await response.json(); // Filter teams by selected department const filteredTeams = departmentId ? teams.filter(team => team.department_id === parseInt(departmentId)) : []; // Clear existing options except placeholder teamSelect.innerHTML = '<option value="">请选择队伍</option>'; // Add teams to select filteredTeams.forEach(team => { const option = document.createElement('option'); option.value = team.id; option.textContent = team.name; teamSelect.appendChild(option); }); } catch (error) { showMessage('加载队伍信息失败', 'error'); } } // Show message to user function showMessage(text, type = 'success') { messageDiv.textContent = text; messageDiv.className = `message ${type}`; messageDiv.style.display = 'block'; // Hide message after 5 seconds setTimeout(() => { messageDiv.style.display = 'none'; }, 5000); } // Handle department change departmentSelect.addEventListener('change', (e) => { loadTeams(e.target.value); }); // Handle form submission registerForm.addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(registerForm); const data = { name: formData.get('name'), id_card: formData.get('id_card'), department_id: parseInt(formData.get('department')), team_id: parseInt(formData.get('team')) }; try { const response = await fetch(`${API_BASE}/athletes/register`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await response.json(); if (response.ok) { showMessage('报名成功�?); registerForm.reset(); teamSelect.innerHTML = '<option value="">请选择队伍</option>'; } else { showMessage(result.error || '报名失败，请重试', 'error'); } } catch (error) { showMessage('网络错误，请稍后重试', 'error'); } }); // Initialize page loadDepartments(); </script> </body> </html>