|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>上下山人员信息登记</title>
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
|
<script src="./utils.js"></script>
|
|
|
<script src="./date.format.js"></script>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: 'Helvetica Neue', sans-serif;
|
|
|
background-color: #F4F5F7;
|
|
|
}
|
|
|
|
|
|
.top {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
background-color: #029561;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
font-size: 30px;
|
|
|
font-weight: bold;
|
|
|
text-shadow: 1px 1px 1px #ccc;
|
|
|
margin-top: -122px;
|
|
|
}
|
|
|
|
|
|
form {
|
|
|
border-radius: 21px 21px 0 0;
|
|
|
box-sizing: border-box;
|
|
|
padding: 18px;
|
|
|
width: 100%;
|
|
|
background-color: #F4F5F7;
|
|
|
margin: 45px auto 0;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
display: flex;
|
|
|
height: 60px;
|
|
|
box-sizing: border-box;
|
|
|
background-color: #ffffff;
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
|
|
|
border: 3px solid #FFFFFF;
|
|
|
backdrop-filter: blur(10px);
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 13px;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
font-size: 15px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2A2A2A;
|
|
|
line-height: 21px;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
input[type="text"],
|
|
|
input[type="tel"],
|
|
|
input[type="number"],
|
|
|
input[type="datetime-local"] {
|
|
|
|
|
|
padding: 12px 10px;
|
|
|
border-radius: 5px;
|
|
|
border: none;
|
|
|
font-size: 16px;
|
|
|
color: #2a2a2a;
|
|
|
text-align: right;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
input:focus {
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
input[type="text"]::-webkit-input-placeholder {
|
|
|
color: #aab2bd;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
input[type="tel"]::-webkit-input-placeholder {
|
|
|
color: #aab2bd;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
input[type="number"]::-webkit-input-placeholder {
|
|
|
color: #aab2bd;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
input[type="submit"] {
|
|
|
width: 98%;
|
|
|
height: 49px;
|
|
|
margin-top: 40px;
|
|
|
background: #029561;
|
|
|
border-radius: 49px;
|
|
|
border: none;
|
|
|
font-size: 17px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
input[type="submit"]:hover {
|
|
|
background-color: #005400;
|
|
|
}
|
|
|
|
|
|
.xieyi {
|
|
|
display: none;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: scroll;
|
|
|
background: #fff;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.xieyi>p {
|
|
|
width: 100%;
|
|
|
height: 75%;
|
|
|
margin-top: 20px;
|
|
|
overflow: scroll;
|
|
|
}
|
|
|
.selectview{
|
|
|
border: none;
|
|
|
font-size: 16px;
|
|
|
outline: none;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="top">
|
|
|
|
|
|
</div>
|
|
|
<h1>上下山人员信息登记</h1>
|
|
|
<form>
|
|
|
<div class="form-item">
|
|
|
<label for="name">姓 名*</label>
|
|
|
<input type="text" id="name" name="name" placeholder="请输入姓名" required>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
<label for="phone">手机号码*</label>
|
|
|
<input type="tel" id="phone" name="phone" placeholder="请输入手机号" required>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
<label for="idCard">身份证号*</label>
|
|
|
<input type="text" id="idCard" name="idCard" placeholder="请输入身份证号" required>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
<label for="address">联系地址*</label>
|
|
|
<input type="text" id="address" name="address" placeholder="请输入联系地址" required>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
<label for="reason">登记类型*</label>
|
|
|
<select class="selectview" id="testSelect" οnchange="selectChange()" required>
|
|
|
<option value="1">进山</option>
|
|
|
<option value="2">下山</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-item" id="inreason-item">
|
|
|
<label for="inreasonSelect" >进山原因</label>
|
|
|
<select class="selectview" id="inreasonSelect" οnchange="selectChange()" required>
|
|
|
|
|
|
</select>
|
|
|
</div>
|
|
|
<!-- <div class="form-item" id="inreason">
|
|
|
<label for="reason">进山原因</label>
|
|
|
<input type="text" id="reason" name="reason" placeholder="请输入进山原因">
|
|
|
</div> -->
|
|
|
<input type="submit" value="登记">
|
|
|
</form>
|
|
|
</body>
|
|
|
<script>
|
|
|
// 获取进出山原因字典数据
|
|
|
function getReason(){
|
|
|
$.ajax({
|
|
|
method: 'GET',
|
|
|
url: `${URL}/api/Categorys/LoadList?typeid=PERSONAL_TYPE`,
|
|
|
contentType: 'application/json;charset=utf-8',
|
|
|
success: function (response) {
|
|
|
if (response.code === 200) {
|
|
|
let reasons = response.result;
|
|
|
var areaSelect = document.getElementById("inreasonSelect");
|
|
|
reasons.forEach((item,index)=>{
|
|
|
var option = document.createElement("option");
|
|
|
option.value = item.name;
|
|
|
option.innerHTML = item.name;
|
|
|
areaSelect.appendChild(option);
|
|
|
})
|
|
|
initFormData();
|
|
|
} else {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
getReason();
|
|
|
let message = new $message()
|
|
|
let urlParams = getUrlParse(window.location.search)
|
|
|
if (!urlParams.siteId) {
|
|
|
message('URL参数错误')
|
|
|
}
|
|
|
$("#testSelect").change(function(){
|
|
|
if($("#testSelect").val() == 1){
|
|
|
$("#inreason-item").show()
|
|
|
}else{
|
|
|
$("#inreason-item").hide()
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 初始化表单数据
|
|
|
function initFormData(){
|
|
|
// 获取表单元素
|
|
|
const form = document.querySelector('form');
|
|
|
const nameInput = document.getElementById('name');
|
|
|
const phoneInput = document.getElementById('phone');
|
|
|
const idCardInput = document.getElementById('idCard');
|
|
|
const addressInput = document.getElementById('address');
|
|
|
const reasonInput = document.getElementById('inreasonSelect');
|
|
|
const testSelect = document.getElementById('testSelect');
|
|
|
// 从localStorage里读取数据
|
|
|
const name = localStorage.getItem('name');
|
|
|
const phone = localStorage.getItem('phone');
|
|
|
const idCard = localStorage.getItem('idCard');
|
|
|
const address = localStorage.getItem('address');
|
|
|
const reason = localStorage.getItem('reason');
|
|
|
const testSelects = localStorage.getItem('testSelects');
|
|
|
// 将数据填充到表单里
|
|
|
nameInput.value = name;
|
|
|
phoneInput.value = phone;
|
|
|
idCardInput.value = idCard;
|
|
|
addressInput.value = address;
|
|
|
reasonInput.value = reason;
|
|
|
testSelect.value = testSelects || 1;
|
|
|
|
|
|
if(testSelects == 2){
|
|
|
$("#inreason-item").hide()
|
|
|
}
|
|
|
}
|
|
|
// 监听表单提交事件
|
|
|
form.addEventListener('submit', function (event) {
|
|
|
event.preventDefault(); // 阻止表单默认提交行为
|
|
|
var $check = $("#check");
|
|
|
// 获取填写的数据
|
|
|
const name = nameInput.value;
|
|
|
const phone = phoneInput.value;
|
|
|
const idCard = idCardInput.value;
|
|
|
const address = addressInput.value;
|
|
|
const reason = reasonInput.value;
|
|
|
const registrationType = testSelect.value;
|
|
|
|
|
|
// 存储到localStorage
|
|
|
localStorage.setItem('name', name);
|
|
|
localStorage.setItem('phone', phone);
|
|
|
localStorage.setItem('idCard', idCard);
|
|
|
localStorage.setItem('address', address);
|
|
|
localStorage.setItem('reason', reason);
|
|
|
localStorage.setItem('testSelects', registrationType);
|
|
|
|
|
|
// 表单验证
|
|
|
let IDCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
|
|
if (!/[\u4E00-\u9FA5]/.test(name) || /[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\\(,\\),\\',\\;,\\=,\"]/g.test(name) || /[0-9]/.test(name)) {
|
|
|
message('名字格式输入错误')
|
|
|
} else if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(phone)) {
|
|
|
message('请输入正确手机号')
|
|
|
} else if (!IDCardReg.test(idCard)) {
|
|
|
message('请输入正确身份证号')
|
|
|
} else {
|
|
|
// 提交
|
|
|
postMessage({
|
|
|
"id": 0,
|
|
|
"userName": name,
|
|
|
"phone": phone,
|
|
|
"inType": 1,
|
|
|
"cardNo": idCard,
|
|
|
"userAddress": address,
|
|
|
"siteId": urlParams.siteId,
|
|
|
'reason':registrationType == 1 ? reason : null,
|
|
|
'registrationType': registrationType
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function postMessage(data) {
|
|
|
$.ajax({
|
|
|
method: 'POST',
|
|
|
url: `${URL}/api/FireCodeH/AddEnteringInfo`,
|
|
|
contentType: 'application/json;charset=utf-8',
|
|
|
data: JSON.stringify(data),
|
|
|
success: function (response) {
|
|
|
if (response.code === 200) {
|
|
|
// 跳转到欢迎页面
|
|
|
window.location.href = `welcome.html?siteId=${data.siteId}`
|
|
|
} else {
|
|
|
message("未知错误")
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</html> |