Browse Source

update html

chao 1 month ago
parent
commit
ba72f3e585
1 changed files with 184 additions and 25 deletions
  1. 184 25
      public/index.html

+ 184 - 25
public/index.html

@@ -432,7 +432,8 @@
             bottom: 10px;
             left: 10px;
         }
-        .help::after{
+
+        .help::after {
             content: '?';
             position: absolute;
             top: 50%;
@@ -440,7 +441,8 @@
             transform: translate(-50%, -50%);
             font-size: 24px;
         }
-        .help-qrCode{
+
+        .help-qrCode {
             width: 50%;
             padding: 20px;
         }
@@ -507,8 +509,7 @@
                             <div class="file-title">报名表模板</div>
                             <div class="file-desc">完成在线报名后,请先下载该模板,经所在学校盖章确认后,将盖章后的模板上传至【资格确认】板块,即可完成赛前准备。</div>
                         </div>
-                        <a target="_blank"
-                            href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/a/%E6%8A%A5%E5%90%8D%E8%A1%A8.docx"
+                        <a target="_blank" href="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/2573c666-c5d1-e76f-72e2-8e7a056cb6e3/%E6%8A%A5%E5%90%8D%E8%A1%A8.docx"
                             class="download-btn" download>下载</a>
                     </div>
                     <div class="download-item">
@@ -635,7 +636,8 @@
 
                             <div class="form-row">
                                 <div class="form-col">
-                                    <div class="form-group">
+                                    <!-- 组别:只显示一个,根据比赛类型动态显示 -->
+                                    <div class="form-group" id="group-container1" style="display: none;">
                                         <label class="form-label required" for="group">组别</label>
                                         <select id="group1" class="form-input" required>
                                             <option value="">请选择</option>
@@ -646,6 +648,30 @@
                                         </select>
                                         <div class="error" id="group-error1">请选择组别</div>
                                     </div>
+                                    <div class="form-group" id="group-container2" style="display: none;">
+                                        <label class="form-label required" for="group">组别</label>
+                                        <select id="group2" class="form-input" required>
+                                            <option value="">请选择</option>
+                                            <option value="1">小学组(4-6年级)</option>
+                                            <option value="2">初中组(7-9年级)</option>
+                                            <option value="3">高中组(10-12年级,含中职)</option>
+                                            <option value="4">高校组(含高职)</option>
+                                        </select>
+                                        <div class="error" id="group-error2">请选择组别</div>
+                                    </div>
+                                    <script>
+                                        // 根据比赛类型显示对应组别
+                                        function updateGroupSelect(type) {
+                                            if (type == "2") {
+                                                document.getElementById('group-container1').style.display = 'none';
+                                                document.getElementById('group-container2').style.display = 'block';
+                                            } else {
+                                                document.getElementById('group-container1').style.display = 'block';
+                                                document.getElementById('group-container2').style.display = 'none';
+                                            }
+                                        }
+
+                                    </script>
                                 </div>
 
                                 <div class="form-col">
@@ -715,9 +741,7 @@
         </div>
     </div>
 
-
     <script>
-
         const requesturl = window.location.href.indexOf("localhost") > -1 ? "http://localhost:11111" : "http://183.36.25.93:888/";
         console.log("requesturl:", requesturl);
 
@@ -796,6 +820,11 @@
                 alert('请先选择比赛类型');
                 return;
             }
+            if (selectedCompetitionId == 2) {
+                addContestant()
+            }
+            // 初始化
+            updateGroupSelect(selectedCompetitionId);
             // 切换到步骤2
             document.getElementById('step1').classList.remove('active');
             document.getElementById('step2').classList.add('active');
@@ -809,11 +838,24 @@
             document.getElementById('step1').classList.add('active');
             document.getElementsByClassName("button-Contestant")[0].classList.remove('active');
             buttonContestant = false
+            const html = document.getElementById('formContainer');
+            // 删除添加的表单
+            addList.forEach((item, idx) => {
+                let formDiv = html.querySelector(`div#addformContainer${item}`);
+                html.removeChild(formDiv);
+            });
+            addList = []
+            num = 1
         });
 
         let num = 1;
         let addList = []
         function addContestant() {
+            const html = document.getElementById('formContainer');
+            if (html.children.length >= 6) {
+                alert('最多添加3个选手');
+                return
+            }
             num = num + 1;
             addList.push(num)
             const ifFirst = addList.find(item => item === 1);
@@ -821,7 +863,7 @@
             if (ifFirst) {
                 addListLength = addList.length
             }
-            const html = document.getElementById('formContainer');
+            console.log("addListLength:", html.children.length);
             const createDiv = document.createElement('div');
             createDiv.id = `addformContainer${num}`;
             createDiv.style.position = 'relative';
@@ -837,7 +879,115 @@
             createDiv.appendChild(brCreate);
             const formCrate = document.createElement('form');
             formCrate.id = `registrationForm${num}`;
-            formCrate.innerHTML = `<div class="form-row">
+            if (selectedCompetitionId == 2) {
+                formCrate.innerHTML = `<div class="form-row">
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="name">姓名</label>
+                        <input type="text" id="name${num}" class="form-input" required>
+                        <div class="error" id="name-error${num}">请输入姓名</div>
+                    </div>
+                    </div>
+
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="gender">性别</label>
+                        <select id="gender${num}" class="form-input" required>
+                        <option value="">请选择</option>
+                        <option value="1">男</option>
+                        <option value="2">女</option>
+                        </select>
+                        <div class="error" id="gender-error${num}">请选择性别</div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="ethnicity">民族</label>
+                        <input type="text" id="ethnicity${num}" class="form-input" required>
+                        <div class="error" id="ethnicity-error${num}">请输入民族</div>
+                    </div>
+                    </div>
+
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="birthdate">出生年月</label>
+                        <input type="date" id="birthdate${num}" class="form-input" required>
+                        <div class="error" id="birthdate-error${num}">请选择出生年月</div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="email">电子邮箱</label>
+                        <input type="email" id="email${num}" class="form-input" required>
+                        <div class="error" id="email-error${num}">请输入有效的电子邮箱</div>
+                    </div>
+                    </div>
+
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="idNumber">身份证号码</label>
+                        <input type="text" id="idNumber${num}" class="form-input" required pattern="\d{17}[\dXx]">
+                        <div class="error" id="idNumber-error${num}">请输入18位身份证号码</div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="group">组别</label>
+                        <select id="group${num}" class="form-input" required>
+                        <option value="">请选择</option>
+                        <option value="1">小学组(4-6年级)</option>
+                        <option value="2">初中组(7-9年级)</option>
+                        <option value="3">高中组(10-12年级,含中职)</option>
+                        <option value="4">高校组(含高职)</option>
+                        </select>
+                        <div class="error" id="group-error${num}">请选择组别</div>
+                    </div>
+                    </div>
+
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="grade">年级</label>
+                        <input type="text" id="grade${num}" class="form-input" required>
+                        <div class="error" id="grade-error${num}">请输入年级</div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="school">所在学校</label>
+                        <input type="text" id="school${num}" class="form-input" required>
+                        <div class="error" id="school-error${num}">请输入学校名称</div>
+                    </div>
+                    </div>
+
+                    <div class="form-col">
+                    <div class="form-group">
+                        <label class="form-label required" for="schoolRegion">学校所在地区</label>
+                        <input type="text" id="schoolRegion${num}" class="form-input" required
+                        placeholder="省/市/区">
+                        <div class="error" id="schoolRegion-error${num}">请输入学校所在地区</div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label required" for="phone">联系电话</label>
+                    <input type="tel" id="phone${num}" class="form-input" required pattern="[0-9]{11}">
+                    <div class="error" id="phone-error${num}">请输入11位手机号码</div>
+                </div>`;
+            } else {
+                formCrate.innerHTML = `<div class="form-row">
                     <div class="form-col">
                     <div class="form-group">
                         <label class="form-label required" for="name">姓名</label>
@@ -943,6 +1093,7 @@
                     <input type="tel" id="phone${num}" class="form-input" required pattern="[0-9]{11}">
                     <div class="error" id="phone-error${num}">请输入11位手机号码</div>
                 </div>`;
+            }
             createDiv.appendChild(formCrate);
             html.appendChild(createDiv);
         }
@@ -950,8 +1101,14 @@
 
         function removeContestant(e) {
             const parentElement = Number(e.target.parentElement.id && e.target.parentElement.id.slice(16));
-            addList = addList.filter(item => item !== parentElement);
             const html = document.getElementById('formContainer');
+            if (selectedCompetitionId == 2) {
+                if (html.children.length <= 5) {
+                    alert('至少保留两个选手');
+                    return
+                }
+            }
+            addList = addList.filter(item => item !== parentElement);
             let selectForm = html.querySelector(`div#addformContainer${parentElement}`);
             if (selectForm) html.removeChild(selectForm);
             // 依次递增更新剩余选手的序号
@@ -977,7 +1134,17 @@
             let i = 0
             let isFirst = addList.find(item => item === 1);
             if (!isFirst) addList.unshift(1);
+            const teacher = document.getElementById('teacher').value;
+            if (!teacher) {
+                alert('请填写指导老师');
+                return;
+            }
 
+            const teacherPhone = document.getElementById('teacherPhone').value;
+            if (!/^[0-9]{11}$/.test(teacherPhone)) {
+                alert('请正确填写指导老师手机号');
+                return;
+            }
             for (let j = 0; j <= addList.length - 1; j++) {
                 let element = null;
                 let errorElement = null;
@@ -1034,16 +1201,6 @@
                 })
             }
 
