238 lines
11 KiB
HTML
238 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{$site_name} 用户登录</title>
|
|
<meta http-equiv="Cache-Control" content="no-transform"/>
|
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
|
<meta name="applicable-device" content="pc,mobile">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
|
<script src="/static/js/layui/layui.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/static/js/layui/css/font-awesome.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/static/js/layui/css/layui.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
|
|
<script src="/static/js/center.js?v={:release()}"></script>
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
|
|
</head>
|
|
<body>
|
|
<div id="header"></div>
|
|
<div id="content" class="userLogin layui-fluid">
|
|
<div class="formLogin form-items active">
|
|
<div class="layui-tab layui-tab-brief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this" data-action="login">账号登录</li>
|
|
<li data-action="mobileLogin">免密登录</li>
|
|
</ul>
|
|
<div class="layui-tab-content pb0">
|
|
<div class="layui-tab-item layui-show">
|
|
<form class="layui-form login" action="/index/user/login" method="post">
|
|
<div class="layui-form-item item-input">
|
|
<input type="text" id="nickname" name="nickname" lay-verify="required" data-title="账号"
|
|
placeholder="{:__('请输入账号或邮箱')}" class="inputStyle" value="">
|
|
</div>
|
|
<div class="layui-form-item item-input">
|
|
<input type="password" id="pwd" name="pwd" lay-verify="required" data-title="密码"
|
|
maxlength="32"
|
|
placeholder="{:__('密码')}" class="inputStyle" value="">
|
|
<span class="fr-icon visiblePwd"><i class="layui-icon layui-icon-eye-invisible"></i></span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<form class="layui-form mobileLogin" action="/index/user/mobileLogin" method="post">
|
|
<div class="layui-form-item item-input">
|
|
<input type="text" id="mobile" name="mobile" lay-verify="required" data-title="手机号"
|
|
placeholder="{:__('请输入手机号码')}" class="inputStyle mobile" value="15100000000">
|
|
</div>
|
|
<div class="layui-form-item item-input">
|
|
<input type="text" id="captcha" name="captcha" lay-verify="required" data-title="验证码"
|
|
maxlength="6"
|
|
placeholder="{:__('验证码')}" class="inputStyle" value="123456">
|
|
<input type="text" hidden name="event" class="event" value="login">
|
|
<span class="fr-icon getCaptcha" lay-ajax data-url="/api/ajax/smsSend"
|
|
data-object="mobile:mobile,event:event">获取验证码</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form">
|
|
<input type="hidden" id="token" name="__token__" value="{:token()}"/>
|
|
<div class="layui-form-item">
|
|
<div class="fl">
|
|
<input type="checkbox" name="remember" lay-skin="primary"
|
|
title="{:__('记住密码')}" checked>
|
|
</div>
|
|
<div class="fr">
|
|
<a lay-open data-title="找回密码" data-area="500px,320px" data-object="top"
|
|
data-url="/index/user/forgot"
|
|
class="forgot-link" style="margin-top: 7px;">{:__('忘记密码？')}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<input id="iframeSubmit" type="submit" value="{:__('立即登录')}"
|
|
class="layui-btn layui-btn-login layui-btn-fluid layui-btn-normal">
|
|
</div>
|
|
<div class="agreement">
|
|
<span>未注册手机验证后自动登录，注册即代表同意<a href="#">《用户协议》</a>以及网站<a
|
|
href="#">《隐私保护指引》</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scanLogin form-items">
|
|
<div class="qrcode-title">扫码登录</div>
|
|
<div class="qrcode-Box">
|
|
<div class="qrcode-img" id="qrcode" title="">
|
|
<canvas width="150" height="150" style="display: none;"></canvas>
|
|
<img id="scanCover" src="/static/images/qrcode-qun.png" style="display: block;" width="150" height="150"
|
|
alt="Scan me!">
|
|
</div>
|
|
<p>打开<a href="#" target="_blank" rel="noopener noreferrer">{$site_name} App</a></p>
|
|
<p>在「我的」页面右上角打开扫一扫</p>
|
|
</div>
|
|
</div>
|
|
<div class="loginLine"></div>
|
|
<div class="socialLogin">
|
|
<span class="social-title">社交帐号登录</span>
|
|
<div class="social-group">
|
|
<a class="social-item" href="{:url('/index/third/login',['type'=>'weixin'])}&ref={$referer}"
|
|
target="_top">
|
|
<span>
|
|
<i class="layui-icon layui-icon-login-wechat"></i>
|
|
<span class="tit">微信</span>
|
|
</span>
|
|
</a>
|
|
<a class="social-item" href="{:url('/index/third/login',['type'=>'qq'])}&ref={$referer}"
|
|
target="_top">
|
|
<span>
|
|
<i class="layui-icon layui-icon-login-qq"></i>
|
|
<span class="tit">QQ</span>
|
|
</span>
|
|
</a>
|
|
<a class="social-item" href="{:url('/index/third/login',['type'=>'weibo'])}&ref={$referer}"
|
|
target="_top">
|
|
<span><i class="layui-icon layui-icon-login-weibo"></i>
|
|
<span class="tit">微博</span></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="appUserDown">
|
|
<div class="fr">
|
|
<a class="link" href="#" target="_top">
|
|
<span>
|
|
<i class="layui-icon layui-icon-ios"></i>
|
|
<i class="layui-icon layui-icon-android"></i>
|
|
<i class="layui-icon layui-icon-windows"></i>
|
|
<span class="tit">下载 APP</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="switchTabs" id="switchTabs">
|
|
<img class="switch-item active" data-action="scanLogin" src="/static/images/qrcode-login.png" alt="qrcode">
|
|
<img class="switch-item" data-action="login" src="/static/images/mobile-login.png" alt="qrcode">
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
layui.use(['jquery', 'layer'], function (e) {
|
|
|
|
let $ = layui.jquery;
|
|
let layer = layui.layer;
|
|
let queryTicket = null;
|
|
|
|
/* 点击执行登录 */
|
|
$('#iframeSubmit').click(function (e) {
|
|
let data = {};
|
|
let action = $('li.layui-this').data('action');
|
|
let form = $('form.' + action);
|
|
form.find('input').each(function (index, item) {
|
|
let value = $(item).val();
|
|
let name = $(item).attr('name');
|
|
let title = $(item).data('title');
|
|
if (!value) {
|
|
layer.msg(title + '不能为空', {icon: 5});
|
|
$(item).focus();
|
|
return false;
|
|
}
|
|
data[name] = value;
|
|
});
|
|
|
|
/* 发送登录数据 */
|
|
if (Object.keys(data).length >= 2) {
|
|
$.post(form.attr('action'), data, function (res) {
|
|
if (res.code === 200) {
|
|
layer.msg(res.msg);
|
|
setTimeout(function () {
|
|
window.location.href = '/index/user/index';
|
|
}, 1000);
|
|
} else {
|
|
layui.notice.error({
|
|
message: res.msg
|
|
});
|
|
}
|
|
}, 'json');
|
|
}
|
|
})
|
|
|
|
/* 显示隐藏密码 */
|
|
$('.visiblePwd').click(function () {
|
|
let type = $('#pwd').attr('type');
|
|
if (type === 'password') {
|
|
$('#pwd').attr('type', 'text');
|
|
$(this).find('i.layui-icon').addClass('layui-icon-eye').removeClass('layui-icon-eye-invisible');
|
|
} else {
|
|
$('#pwd').attr('type', 'password');
|
|
$(this).find('i.layui-icon').addClass('layui-icon-eye-invisible').removeClass('layui-icon-eye');
|
|
}
|
|
});
|
|
|
|
/* 切换登录方式 */
|
|
$("#switchTabs .switch-item").click(function () {
|
|
$(this).removeClass('active');
|
|
let action = $(this).data('action');
|
|
$("#switchTabs .switch-item").not($(this)).addClass('active');
|
|
if (action === 'scanLogin') {
|
|
$('.scanLogin').addClass('active');
|
|
$('.formLogin').removeClass('active');
|
|
$.get('/index/user/scanLogin', {}, function (res) {
|
|
if (res.code === 200) {
|
|
!queryTicket && queryRequest(res.data.ticket);
|
|
$('#scanCover').attr('src', res.data.qrcode || '/static/images/qrcode.png');
|
|
} else {
|
|
layui.notice.error({
|
|
message: res.msg
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
clearInterval(queryTicket);
|
|
queryTicket = null;
|
|
$('.formLogin').addClass('active');
|
|
$('.scanLogin').removeClass('active');
|
|
}
|
|
});
|
|
|
|
/* 定时器 */
|
|
const queryRequest = function (ticket) {
|
|
queryTicket = setInterval(function () {
|
|
$.post('/index/user/scanTicket', {
|
|
ticket: ticket,
|
|
}, function (res) {
|
|
if (res.code === 200) {
|
|
clearInterval(queryTicket);
|
|
top.layer.msg(res.msg);
|
|
top.location.reload();
|
|
}
|
|
}, 'json');
|
|
}, 1000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |