You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

505 lines
24 KiB

3 months ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="./component/pear/css/pear.css" rel="stylesheet" />
<style>
.lay-step {
font-size: 0;
margin: 0 auto;
max-width: 100%;
width: 60%;
padding-left: 13%;
}
td {
text-align: center;
height: 35px;
}
.td_title {
font-size: 16px !important;
font-weight: bolder;
}
.td_content {
text-align: left;
font-size: 16px !important;
}
th {
text-align: center;
}
.layui-elem-field legend {
margin-left: 20px;
padding: 0 10px;
font-size: 12px;
color: #05B5F8;
}
.layui-carousel {
position: relative;
left: 0;
top: 0;
background-color: #f8f8f8;
height: 600px !important;
}
</style>
</head>
<body>
<body>
<div style="margin: 0 auto;">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm"
style="height: 600px !important; margin: 40px auto;">
<div carousel-item>
<!-- 确认考生信息 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>确认考生信息</legend>
</fieldset>
<table class="layui-table">
<colgroup>
<col width="1300">
<col width="1300">
<col width="1300">
<col width="1300">
</colgroup>
<thead>
<tr>
<th colspan="4" style="text-align: center;font-size: 18px;height: 35px;">考生信息
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td_title">姓名</td>
<td class="td_content" id="xm"></td>
<td class="td_title">性别</td>
<td class="td_content" id="xb"></td>
</tr>
<tr>
<td class="td_title">所属学校</td>
<td class="td_content" colspan="3" id="ssxx"></td>
</tr>
<tr>
<td class="td_title">身份证号</td>
<td class="td_content" colspan="3" id="sfzh"></td>
</tr>
<tr>
<td class="td_title">考籍号</td>
<td class="td_content" colspan="3" id="kjh"></td>
</tr>
<tr>
<td class="td_title">国家学籍号</td>
<td class="td_content" colspan="3" id="gjxjh"></td>
</tr>
</tbody>
</table>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 选择科目卷面文字 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>选择科目卷面文字</legend>
</fieldset>
<div class="layui-form-item" style="margin: 30px 0;">
<label class="layui-form-label" style="width: 100px;">科目卷面文字:</label>
<div class="layui-input-block" id="jmwzView">
<script id="jmwzScript" type="text/html">
{{# layui.each(d, function(index, item){ }}
<input type="radio" name="jmwz" value="{{item.wz_id}}" title="{{item.wz_name}}">
{{# }); }}
</script>
</div>
</div>
<div class="layui-form-item">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep2">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 选择考试科目 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>选择考试科目</legend>
</fieldset>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="margin-left: 10px;" id="subjectView">
<script id="subjectScript" type="text/html">
{{# layui.each(d.subject, function(index1, item){ }}
{{# if(item.children.length==0){ }}
{{# if(d.ywj_id==1){ }}
<input type="checkbox" id="chk_{{item.group_name}}" value="{{item.id}}" name="{{item.subject_code}}" title="{{item.name}}" checked disabled><br>
{{# } else { }}
<input type="checkbox" id="chk_{{item.group_name}}" value="{{item.id}}" name="{{item.subject_code}}" title="{{item.name}}"><br>
{{# } }}
{{# } else { }}
{{# if(d.ywj_id==1){ }}
<input type="checkbox" id="chk_{{item.subject_code}}" title="{{item.name}}" lay-filter="childChk" checked disabled><br>
{{# } else { }}
<input type="checkbox" id="chk_{{item.subject_code}}" title="{{item.name}}" lay-filter="childChk"><br>
{{# } }}
{{# layui.each(item.children, function(index2, clildItem){ }}
{{# if(d.ywj_id==1){ }}
{{# if(index2==0){ }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo" checked>
{{# } else { }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo">
{{# } }}
{{# } else { }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo">
{{# } }}
{{# }); }}
<br>
{{# } }}
{{# }); }}
</script>
</div>
</div>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep3">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 确认报名信息 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>确认报名信息</legend>
</fieldset>
<table class="layui-table">
<colgroup>
<col width="1300">
<col width="1300">
<col width="1300">
<col width="1300">
</colgroup>
<thead>
<tr>
<th colspan="4" style="text-align: center;font-size: 18px;height: 35px;">报名信息
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td_title">姓名</td>
<td class="td_content" id="xmV"></td>
<td class="td_title">性别</td>
<td class="td_content" id="xbV"></td>
</tr>
<tr>
<td class="td_title">所属学校</td>
<td class="td_content" colspan="3" id="ssxxV"></td>
</tr>
<tr>
<td class="td_title">身份证号</td>
<td class="td_content" colspan="3" id="sfzhV"></td>
</tr>
<tr>
<td class="td_title">考籍号</td>
<td class="td_content" colspan="3" id="kjhV"></td>
</tr>
<tr>
<td class="td_title">国家学籍号</td>
<td class="td_content" colspan="3" id="gjxjhV"></td>
</tr>
<tr>
<td class="td_title">科目卷面文字</td>
<td class="td_content" colspan="3" id="kmjmwzV"></td>
</tr>
<tr>
<td class="td_title">考试科目</td>
<td class="td_content" colspan="3" id="kskmV"></td>
</tr>
</tbody>
</table>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep4">
确认报名
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="./component/layui/layui.js"></script>
<script src="./component/pear/pear.js"></script>
<script>
layui.use(['form', 'step', 'laytpl', 'jquery'], function () {
let form = layui.form;
let $ = layui.jquery;
let step = layui.step;
let laytpl = layui.laytpl
var lsData = localStorage.getItem('studentInfo');
if (lsData == null) {
window.parent.location.href = "./login.html";
}
var studentInfo = JSON.parse(lsData);
var jmwz;
var jmwzid;
var jmwzObj = {};
var selectSubjectTxt = [];
var selectSubjectObj = [];
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '600px',
height: '500px',
stepItems: [{
title: '确认考生信息'
}, {
title: '选择科目卷面文字'
}, {
title: '选择考试科目'
}, {
title: '确认报名信息'
}]
});
// 渲染学生信息
$("#xm").html(studentInfo.student_name);
$("#xb").html(studentInfo.xb);
$("#ssxx").html(studentInfo.school_name);
$("#sfzh").html(studentInfo.sfzh);
$("#kjh").html(studentInfo.kjh);
$("#gjxjh").html(studentInfo.xjh);
// 渲染卷面文字
var jmwzArr = JSON.parse(studentInfo.jmwz_id);
var jmwzTpl = jmwzScript.innerHTML;
var jmwzView = document.getElementById('jmwzView');
laytpl(jmwzTpl).render(jmwzArr, function (html) {
jmwzView.innerHTML = html;
});
// 渲染选择考试科目
var subjectObj = {};
var _obj = JSON.parse(studentInfo.km_json);
subjectObj["subject"] = _obj;
//ywj_id 1应届 2往届
subjectObj["ywj_id"] = studentInfo.ywj_id;
var subjectTpl = subjectScript.innerHTML;
var subjectView = document.getElementById('subjectView');
laytpl(subjectTpl).render(subjectObj, function (html) {
subjectView.innerHTML = html;
});
form.render();
form.on('submit(formStep)', function (data) {
layer.confirm('是否确认考生信息正确?', {
shade: 0.1,
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
step.next('#stepForm');
return false;
});
});
form.on('submit(formStep2)', function (data) {
if ($('input[name="jmwz"]:checked').length > 0) {
var selectedTitle = $('input[name="jmwz"]:checked').attr('title');
var selectedValue = $('input[name="jmwz"]:checked').val();
jmwz = selectedTitle;
jmwzid = selectedValue;
jmwzObj["id"] = jmwzid;
jmwzObj["name"] = jmwz;
step.next('#stepForm');
return false;
} else {
layer.msg("请选择科目卷面文字 ", {
icon: 2,
time: 1500
});
}
});
form.on('submit(formStep3)', function (data) {
var checkedInputs = $('#subjectView input[type="checkbox"]:checked, #subjectView input[type="radio"]:checked');
if (checkedInputs.length > 0) {
for (var key in data.field) {
var ssObj = {};
var name = findName(JSON.parse(studentInfo.km_json), data.field[key]);
ssObj["id"] = data.field[key];
ssObj["name"] = name;
selectSubjectObj.push(ssObj);
selectSubjectTxt.push(name);
}
// 渲染报名信息
$("#xmV").html(studentInfo.student_name);
$("#xbV").html(studentInfo.xb);
$("#ssxxV").html(studentInfo.school_name);
$("#sfzhV").html(studentInfo.sfzh);
$("#kjhV").html(studentInfo.kjh);
$("#gjxjhV").html(studentInfo.xjh);
$("#kmjmwzV").html(jmwz);
$("#kskmV").html(selectSubjectTxt.join("、"));
step.next('#stepForm');
return false;
} else {
layer.msg("必须要选择一个科目 ", {
icon: 2,
time: 1500
});
}
});
form.on('submit(formStep4)', function (data) {
layer.confirm('是否确认报名信息正确?', {
shade: 0.1,
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
let loading = layer.load();
var postData = {};
postData["jmwz"] = jmwzObj;
postData["km"] = selectSubjectObj;
$.ajax({
3 months ago
url: '/dsBase/hk/setStudentInfo',
3 months ago
async: false,
data: { res_json: JSON.stringify(postData) },
type: 'post',
success: function (result) {
if (result.success) {
$.ajax({
3 months ago
url: "/dsBase/hk/getStudentInfo",
3 months ago
async: false,
type: 'GET',
success: function (res) {
localStorage.setItem('studentInfo', JSON.stringify(res));
layer.close(loading);
layer.msg("报名成功!", {
icon: 1,
time: 1300
}, function () {
window.location.href = "./info.html";
});
}, error: function (xhr, status, error) {
layer.msg("获取学生信息异常!", {
icon: 2,
time: 1000
});
}
});
} else {
layer.msg(result.message, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
});
$('.pre').click(function () {
step.pre('#stepForm');
return false;
});
$('.next').click(function () {
step.next('#stepForm');
return false;
});
form.on('checkbox(childChk)', function (data) {
var elemId = data.elem.id.replace("chk_", "");
if (data.elem.checked) {
$("input[name='" + elemId + "']:first").prop("checked", "checked");
} else {
$("input[name='" + elemId + "']:checked").prop("checked", false);
}
form.render();
});
form.on('radio(childRdo)', function (data) {
var elemId = data.elem.id.replace("rdo_", "");
$("#chk_" + elemId).prop('checked', true)
form.render();
});
function findName(arr, code) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].id == code) {
return arr[i].name;
}
else if (arr[i].children) {
let found = findName(arr[i].children, code);
if (found) return found;
}
}
}
});
</script>
<script>
</script>
</body>
</html>