apeblog/public/template/default/pc/user/login.html

120 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="zh">
<head>
<title>{:web_config('title')}-登录页</title>
<meta name="keywords" content="{:web_config('keywords')}">
<meta name="description" content="{:web_config('description')}">
{include file="public/head" /}
<link rel="stylesheet" href="__LIB__/swiper/swiper.min.css"/>
<script type="text/javascript" src="__LIB__/swiper/swiper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="__CSS__/login-plane.css">
<div id="app" class="login-background">
{include file="public/header" /}
<div class="header-zhanwei" style="min-height: 80px; width: 100%"></div>
<style>
#app {
background-image: url(__IMG__/login_backgroud.jpg);
}
</style>
<main class="container">
<div id="login-plane">
<div class="login-main">
<div id="login-note">提示</div>
<div class="login-form">
<div class="login-title">
<h3>登录账户</h3>
<span><a href="/index/user/register">注册用户</a></span>
</div>
<i class="fa fa-user ico-login" aria-hidden="true"></i>
<input class="input-login input-user" name="username" type="text" placeholder="请输入用户名/电子邮箱"/>
<i class="fa fa-key ico-login" aria-hidden="true"></i>
<input class="input-login input-pass" name="password" type="password" placeholder="请输入密码"/>
<div class="code-plane">
<img class="img-code" src="/index/user/captcha"
style="cursor: pointer;width: 120px;height: 38px;" alt=""/>
<input class="input-login input-code" name="captcha" type="text" placeholder="验证码"/>
</div>
<div class="login-title">
<label>
<input type="checkbox" id="remember" name="remember" value="true"/>
记住我的登录状态</label>
<a href="wp-login-lostpassword.html">忘记密码?</a>
</div>
<!-- <div class="thirdparty-plane">-->
<!-- <span class="login-thirdparty-btn">-->
<!-- <a href="javascript:;">-->
<!-- <img src="__IMG__/share-qq.svg"/>QQ登录-->
<!-- </a>-->
<!-- </span>-->
<!-- </div>-->
<div>
<button class="login-button" id="btn-login">登录</button>
</div>
</div>
</div>
</div>
</main>
<script>
$(".img-code").click(() => {
recodeimg();
});
$("#btn-login").click(() => {
login();
});
$(".input-code,.input-pass").bind("keypress", function (event) {
if (event.keyCode == "13") {
login();
}
});
function login() {
let username = $('input[name="username"]').val();
let password = $('input[name="password"]').val();
let captcha = $('input[name="captcha"]').val();
if (username === "" || password === "") {
return;
}
let remember = $("#remember").val();
$("#login-note").text("登录中,请稍后");
$("#login-note").css("visibility", "visible");
$.post(
"{:url('/index/user/verify')}",
{
action: "login",
username: username,
password: password,
remember: remember,
captcha: captcha,
},
(data) => {
console.log(data)
if (data) {
if (data.status === 200) {
$("#login-note").text("登录成功,跳转中");
window.location.href = getQueryVariable("redirect_to")
? decodeURIComponent(getQueryVariable("redirect_to"))
: "/";
} else {
$("#login-note").text(data.msg);
recodeimg();
}
} else {
}
}
);
}
function recodeimg() {
$(".img-code").attr(
"src",
"/index/user/captcha?d=" + Math.random()
);
}
</script>
{include file="public/footer"/}
</div>
</body>
</html>