334 lines
14 KiB
HTML
334 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="./css/login.css">
|
||
<title>登录</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js"></script>
|
||
</head>
|
||
<!-- 嵌入头部 -->
|
||
<script type="text/javascript" src="./js/jquery.js"></script>
|
||
<script>
|
||
$(function() {
|
||
$("#header").load("./header.html");
|
||
});
|
||
$(function() {
|
||
$("#footer").load("./footer.html");
|
||
});
|
||
</script>
|
||
<body>
|
||
<div class="login">
|
||
<!-- 头部占位 -->
|
||
<div id="header"></div>
|
||
|
||
<!-- 页面内容 -->
|
||
<div class="login--content-wrap" style="background-color: #fff; margin-top: 5%;">
|
||
|
||
<img src="images/login_content_left.jpg" style="margin-right: 20px; flex: 1; " />
|
||
|
||
<div style="display: flex;flex-direction: column; margin: 20px 10px;width: 100%; flex: 0.6;">
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||
|
||
<div style="width: 6px; height:40px;background-color: #238BF0;"></div>
|
||
<div style="color: #238BF0;font-size: 28px;margin-left: 15px;">账号登录</div>
|
||
</div>
|
||
|
||
<div class="popup-content__item" style="margin-top: 40px; margin-left: 20px;">
|
||
<input class="input" type="text" placeholder="手机号" id="loginPhone" />
|
||
</div>
|
||
<div class="popup-content__item" style="margin-left: 20px;">
|
||
<input class="input" type="password" placeholder="登录密码" id="loginPsw" />
|
||
</div>
|
||
<div class="popup-content__item popup-content__item3" style="margin-left: 20px;">
|
||
<input class="inputCode" type="text" placeholder="验证码" id="loginCode" />
|
||
<div class="codeImage" style="margin-left: 30px;"><img id="codeImg1"
|
||
onclick="changeCodeImg1()" class="img" style="height: 56px;"></div>
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: column; align-items: center;justify-content: center;width: 100%;
|
||
margin-top: 20px;">
|
||
<div class="popup-content__btn" style="background-color: #238BF0; width: 32rem; "
|
||
onclick="login()">
|
||
登录
|
||
</div>
|
||
<div style="display: flex;flex-direction: row; justify-content: right; width: 30.8rem !important;
|
||
margin-top: 5px;">
|
||
<div style="color: #238BF0; font-size: 18px;cursor: pointer"
|
||
onclick="openPopup()">注册</div>
|
||
<!-- <div style="color: #238BF0;font-size: 18px;" onclick="forgetPsw()">忘记密码?</div>-->
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 注册弹窗 -->
|
||
<div id="mask" class="mask"></div>
|
||
<div id="popup" class="secure-popup" style="display:none;">
|
||
<div class="secure-popup__close" onclick="closePopup()">
|
||
<img src="./images/close.png">
|
||
</div>
|
||
<div class="popup-content">
|
||
<div class="popup-content__item">注册</div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名"
|
||
id="registerName" />
|
||
</div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||
id="registerPhone" /></div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||
id="registerCompany" /></div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||
id="registerPsw" />
|
||
</div>
|
||
<div class="popup-content__item popup-content__item2">
|
||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||
<div class="codeImage"><img id="codeImg2" onclick="changeCodeImg2()" class="img"
|
||
style="height: 56px"></div>
|
||
</div>
|
||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 注册弹窗
|
||
<div id="mask1" class="mask"></div>
|
||
<div id="popup1" class="secure-popup" style="display:none;">
|
||
<div class="secure-popup__close" onclick="closePopup1()">
|
||
<img src="./images/close.png">
|
||
</div>
|
||
<div class="popup-content">
|
||
<div class="popup-content__item"></div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名"
|
||
id="registerName" />
|
||
</div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||
id="registerPhone" /></div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||
id="registerCompany" /></div>
|
||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||
id="registerPsw" />
|
||
</div>
|
||
<div class="popup-content__item popup-content__item2">
|
||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
|
||
style="height: 56px;background-color: #f0f;"></div>
|
||
</div>
|
||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
|
||
<!-- 底部占位 -->
|
||
<div id="footer"></div>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
|
||
function hash(s) {
|
||
try {
|
||
// 1. 计算MD5哈希
|
||
const md5Hash = md5(s);
|
||
// 2. 返回结果（md5函数已经返回16进制字符串）
|
||
return md5Hash;
|
||
} catch (e) {
|
||
console.error("加密失败:", e);
|
||
return s;
|
||
}
|
||
}
|
||
|
||
var time1 = Date.now()
|
||
|
||
var time2 = ''
|
||
|
||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + time1);
|
||
|
||
function openPopup() {
|
||
document.getElementById("popup").style.display = "block";
|
||
document.getElementById("mask").style.display = "block";
|
||
|
||
time2 = Date.now()
|
||
|
||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||
time2);
|
||
}
|
||
|
||
function closePopup() {
|
||
document.getElementById("popup").style.display = "none";
|
||
document.getElementById("mask").style.display = "none";
|
||
}
|
||
// 忘记密码
|
||
function forgetPsw() {
|
||
// document.getElementById("popup1").style.display = "block";
|
||
// document.getElementById("mask1").style.display = "block";
|
||
// $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||
|
||
alert('功能正在完善,请联系官方客服:123456789');
|
||
}
|
||
|
||
function closePopup1() {
|
||
document.getElementById("popup1").style.display = "none";
|
||
document.getElementById("mask1").style.display = "none";
|
||
}
|
||
|
||
// 登录
|
||
function login() {
|
||
let telephone = $('#loginPhone').val();
|
||
let password = $('#loginPsw').val();
|
||
let captcha = $('#loginCode').val();
|
||
|
||
$("#loginPhone").blur(function() {
|
||
if (!telephone) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#loginPsw").blur(function() {
|
||
if (!password) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#loginCode").blur(function() {
|
||
if (!captcha) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
|
||
if (!telephone) {
|
||
document.getElementById("loginPhone").classList.add("warning");
|
||
document.getElementById("loginPhone").setAttribute("placeholder", "请输入您的手机号");
|
||
}
|
||
if (!password) {
|
||
document.getElementById("loginPsw").classList.add("warning");
|
||
document.getElementById("loginPsw").setAttribute("placeholder", "请输入密码");
|
||
}
|
||
if (!captcha) {
|
||
document.getElementById("loginCode").classList.add("warning");
|
||
document.getElementById("loginCode").setAttribute("placeholder", "请输入验证码");
|
||
return;
|
||
}
|
||
|
||
$.post('http://aos.yyundong.com/ycsafe/website/login', {
|
||
'telephone': telephone,
|
||
'password': hash(password),
|
||
'captcha': captcha,
|
||
'timestamp': time1
|
||
|
||
}, function(resp) {
|
||
|
||
if (!!resp && !!resp.result) {
|
||
window.location.href = 'serve.html';
|
||
//
|
||
// // 存储数据
|
||
// localStorage.setItem('userName', resp.result.enterpriseName);
|
||
//
|
||
// // 读取数据
|
||
// const value = localStorage.getItem('token');
|
||
// const sessionValue = sessionStorage.getItem('token');
|
||
// const userName = sessionStorage.getItem('userName');
|
||
|
||
// 存储数据
|
||
localStorage.setItem('token', document.cookie);
|
||
localStorage.setItem('userName', resp.enterpriseName+"");
|
||
localStorage.setItem('isLogin', resp.result);
|
||
} else {
|
||
alert(resp.message);
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
// 注册函数
|
||
function submitName() {
|
||
let name = $('#registerName').val();
|
||
let telephone = $('#registerPhone').val();
|
||
let companyName = $('#registerCompany').val();
|
||
let password = $('#registerPsw').val();
|
||
let captcha = $('#registerCode').val();
|
||
|
||
$("#registerName").blur(function() {
|
||
if (!name) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#registerPhone").blur(function() {
|
||
if (!telephone) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#inputCompany").blur(function() {
|
||
if (!companyName) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#registerPsw").blur(function() {
|
||
if (!password) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
$("#registerCode").blur(function() {
|
||
if (!captcha) {
|
||
$(this).removeClass("warning");
|
||
}
|
||
});
|
||
|
||
if (!name) {
|
||
document.getElementById("registerName").classList.add("warning");
|
||
document.getElementById("registerName").setAttribute("placeholder", "请输入您的姓名");
|
||
}
|
||
if (!telephone) {
|
||
document.getElementById("registerPhone").classList.add("warning");
|
||
document.getElementById("registerPhone").setAttribute("placeholder", "请输入您的电话");
|
||
}
|
||
if (!companyName) {
|
||
document.getElementById("registerCompany").classList.add("warning");
|
||
document.getElementById("registerCompany").setAttribute("placeholder", "请输入公司名称");
|
||
}
|
||
if (!companyName) {
|
||
document.getElementById("registerPsw").classList.add("warning");
|
||
document.getElementById("registerPsw").setAttribute("placeholder", "请输入密码");
|
||
}
|
||
if (!captcha) {
|
||
document.getElementById("registerCode").classList.add("warning");
|
||
document.getElementById("registerCode").setAttribute("placeholder", "请输入验证码");
|
||
return;
|
||
}
|
||
|
||
$.post('http://aos.yyundong.com/ycsafe/website/register', {
|
||
'name': name,
|
||
'password': password,
|
||
'telephone': telephone,
|
||
'enterpriseName': companyName,
|
||
'captcha': captcha,
|
||
'timestamp': time2,
|
||
}, function(resp) {
|
||
|
||
if (!!resp && !!resp.result) {
|
||
alert('注册成功');
|
||
closePopup()
|
||
} else {
|
||
alert(resp.message);
|
||
}
|
||
});
|
||
}
|
||
|
||
function changeCodeImg1() {
|
||
console.log("changeCodeImg1", Date.now());
|
||
|
||
time1 = Date.now()
|
||
|
||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||
time1);
|
||
}
|
||
|
||
function changeCodeImg2() {
|
||
time2 = Date.now()
|
||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||
time2);
|
||
}
|
||
</script>
|
||
</html>
|