504 lines
14 KiB
HTML
504 lines
14 KiB
HTML
<!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;
|
||
}
|
||
|
||
.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;
|
||
text-align: center;
|
||
line-height:49px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.registration {
|
||
width: 130px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.registration-btn {
|
||
width: 60px;
|
||
height: 28px;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
line-height: 26px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background-color: #f4f5f7;
|
||
}
|
||
.registration-btn-select {
|
||
background-color: #029561;
|
||
color: #ffffff;
|
||
}
|
||
.selectreason {
|
||
padding: 5px 10px;
|
||
}
|
||
.reason-box {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.reason-list {
|
||
width: 100%;
|
||
height: 50%;
|
||
background-color: #ffffff;
|
||
left: 0;
|
||
bottom: 0;
|
||
border-radius: 12px 12px 0 0;
|
||
position: absolute;
|
||
padding: 30px 0;
|
||
padding-top: 50px;
|
||
}
|
||
.reason-list .reason {
|
||
height: calc(100% - 10px);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow-y: scroll;
|
||
}
|
||
.reason-list .reason div {
|
||
line-height: 28px;
|
||
padding: 5px;
|
||
width: 70%;
|
||
text-align: center;
|
||
border-bottom: 2px solid #f4f5f7;
|
||
}
|
||
.hidden {
|
||
visibility: hidden;
|
||
}
|
||
</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"
|
||
onblur="phoneChange(this)"
|
||
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>登记类型*</label>
|
||
<div class="registration">
|
||
<div class="registration-btn" onclick="selectRegistration(1,this)">
|
||
进山
|
||
</div>
|
||
<div class="registration-btn" onclick="selectRegistration(2,this)">
|
||
下山
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item" id="inreason-item">
|
||
<label for="inreasonSelect">进山原因</label>
|
||
<div class="selectreason" onclick="openReasonItem()" id="form-reason">
|
||
选择
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item" id="projectname-item">
|
||
<label for="projectname">项目名称*</label>
|
||
<input
|
||
type="text"
|
||
id="projectname"
|
||
name="projectname"
|
||
placeholder="请输入项目名称"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<!-- <div class="form-item" id="inreason">
|
||
<label for="reason">进山原因</label>
|
||
<input type="text" id="reason" name="reason" placeholder="请输入进山原因">
|
||
</div> -->
|
||
|
||
<div class="submit" onclick="submit()">登记</div>
|
||
</form>
|
||
<div
|
||
class="reason-box hidden"
|
||
id="reason-box"
|
||
onclick="$(this).addClass('hidden')"
|
||
>
|
||
<div class="reason-list">
|
||
<div class="reason" id="reasonBox"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
let message = new $message();
|
||
let urlParams = getUrlParse(window.location.search);
|
||
if (!urlParams.siteId) {
|
||
message("URL参数错误");
|
||
}
|
||
|
||
// 获取进出山原因字典数据
|
||
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 && response.result) {
|
||
let reasons = response.result;
|
||
var reasonBox = $("#reasonBox");
|
||
reasons.forEach((item, index) => {
|
||
let option = `<div onclick="selectReason('${item.name}')">${item.name}</div>`;
|
||
reasonBox.append(option);
|
||
});
|
||
initFormData();
|
||
// if(localStorage.getItem("phone")){
|
||
|
||
// }
|
||
} else {
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
getReason();
|
||
|
||
let registrationData = 0; //默认的上下山,不选
|
||
let reasonData = ""; //默认的进山原因
|
||
$("#inreason-item").hide();
|
||
$("#projectname-item").hide(); // 隐藏项目名称
|
||
//选择上下山原因
|
||
function selectRegistration(registration, _this) {
|
||
registrationData = registration;
|
||
if (registration == 1) {
|
||
$("#inreason-item").show();
|
||
} else {
|
||
// 项目名称
|
||
document.getElementById("projectname").value = "";
|
||
$("#projectname-item").hide();
|
||
localStorage.setItem("projectname","");
|
||
|
||
$("#inreason-item").hide();
|
||
reasonData = "";
|
||
$("#form-reason").text("选择");
|
||
}
|
||
$(".registration-btn").removeClass("registration-btn-select");
|
||
$(_this).addClass("registration-btn-select");
|
||
}
|
||
|
||
function openReasonItem() {
|
||
$("#reason-box").removeClass("hidden");
|
||
}
|
||
function selectReason(name) {
|
||
reasonData = name;
|
||
$("#form-reason").text(name);
|
||
|
||
if(reasonData == "项目施工"){
|
||
document.getElementById("projectname").value = "";
|
||
$("#projectname-item").show();
|
||
}else{
|
||
document.getElementById("projectname").value = "";
|
||
$("#projectname-item").hide();
|
||
localStorage.setItem("projectname","");
|
||
}
|
||
}
|
||
|
||
// 初始化表单数据
|
||
function initFormData() {
|
||
// 获取表单元素
|
||
const nameInput = document.getElementById("name");
|
||
const phoneInput = document.getElementById("phone");
|
||
const idCardInput = document.getElementById("idCard");
|
||
const addressInput = document.getElementById("address");
|
||
const projectNameInput = document.getElementById("projectname");
|
||
|
||
// 从localStorage里读取数据
|
||
const name = localStorage.getItem("name");
|
||
const phone = localStorage.getItem("phone");
|
||
const idCard = localStorage.getItem("idCard");
|
||
const address = localStorage.getItem("address");
|
||
const projectname = localStorage.getItem("projectname")
|
||
// 将数据填充到表单里
|
||
nameInput.value = name;
|
||
phoneInput.value = phone;
|
||
idCardInput.value = idCard;
|
||
addressInput.value = address;
|
||
projectNameInput.value = projectname;
|
||
}
|
||
// 当phone值发生改变时
|
||
function phoneChange(input){
|
||
getUserInfoByPhone(input.value);
|
||
}
|
||
// 如果localStorage中没有存储，则在用户输入完手机号码之后查询用户信息并显示
|
||
function getUserInfoByPhone(phone){
|
||
$.ajax({
|
||
method: "GET",
|
||
url: `${URL}/api/FireCodeH/LoadNameInfoByPhone?phone=${phone}`,
|
||
success: function (response) {
|
||
if (response.code === 200 && response.data != null) {
|
||
// 将查询信息添加到本地localStorage中
|
||
localStorage.setItem("name", response.data.userName);
|
||
localStorage.setItem("phone", response.data.phone);
|
||
localStorage.setItem("idCard", response.data.cardNo);
|
||
localStorage.setItem("address", response.data.userAddress);
|
||
// 初始化表单
|
||
initFormData();
|
||
} else {
|
||
message("未知错误");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
// 监听表单提交事件
|
||
function submit() {
|
||
// 获取填写的数据
|
||
const name = document.getElementById("name").value;
|
||
const phone = document.getElementById("phone").value;
|
||
const idCard = document.getElementById("idCard").value;
|
||
const address = document.getElementById("address").value;
|
||
const projectname = document.getElementById("projectname").value;
|
||
|
||
// 存储到localStorage
|
||
localStorage.setItem("name", name);
|
||
localStorage.setItem("phone", phone);
|
||
localStorage.setItem("idCard", idCard);
|
||
localStorage.setItem("address", address);
|
||
localStorage.setItem("projectname",projectname);
|
||
|
||
|
||
// 表单验证
|
||
let IDCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||
if (
|
||
!/[\u4E00-\u9FA5]/.test(name) ||
|
||
/[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\\(,\\),\\',\\;,\\=,\"]/g.test(
|
||
name
|
||
) ||
|
||
/[0-9]/.test(name)
|
||
) {
|
||
message("名字格式输入错误");
|
||
return false;
|
||
}
|
||
if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(phone)) {
|
||
message("请输入正确手机号");
|
||
return false;
|
||
}
|
||
if (!IDCardReg.test(idCard)) {
|
||
message("请输入正确身份证号");
|
||
return false;
|
||
}
|
||
if (!address) {
|
||
message("请输入联系地址");
|
||
return false;
|
||
}
|
||
if (registrationData == 0) {
|
||
message("请选择登记类型");
|
||
return false;
|
||
}
|
||
if (registrationData == 1 && reasonData == "") {
|
||
message("请选择进山原因");
|
||
return false;
|
||
}
|
||
if (registrationData == 1 && reasonData=="项目施工" && !projectname) {
|
||
message("请输入项目名称");
|
||
return false;
|
||
}
|
||
|
||
// 提交
|
||
postMessage({
|
||
id: 0,
|
||
userName: name,
|
||
phone: phone,
|
||
inType: 1,
|
||
cardNo: idCard,
|
||
userAddress: address,
|
||
siteId: urlParams.siteId,
|
||
registrationType: registrationData,
|
||
reason: registrationData == 1 ? reasonData : null,
|
||
projectName:registrationData == 1 && reasonData == '项目施工' ? projectname : null
|
||
});
|
||
}
|
||
|
||
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>
|