shangxiashansaomadengji/index.html

504 lines
14 KiB
HTML
Raw Normal View History

2023-08-26 16:52:17 +08:00
<!DOCTYPE html>
<html>
2023-11-21 10:27:34 +08:00
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2023-11-20 09:24:03 +08:00
<title>上下山人员信息登记</title>
2023-08-26 16:52:17 +08:00
<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>
2023-11-21 10:27:34 +08:00
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
body {
font-family: "Helvetica Neue", sans-serif;
background-color: #f4f5f7;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.top {
width: 100%;
height: 200px;
background-color: #029561;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
h1 {
text-align: center;
color: #ffffff;
font-size: 30px;
font-weight: bold;
text-shadow: 1px 1px 1px #ccc;
margin-top: -122px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
form {
border-radius: 21px 21px 0 0;
box-sizing: border-box;
padding: 18px;
width: 100%;
background-color: #f4f5f7;
margin: 45px auto 0;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.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;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
label {
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #2a2a2a;
line-height: 21px;
letter-spacing: 1px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
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;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
input:focus {
outline: none;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
input[type="text"]::-webkit-input-placeholder {
color: #aab2bd;
font-size: 15px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
input[type="tel"]::-webkit-input-placeholder {
color: #aab2bd;
font-size: 15px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
input[type="number"]::-webkit-input-placeholder {
color: #aab2bd;
font-size: 15px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.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;
2024-05-14 15:51:04 +08:00
text-align: center;
line-height:49px;
2023-11-21 10:27:34 +08:00
color: #ffffff;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.submit:hover {
background-color: #005400;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.xieyi {
display: none;
width: 100%;
height: 100%;
overflow: scroll;
background: #fff;
position: fixed;
top: 0;
padding: 20px;
}
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
.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;
}
2023-08-26 16:52:17 +08:00
</style>
2023-11-21 10:27:34 +08:00
</head>
2023-08-26 16:52:17 +08:00
2023-11-21 10:27:34 +08:00
<body>
<div class="top"></div>
2023-11-20 09:24:03 +08:00
<h1>上下山人员信息登记</h1>
2023-08-26 16:52:17 +08:00
<form>
2023-11-21 10:27:34 +08:00
<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"
2024-05-14 15:51:04 +08:00
onblur="phoneChange(this)"
2023-11-21 10:27:34 +08:00
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>
2023-08-26 16:52:17 +08:00
</div>
2023-11-21 10:27:34 +08:00
</div>
2024-05-14 15:51:04 +08:00
2023-11-21 10:27:34 +08:00
<div class="form-item" id="inreason-item">
<label for="inreasonSelect">进山原因</label>
<div class="selectreason" onclick="openReasonItem()" id="form-reason">
选择
2023-08-26 16:52:17 +08:00
</div>
2023-11-21 10:27:34 +08:00
</div>
2024-05-14 15:51:04 +08:00
<div class="form-item" id="projectname-item">
<label for="projectname">项目名称*</label>
<input
type="text"
id="projectname"
name="projectname"
placeholder="请输入项目名称"
required
/>
</div>
2023-11-21 10:27:34 +08:00
<!-- <div class="form-item" id="inreason">
2023-08-26 16:52:17 +08:00
<label for="reason">进山原因</label>
<input type="text" id="reason" name="reason" placeholder="请输入进山原因">
2023-11-21 08:29:54 +08:00
</div> -->
2024-05-14 15:51:04 +08:00
<div class="submit" onclick="submit()">登记</div>
2023-08-26 16:52:17 +08:00
</form>
2023-11-21 10:27:34 +08:00
<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参数错误");
}
2023-11-21 08:29:54 +08:00
// 获取进出山原因字典数据
2023-11-21 10:27:34 +08:00
function getReason() {
$.ajax({
method: "GET",
url: `${URL}/api/Categorys/LoadList?typeid=PERSONAL_TYPE`,
contentType: "application/json;charset=utf-8",
success: function (response) {
2024-05-14 15:51:04 +08:00
if (response.code === 200 && response.result) {
2023-11-21 10:27:34 +08:00
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();
2024-05-14 15:51:04 +08:00
// if(localStorage.getItem("phone")){
// }
2023-11-21 10:27:34 +08:00
} else {
}
},
});
2023-11-21 08:29:54 +08:00
}
2024-05-14 15:51:04 +08:00
2023-11-21 08:29:54 +08:00
getReason();
2023-11-21 10:27:34 +08:00
let registrationData = 0; //默认的上下山,不选
let reasonData = ""; //默认的进山原因
$("#inreason-item").hide();
2024-05-14 15:51:04 +08:00
$("#projectname-item").hide(); // 隐藏项目名称
2023-11-21 10:27:34 +08:00
//选择上下山原因
function selectRegistration(registration, _this) {
registrationData = registration;
if (registration == 1) {
$("#inreason-item").show();
} else {
2024-05-14 15:51:04 +08:00
// 项目名称
document.getElementById("projectname").value = "";
$("#projectname-item").hide();
localStorage.setItem("projectname","");
2023-11-21 10:27:34 +08:00
$("#inreason-item").hide();
reasonData = "";
$("#form-reason").text("选择");
}
$(".registration-btn").removeClass("registration-btn-select");
$(_this).addClass("registration-btn-select");
2023-08-26 16:52:17 +08:00
}
2023-11-21 08:29:54 +08:00
2023-11-21 10:27:34 +08:00
function openReasonItem() {
$("#reason-box").removeClass("hidden");
}
function selectReason(name) {
reasonData = name;
$("#form-reason").text(name);
2024-05-14 15:51:04 +08:00
if(reasonData == "项目施工"){
document.getElementById("projectname").value = "";
$("#projectname-item").show();
}else{
document.getElementById("projectname").value = "";
$("#projectname-item").hide();
localStorage.setItem("projectname","");
}
2023-11-21 10:27:34 +08:00
}
2023-11-21 08:29:54 +08:00
2023-11-21 10:27:34 +08:00
// 初始化表单数据
function initFormData() {
// 获取表单元素
const nameInput = document.getElementById("name");
const phoneInput = document.getElementById("phone");
const idCardInput = document.getElementById("idCard");
const addressInput = document.getElementById("address");
2024-05-14 15:51:04 +08:00
const projectNameInput = document.getElementById("projectname");
2023-11-21 10:27:34 +08:00
// 从localStorage里读取数据
const name = localStorage.getItem("name");
const phone = localStorage.getItem("phone");
const idCard = localStorage.getItem("idCard");
const address = localStorage.getItem("address");
2024-05-14 15:51:04 +08:00
const projectname = localStorage.getItem("projectname")
2023-11-21 10:27:34 +08:00
// 将数据填充到表单里
nameInput.value = name;
phoneInput.value = phone;
idCardInput.value = idCard;
addressInput.value = address;
2024-05-14 15:51:04 +08:00
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("未知错误");
}
},
});
2023-08-26 16:52:17 +08:00
}
// 监听表单提交事件
2023-11-21 10:27:34 +08:00
function submit() {
// 获取填写的数据
2024-05-14 15:51:04 +08:00
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;
2023-11-21 08:29:54 +08:00
2023-11-21 10:27:34 +08:00
// 存储到localStorage
localStorage.setItem("name", name);
localStorage.setItem("phone", phone);
localStorage.setItem("idCard", idCard);
localStorage.setItem("address", address);
2024-05-14 15:51:04 +08:00
localStorage.setItem("projectname",projectname);
2023-11-21 10:27:34 +08:00
// 表单验证
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;
}
2024-05-14 15:51:04 +08:00
if (!address) {
message("请输入联系地址");
return false;
}
2023-11-21 10:27:34 +08:00
if (registrationData == 0) {
message("请选择登记类型");
return false;
}
if (registrationData == 1 && reasonData == "") {
message("请选择进山原因");
return false;
}
2024-05-14 15:51:04 +08:00
if (registrationData == 1 && reasonData=="项目施工" && !projectname) {
message("请输入项目名称");
return false;
}
2023-11-21 10:27:34 +08:00
// 提交
postMessage({
id: 0,
userName: name,
phone: phone,
inType: 1,
cardNo: idCard,
userAddress: address,
siteId: urlParams.siteId,
registrationType: registrationData,
reason: registrationData == 1 ? reasonData : null,
2024-05-14 15:51:04 +08:00
projectName:registrationData == 1 && reasonData == '项目施工' ? projectname : null
2023-11-21 10:27:34 +08:00
});
2023-08-26 16:52:17 +08:00
}
2023-11-21 10:27:34 +08:00
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("未知错误");
}
},
});
}
2024-05-14 15:51:04 +08:00
2023-11-21 10:27:34 +08:00
</script>
</html>