369 lines
11 KiB
HTML
369 lines
11 KiB
HTML
{include file="public/head" /}
|
|
<style>
|
|
body.login-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f5f7fb;
|
|
}
|
|
|
|
.login-main {
|
|
flex: 1;
|
|
padding: 42px 0 56px;
|
|
}
|
|
|
|
.login-card {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border: 1px solid rgba(15, 23, 42, .08);
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-card__hd {
|
|
background: var(--main-color);
|
|
color: #fff;
|
|
padding: 18px 24px;
|
|
}
|
|
|
|
.login-card__hd h1 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.login-card__hd p {
|
|
margin: 6px 0 0;
|
|
color: rgba(255, 255, 255, .76);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.login-form {
|
|
padding: 28px 24px 26px;
|
|
}
|
|
|
|
.login-form .layui-form-item {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.login-form .layui-input-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.login-form .layui-input {
|
|
height: 50px;
|
|
border: 1px solid #d8dee8;
|
|
border-radius: 4px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.login-form .layui-input:focus {
|
|
border-color: var(--main-color) !important;
|
|
box-shadow: 0 0 0 3px rgba(21, 56, 84, .08);
|
|
}
|
|
|
|
.login-code-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 148px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.login-get {
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0 12px;
|
|
border-radius: 4px;
|
|
border-color: var(--main-color);
|
|
color: var(--main-color);
|
|
background: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.login-get:hover,
|
|
.login-get:focus {
|
|
border-color: var(--main-color);
|
|
color: var(--main-color);
|
|
background: rgba(21, 56, 84, .06);
|
|
}
|
|
|
|
.login-get[disabled] {
|
|
border-color: #d8dee8 !important;
|
|
color: #9aa3af !important;
|
|
background: #f6f7f9 !important;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.login-submit {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-radius: 6px;
|
|
background: var(--main-color);
|
|
border-color: var(--main-color);
|
|
font-size: 17px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.login-submit:hover,
|
|
.login-submit:focus {
|
|
background: #0f2b42;
|
|
border-color: #0f2b42;
|
|
}
|
|
|
|
.login-agreement {
|
|
margin-top: 2px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.login-agreement a {
|
|
color: var(--main-color);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.login-agreement a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.layui-form-checked[lay-skin=primary] > i {
|
|
border-color: var(--main-color) !important;
|
|
background-color: var(--main-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.login-terms {
|
|
padding: 20px;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
color: #333;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.login-terms h3 {
|
|
margin: 10px 0 8px;
|
|
color: var(--main-color);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.login-terms p {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.login-main {
|
|
padding: 24px 12px 36px;
|
|
}
|
|
|
|
.login-card__hd,
|
|
.login-form {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
|
|
.login-code-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
<body class="login-page">
|
|
{include file="public/newnav" /}
|
|
|
|
<main class="login-main">
|
|
<div class="layui-container">
|
|
<section class="login-card">
|
|
<div class="login-card__hd">
|
|
<h1>用户登录</h1>
|
|
<p>使用手机号验证码登录后，可查看订单进度和已提交的申请信息。</p>
|
|
</div>
|
|
|
|
<form class="layui-form login-form" autocomplete="off">
|
|
<div class="layui-form-item">
|
|
<div class="login-code-row">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-cellphone"></i>
|
|
</div>
|
|
<input type="text" name="phone" value="" lay-verify="required|phone"
|
|
placeholder="{:lang('visa.phone_number_placeholder')}"
|
|
lay-reqtext="{:lang('visa.phone_number_placeholder')}" autocomplete="off"
|
|
class="layui-input" id="reg-cellphone">
|
|
</div>
|
|
<input class="login-get layui-btn layui-btn-primary" type="button"
|
|
id="getcode" value="获取验证码" lay-on="reg-get-vercode">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-vercode"></i>
|
|
</div>
|
|
<input type="text" name="vercode" value="" lay-verify="required"
|
|
placeholder="{:lang('contact.yzm')}" lay-reqtext="请填写验证码"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item login-agreement">
|
|
<input type="checkbox" lay-filter="termsCheckbox" name="agreement" lay-skin="primary"
|
|
title="{:lang('visa.terms_acceptance')}" checked
|
|
lay-verify="required|checkboxRequired">
|
|
</div>
|
|
|
|
<div class="layui-form-item" style="margin-bottom: 0;">
|
|
<button class="layui-btn layui-btn-fluid login-submit" lay-submit lay-filter="demo-reg">登录</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
{include file="public/newfooter" /}
|
|
|
|
<script>
|
|
layui.use(function () {
|
|
var $ = layui.$;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var util = layui.util;
|
|
var wait = 60;
|
|
var timer = null;
|
|
|
|
form.verify({
|
|
checkboxRequired: function () {
|
|
if (!$('input[name="agreement"]').prop('checked')) {
|
|
return '请先阅读并接受《条款与条件》及《隐私政策》';
|
|
}
|
|
}
|
|
});
|
|
|
|
function getLayerArea() {
|
|
return window.innerWidth <= 768 ? ['90%', '90%'] : ['50%', '60%'];
|
|
}
|
|
|
|
function openTermsDialog() {
|
|
layer.open({
|
|
type: 1,
|
|
title: '{:lang(\'js.terms_privacy_title\')}',
|
|
area: getLayerArea(),
|
|
btn: ['关闭'],
|
|
content: `
|
|
<div class="login-terms">
|
|
<h3>{:lang('js.terms_conditions')}</h3>
|
|
<p>{:str_replace('%country%', $country ?? '', lang('js.terms_intro'))}</p>
|
|
<p>{:str_replace('%country%', $country ?? '', lang('js.our_services'))}</p>
|
|
<p>{:str_replace('%country%', $country ?? '', lang('js.application_process'))}</p>
|
|
<p>{:lang('js.read_confirmation')}</p>
|
|
|
|
<h3>{:lang('js.privacy_policy')}</h3>
|
|
<p>{:lang('js.privacy_intro')}</p>
|
|
<h3>1. {:lang('js.scope')}</h3>
|
|
<p>{:lang('js.scope_content')}</p>
|
|
<h3>2. {:lang('js.information_use')}</h3>
|
|
<p>{:lang('js.information_use_content')}</p>
|
|
<h3>3. {:lang('js.information_disclosure')}</h3>
|
|
<p>{:lang('js.information_disclosure_content')}</p>
|
|
<h3>4. {:lang('js.information_storage')}</h3>
|
|
<p>{:lang('js.information_storage_content')}</p>
|
|
<h3>5. {:lang('js.cookie_use')}</h3>
|
|
<p>{:lang('js.cookie_use_content')}</p>
|
|
<h3>6. {:lang('js.information_security')}</h3>
|
|
<p>{:lang('js.information_security_content')}</p>
|
|
<h3>7. {:lang('js.policy_changes')}</h3>
|
|
<p>{:lang('js.policy_changes_content')}</p>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
form.on('checkbox(termsCheckbox)', function (data) {
|
|
if (data.elem.checked) {
|
|
openTermsDialog();
|
|
}
|
|
});
|
|
|
|
form.on('submit(demo-reg)', function (data) {
|
|
if (!data.field.agreement) {
|
|
layer.msg('请先阅读并接受《条款与条件》及《隐私政策》', {icon: 2});
|
|
return false;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/home/login/login',
|
|
type: 'post',
|
|
data: data.field,
|
|
success: function (res) {
|
|
if (res.code == 1) {
|
|
layer.msg('登录成功', {icon: 1}, function () {
|
|
window.location.href = res.url;
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2});
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('请求失败，请稍后重试', {icon: 2});
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
|
|
function settime() {
|
|
var $code = $('#getcode');
|
|
|
|
if (wait <= 0) {
|
|
$code.removeAttr('disabled').val('获取验证码');
|
|
wait = 60;
|
|
timer = null;
|
|
return;
|
|
}
|
|
|
|
$code.prop('disabled', true).val('重新发送 ' + wait + 's');
|
|
wait--;
|
|
timer = setTimeout(settime, 1000);
|
|
}
|
|
|
|
util.on('lay-on', {
|
|
'reg-get-vercode': function () {
|
|
var isvalid = form.validate('#reg-cellphone');
|
|
|
|
if (isvalid) {
|
|
$.ajax({
|
|
url: '/home/login/login_code',
|
|
type: 'POST',
|
|
data: {mobile: $('#reg-cellphone').val()},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data.code == 1) {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
wait = 60;
|
|
settime();
|
|
} else {
|
|
layer.msg(data.msg, {icon: 2});
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('验证码发送失败，请稍后重试', {icon: 2});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|