-            const teacher = document.getElementById('teacher').value;
-            if (!teacher) {
-                alert('请填写指导老师');
-                return;
-            }
-            const teacherPhone = document.getElementById('teacherPhone').value;
-            if (!teacherPhone) {
-                alert('请填写指导老师手机号');
-                return;
-            }
             try {
                 // 收集表单数据
                 const formDataObj = {
@@ -1169,10 +1326,12 @@
             showModal("宣讲视频暂无...")
         }
     </script>
-    
+
     <!-- Modal -->
-    <div id="modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.4);z-index:999;justify-content:center;align-items:center;">
-        <div style="background:#fff;padding:30px 20px;border-radius:10px;width:800px;box-shadow:0 4px 24px rgba(0,0,0,0.2);position:relative;">
+    <div id="modal"
+        style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.4);z-index:999;justify-content:center;align-items:center;">
+        <div
+            style="background:#fff;padding:30px 20px;border-radius:10px;width:800px;box-shadow:0 4px 24px rgba(0,0,0,0.2);position:relative;">
             <span id="modalClose" style="position:absolute;top:10px;right:15px;font-size:22px;cursor:pointer;">×</span>
             <div id="modalContent"></div>
         </div>
@@ -1184,11 +1343,11 @@
             document.getElementById('modal').style.display = 'flex';
         }
         // 关闭modal
-        document.getElementById('modalClose').onclick = function() {
+        document.getElementById('modalClose').onclick = function () {
             document.getElementById('modal').style.display = 'none';
         };
         // 点击遮罩关闭
-        document.getElementById('modal').onclick = function(e) {
+        document.getElementById('modal').onclick = function (e) {
             if (e.target === this) this.style.display = 'none';
         };
         // 示例:点击左下角问号弹出帮助