163 lines
7.6 KiB
HTML
163 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
|
|
<title>登录</title>
|
|
<link href="../static/component/pear/css/pear.css" rel="stylesheet"/>
|
|
<link href="../static/admin/css/other/login.css" rel="stylesheet"/>
|
|
<link href="../static/admin/css/variables.css" rel="stylesheet"/>
|
|
<script>if (window.self !== window.top) {
|
|
top.location.reload();
|
|
}</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-page" style="background-image: url(../static/admin/images/background.svg)">
|
|
<div class="layui-row">
|
|
<div class="layui-col-sm6 login-bg layui-hide-xs">
|
|
<img alt="" class="login-bg-img" src="../static/admin/images/banner.png"/>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-xs12 login-form">
|
|
<div class="layui-form">
|
|
<div class="form-center">
|
|
<div class="form-center-box">
|
|
<div class="top-log-title">
|
|
<!-- <img class="top-log" src="http://www.layui-vue.com/assets/logo.685dda16.jpg" alt=""/>-->
|
|
<span>卡密核销结算平台</span>
|
|
</div>
|
|
<!-- <div class="top-desc">-->
|
|
<!-- 以 超 乎 想 象 的 速 度 构 建 内 部 工 具-->
|
|
<!-- </div>-->
|
|
<div style="margin-top: 30px;">
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-username"></i>
|
|
</div>
|
|
<input autocomplete="off" class="layui-input" lay-verify="required" name="username"
|
|
placeholder="账户">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-password"></i>
|
|
</div>
|
|
<input autocomplete="off" class="layui-input" lay-affix="eye"
|
|
lay-verify="required|confirmPassword" name="password" placeholder="密码"
|
|
type="password" value="">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-snowflake"></i>
|
|
</div>
|
|
<input autocomplete="off" class="layui-input" lay-affix="eye"
|
|
name="totpCode" placeholder="二次验证" value="">
|
|
</div>
|
|
</div>
|
|
<div class="tab-log-verification">
|
|
<div class="verification-text">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-auz"></i>
|
|
</div>
|
|
<input autocomplete="off" class="layui-input" lay-verify="required" name="code"
|
|
placeholder="验证码" value="">
|
|
</div>
|
|
</div>
|
|
<img alt="" class="verification-img" id="captchaImage" src=""/>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="remember-passsword">
|
|
<div class="remember-cehcked">
|
|
<input lay-skin="primary" name="remember" title="记住密码" type="checkbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-btn">
|
|
<button class="layui-btn login" lay-filter="login" lay-submit type="button">登 录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 资 源 引 入 -->
|
|
<script src="../static/component/layui/layui.js"></script>
|
|
<script src="../static/component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(['form', 'button', 'popup'], function () {
|
|
const form = layui.form;
|
|
const button = layui.button;
|
|
const popup = layui.popup,
|
|
$ = layui.jquery,
|
|
layer = layui.layer;
|
|
//得到图形验证码和id
|
|
document.getElementById("captchaImage").src = "/getVerifyImg?rand=" + new Date().getTime()
|
|
|
|
function referCaptchaImage() {
|
|
document.getElementById("captchaImage").src = "/getVerifyImg?rand=" + new Date().getTime()
|
|
}
|
|
|
|
// 读取缓存
|
|
const loginInfo = localStorage.getItem("loginInfo");
|
|
if (loginInfo !== "" && loginInfo !== null) {
|
|
const loginInfoObj = JSON.parse(loginInfo);
|
|
$("input[name='username']").val(loginInfoObj.username);
|
|
$("input[name='password']").val(loginInfoObj.password);
|
|
$("input[name='remember']").prop("checked", true);
|
|
}
|
|
$("#captchaImage").click(function () {
|
|
referCaptchaImage();
|
|
})
|
|
setInterval(function () {
|
|
referCaptchaImage()
|
|
}, 180 * 1000);
|
|
// 登 录 提 交
|
|
form.on('submit(login)', function (data) {
|
|
const loader = layer.load();
|
|
const btn = button.load({elem: '.login'});
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/login",
|
|
dataType: 'json',
|
|
data: {
|
|
userID: data.field.username,
|
|
passwd: data.field.password,
|
|
Code: data.field.code,
|
|
totpCode: data.field.totpCode,
|
|
},
|
|
dataType: "JSON",
|
|
success: function (result) {
|
|
console.log(result)
|
|
if (result.Code === 0) {
|
|
layer.close(loader);
|
|
btn.stop();
|
|
if (data.field.remember) {
|
|
// 加密保存登录信息到 localStorage
|
|
localStorage.setItem("loginInfo", JSON.stringify(data.field));
|
|
} else {
|
|
localStorage.removeItem("loginInfo");
|
|
}
|
|
window.parent.location = "/index.html";
|
|
} else {
|
|
layer.close(loader);
|
|
btn.stop();
|
|
referCaptchaImage();
|
|
layer.msg(result.Msg);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|