|
|
@@ -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';
|
|
|
};
|
|
|
// 示例:点击左下角问号弹出帮助
|