r112/enroll.html · 约 4951 字符
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">6<title>在线报名 · 小草职业教育学校</title>7<link rel="icon" href="data:,">8<link rel="stylesheet" href="style.css">9</head>10<body data-page="enroll">1112<div class="enroll-wrap">13 <div class="enroll-hd">14 <div class="eh-t">在线报名</div>15 <div class="eh-s">填写信息，招生办老师将于 1 个工作日内电话联系</div>16 </div>17 <form id="enrollForm" class="form" novalidate>18 <label class="fld"><span class="fld-lab">姓名 <i>*</i></span><input name="name" placeholder="请输入学生姓名"></label>19 <div class="fld"><span class="fld-lab">性别</span>20 <div class="radio-row">21 <label class="radio"><input type="radio" name="sex" value="男" checked><span>男</span></label>22 <label class="radio"><input type="radio" name="sex" value="女"><span>女</span></label>23 </div>24 </div>25 <label class="fld"><span class="fld-lab">手机号 <i>*</i></span><input name="phone" type="tel" maxlength="11" placeholder="接收审核通知"></label>26 <label class="fld"><span class="fld-lab">准考证号</span><input name="examno" placeholder="中考准考证号（选填）"></label>27 <label class="fld"><span class="fld-lab">意向专业 <i>*</i></span><select name="major" id="majorSel"><option>加载中…</option></select></label>28 <label class="fld"><span class="fld-lab">中考成绩</span><input name="score" type="number" placeholder="总分（选填）"></label>29 <label class="fld"><span class="fld-lab">来源地区</span><input name="region" placeholder="如：xx 市 xx 区"></label>30 <label class="fld"><span class="fld-lab">备注</span><textarea name="note" rows="3" placeholder="特长、疑问或其他说明"></textarea></label>31 <button type="submit" class="btn btn-block btn-primary">提交报名</button>32 </form>33 <div class="my-list" id="myList"></div>34</div>3536<nav class="tabbar"><a class="tab-item" href="index.html"><span class="tab-ic">🏠</span><span>首页</span></a><a class="tab-item" href="majors.html"><span class="tab-ic">🗺️</span><span>专业</span></a><a class="tab-item on" href="enroll.html"><span class="tab-ic">📝</span><span>报名</span></a><a class="tab-item" href="contact.html"><span class="tab-ic">☎️</span><span>联系</span></a></nav>37<div class="mask" id="mask"></div>38<div class="toast" id="toast"></div>39<script src="data/fallback.js"></script>40<script src="app.js"></script>41<script>42function qp(n) { var m = location.search.match(new RegExp('[?&]' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }43function renderMy() {44 var list = STORE.get('r112_enrolls') || [];45 if (!list.length) { $('#myList').innerHTML = '<div class="my-empty">暂无报名记录，填写上方表单提交</div>'; return; }46 $('#myList').innerHTML = '<div class="my-hd">我的报名（' + list.length + '）</div>' + list.map(function (r) {47 return '<div class="my-card"><div class="my-top"><span class="my-no">' + esc(r.no) + '</span><span class="my-st">已提交</span></div>'48 + '<div class="my-row">' + esc(r.name) + ' · ' + esc(r.sex) + ' · ' + esc(r.major) + '</div>'49 + '<div class="my-row dim">' + esc(r.phone) + (r.examno ? (' · 准考证 ' + esc(r.examno)) : '') + '</div></div>';50 }).join('');51}52DS.get('majors', function (d) {53 if (!d) return;54 var names = []; (d.groups || []).forEach(function (g) { (g.list || []).forEach(function (m) { names.push(m.name); }); });55 $('#majorSel').innerHTML = names.map(function (n) { return '<option>' + esc(n) + '</option>'; }).join('');56 var pm = qp('major');57 if (pm) { var opts = $$('#majorSel option'); for (var i = 0; i < opts.length; i++) { if (opts[i].value === pm) { opts[i].selected = true; break; } } }58 renderMy();59});60$('#enrollForm').addEventListener('submit', function (e) {61 e.preventDefault();62 var f = this, name = f.name.value.trim(), phone = f.phone.value.trim(), major = f.major.value;63 if (!name) { toast('请填写姓名'); f.name.focus(); return; }64 if (!/^1\d{10}$/.test(phone)) { toast('请填写正确的 11 位手机号'); f.phone.focus(); return; }65 var no = 'XC' + new Date().getTime().toString().slice(-8) + Math.floor(Math.random() * 90 + 10);66 var rec = { no: no, name: name, sex: f.sex.value, phone: phone, examno: f.examno.value.trim(), major: major, score: f.score.value, region: f.region.value.trim(), note: f.note.value.trim(), ts: Date.now() };67 var list = STORE.get('r112_enrolls') || []; list.unshift(rec); STORE.set('r112_enrolls', list);68 toast('报名提交成功，编号 ' + no);69 var keep = major; f.reset();70 var opts = $$('#majorSel option'); for (var i = 0; i < opts.length; i++) { if (opts[i].value === keep) { opts[i].selected = true; break; } }71 renderMy();72});73</script>74</body>75</html>76