djangoadmin/djangoadmin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化升级

Browse Source
This commit is contained in:
gitadmin
2026-09-17 12:12:55 +08:00
parent 4ecb1a0a43
commit 00cfabb822
72 changed files with 669 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
xiaomayi-modules/xiaomayi-web/src/main/resources/static/assets/css/main.css
+24 -8
View File
@@ -2062,14 +2062,30 @@ a.icon-text > .layui-icon {
.ew-vip-badge {
position: absolute;
right: 0;
bottom: 0;
background-color: #ff6700;
color: #fff;
border-radius: 2px;
padding: 0 5px;
font-size: 12px;
line-height: 16px
right: -6px;
bottom: -6px;
background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
background-size: 200% 200%;
animation: vipShimmer 3s ease infinite;
color: #7a5a00;
border-radius: 20px;
padding: 2px 12px;
font-size: 11px;
font-weight: 800;
line-height: 18px;
letter-spacing: 2px;
box-shadow: 0 2px 10px rgba(191, 149, 63, 0.5), 0 0 20px rgba(252, 246, 186, 0.3);
border: 2px solid rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
@keyframes vipShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.user-info-head.vip {
border: 2px solid #f0e6d0;
box-shadow: 0 0 0 3px rgba(191, 149, 63, 0.2), 0 4px 12px rgba(191, 149, 63, 0.15);
}
.ew-tab-coupon > .layui-tab-title {
xiaomayi-modules/xiaomayi-web/src/main/resources/static/assets/images/login-img.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

xiaomayi-modules/xiaomayi-web/src/main/resources/templates/forget.html
+187 -56
View File
@@ -6,52 +6,180 @@
<!-- header -->
<div th:replace="~{./public/common_header::common_header}"></div>
<!-- login-wrapper -->
<div class="login-wrapper reg-wrapper">
<div class="layui-container">
<form class="layui-form">
<style>
.login-card-box {
display: flex;
width: 920px;
max-width: 96%;
height: 510px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
}
.login-card-pic {
flex: 1;
padding: 32px 8px;
box-sizing: border-box;
background-color: #1681fd;
background-image: url('/static/assets/images/login-img.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
text-align: center;
}
.login-card-pic-text h1 {
color: #ffffff;
font-size: 28px;
margin: 0 0 6px;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-pic-text p {
color: rgba(255,255,255,0.8);
font-size: 16px;
margin: 0;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-form {
width: 400px;
padding: 32px 36px 24px !important;
box-sizing: border-box;
margin: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.login-card-form h2 {
font-size: 22px;
font-weight: 700;
color: #0b1a33;
text-align: left;
margin-bottom: 22px;
}
.login-card-form .layui-form-item {
margin-bottom: 18px;
}
.login-card-form .layui-input {
height: 44px;
border-radius: 8px;
border-color: #e8edf5;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card-form .layui-input:focus {
border-color: #1681fd;
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
}
.login-card-form .login-captcha-group {
display: flex !important;
gap: 12px;
padding-right: 0 !important;
position: relative;
}
.login-card-form .login-captcha-group .layui-input {
flex: 1;
}
.login-card-form .login-captcha-group .layui-btn {
position: static !important;
width: 120px !important;
height: 44px !important;
border-radius: 8px !important;
background: #1681fd !important;
background-color: #1681fd !important;
color: #fff !important;
border: none !important;
flex-shrink: 0;
white-space: nowrap;
line-height: 44px !important;
}
.login-card-form .layui-text {
display: flex !important;
justify-content: flex-end !important;
margin-bottom: 18px;
padding: 0;
}
.login-card-form .layui-text a {
color: #1681fd;
font-size: 13px;
}
.login-card-form .layui-btn-fluid {
height: 46px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 4px;
background: #1681fd;
border: none;
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.login-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.login-wrapper:before { display: none; }
.login-card-form .layui-btn-fluid:hover {
background: #1270e0;
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
transform: translateY(-1px);
}
@media screen and (max-width: 800px) {
.login-card-box {
flex-direction: column;
width: 400px;
height: auto;
}
.login-card-pic {
width: 100%;
padding: 20px 12px 100px;
background-size: auto 100px;
}
.login-card-form {
width: 100%;
padding: 28px 24px 24px !important;
}
}
</style>
<!-- forget -->
<div class="login-wrapper">
<div class="login-card-box">
<!-- 左侧插图 -->
<div class="login-card-pic">
<div class="login-card-pic-text">
<h1>小蚂蚁云官方网站</h1>
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
</div>
</div>
<!-- 右侧表单 -->
<form class="layui-form login-card-form">
<h2>忘记密码</h2>
<div class="layui-form-item">
<label class="layui-form-label">邮箱账号</label>
<div class="layui-input-block">
<input class="layui-input" name="email" type="text" placeholder="请输入邮箱账号"
lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
</div>
<input class="layui-input" name="email" type="text" placeholder="请输入邮箱账号"
lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input class="layui-input" name="password" type="password" placeholder="请输入新的登录密码"
lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
</div>
<input class="layui-input" name="password" type="password" placeholder="请输入新的登录密码"
lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input class="layui-input" name="rePassword" type="password" placeholder="请再次输入新的登录密码"
lay-verType="tips" lay-verify="required|repeat" data-target="input[name=password]"
data-tips="两次密码输入不一致" required/>
</div>
<input class="layui-input" name="rePassword" type="password" placeholder="请再次输入新的登录密码"
lay-verType="tips" lay-verify="required|repeat" data-target="input[name=password]"
data-tips="两次密码输入不一致" required/>
</div>
<div class="layui-form-item" style="margin-bottom: 18px;">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block login-captcha-group">
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>
<button id="btnGetCode" type="button" class="layui-btn">获取验证码</button>
</div>
<div class="layui-form-item login-captcha-group">
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>
<button id="btnGetCode" type="button" class="layui-btn">获取验证码</button>
</div>
<div class="layui-form-item layui-text">
<div class="layui-input-block text-right" style="min-height: unset;">
<a href="login.html">返回登录</a>
</div>
<a href="/login">返回登录</a>
</div>
<div class="layui-form-item" style="margin-bottom: 35px;">
<div class="layui-input-block">
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="forgetSubmit" lay-submit>
修改密码
</button>
</div>
<div>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="forgetSubmit" lay-submit>修改密码</button>
</div>
</form>
</div>
@@ -79,7 +207,11 @@
var layer = layui.layer;
var form = layui.form;
// 表单提交
/**
* 忘记密码表单提交
* 将表单数据以JSON格式POST到/forget接口
* 成功后跳转至登录页，失败则弹出错误提示
*/
form.on('submit(forgetSubmit)', function (obj) {
var loadIndex = layer.msg('请求中...', {icon: 16, shade: 0.01});
$.ajax({
@@ -88,17 +220,10 @@
data: JSON.stringify(obj.field),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg('找回密码成功', {
icon: 1,
time: 1500
}, function () {
// 跳转至登录页
layer.msg('找回密码成功', {icon: 1, time: 1500}, function () {
location.href = '/login';
});
} else {
@@ -112,9 +237,16 @@
return false;
});
// 获取邮箱验证码
/**
* 获取邮箱验证码
* 1. 校验邮箱是否为空及格式是否正确
* 2. 弹出图形验证码弹窗
* 3. 用户输入图形验证码后，调用/sendEmail接口发送邮件验证码
* 4. 发送成功后启动60秒倒计时
*/
$('#btnGetCode').click(function () {
var $btn = $(this);
// 获取并校验邮箱
var $inputEmail = $('input[name="email"]');
var email = $inputEmail.val();
if (!email) {
@@ -133,11 +265,11 @@
skin: 'layui-layer-admin',
content: $('#layerGetCode').html(),
success: function () {
// 图形验证码点击事件
// 图形验证码图片点击刷新
$('.layer-get-code>.lay-code-group>img').click(function () {
this.src = this.src + '?t=' + new Date().getTime();
});
// 立即发送按钮点击事件
// 弹窗内"立即发送"按钮点击事件
$('.layer-get-code .layui-btn-fluid').click(function () {
var $input = $('.layer-get-code>.lay-code-group>input');
var captcha = $input.val();
@@ -145,8 +277,7 @@
layer.tips('请输入图形验证码', $input, {tips: [3, '#ff4c4c']});
return;
}
// layer.msg('发送成功，请注意查收', {icon: 1});
// layer.close(layIndex);
// 启动倒计时并发送邮件验证码请求
startTimer($btn);
var loadIndex = layer.msg('邮件发送中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
@@ -155,9 +286,6 @@
data: JSON.stringify({email: email, captcha: captcha, type: 3}),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
@@ -178,7 +306,11 @@
})
});
// 按钮开始倒计时
/**
* 按钮倒计时
* @param {Object} $btn - jQuery按钮对象
* @param {Number} second - 倒计时秒数，默认60秒
*/
function startTimer($btn, second) {
second || (second = 60);
$btn.attr('org-text', $btn.text());
@@ -198,11 +330,10 @@
}, 1000);
}
/* 图形验证码 */
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
$('img.forget-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
});
</script>
</body>
xiaomayi-modules/xiaomayi-web/src/main/resources/templates/login2.html
+200 -10
View File
@@ -8,8 +8,16 @@
<!-- login-wrapper -->
<div class="login-wrapper">
<div class="layui-container">
<form class="layui-form">
<div class="login-card-box">
<!-- 左侧插图 -->
<div class="login-card-pic">
<div class="login-card-pic-text">
<h1>小蚂蚁云官方网站</h1>
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
</div>
</div>
<!-- 右侧表单 -->
<form class="layui-form login-card-form">
<h2>用户登录</h2>
<div class="layui-form-item input-icon-group">
<i class="layui-icon layui-icon-username input-icon-left"></i>
@@ -29,19 +37,197 @@
</div>
<div class="layui-form-item layui-text">
<a href="/register">账号注册</a>
<a href="/forget" class="pull-right">忘记密码?</a>
<a href="/forget">忘记密码?</a>
</div>
<div>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="userLogin" lay-submit>登录</button>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="userLogin" lay-submit>登 录</button>
</div>
<div class="login-oauth-group">
<!-- <a id="goQqLogin" href="javascript:;" title="QQ授权登录"><i class="layui-icon layui-icon-login-qq"></i></a>-->
<!-- <a id="goWxLogin" href="javascript:;" title="微信授权登录"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
<div class="login-oauth-title"><span>其他登录方式</span></div>
<div class="login-oauth-icons">
<a id="goWxLogin" href="javascript:;" title="微信登录"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a id="goQqLogin" href="javascript:;" title="QQ登录"><i class="layui-icon layui-icon-login-qq"></i></a>
</div>
</div>
</form>
</div>
</div>
<style>
.login-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.login-wrapper:before {
display: none;
}
.login-card-box {
display: flex;
width: 920px;
max-width: 96%;
height: 510px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
}
.login-card-pic {
flex: 1;
padding: 32px 8px;
box-sizing: border-box;
background-color: #1681fd;
background-image: url('/static/assets/images/login-img.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
text-align: center;
}
.login-card-pic-text h1 {
color: #ffffff;
font-size: 28px;
margin: 0 0 6px;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-pic-text p {
color: rgba(255,255,255,0.8);
font-size: 16px;
margin: 0;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-form {
width: 400px;
padding: 36px 40px 28px !important;
box-sizing: border-box;
margin: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.login-card-form h2 {
font-size: 22px;
font-weight: 700;
color: #0b1a33;
text-align: left;
margin-bottom: 24px;
}
.login-card-form .input-icon-group .layui-input {
height: 44px;
border-radius: 8px;
border-color: #e8edf5;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card-form .input-icon-group .layui-input:focus {
border-color: #1681fd;
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
}
.login-card-form .input-icon-group .input-icon-left {
top: 50%;
transform: translateY(-50%);
color: #b0bec5;
}
.login-card-form .login-captcha-group .login-captcha {
height: 44px;
border-radius: 8px;
}
.login-card-form .layui-btn-fluid {
height: 46px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 4px;
background: #1681fd;
border: none;
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.login-card-form .layui-btn-fluid:hover {
background: #1270e0;
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
transform: translateY(-1px);
}
.login-card-form .layui-text {
display: flex !important;
justify-content: space-between !important;
align-items: center;
margin-bottom: 18px;
padding: 0;
}
.login-card-form .layui-text a:last-child {
margin-left: auto;
}
.login-card-form .layui-text a {
color: #1681fd;
font-size: 13px;
}
.login-card-form .login-oauth-group {
text-align: center;
padding-top: 20px;
}
.login-oauth-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.login-oauth-title span {
font-size: 12px;
color: #8b9ab5;
padding: 0 12px;
background: #fff;
position: relative;
}
.login-oauth-title:before,
.login-oauth-title:after {
content: '';
flex: 1;
height: 1px;
background: #e8edf5;
}
.login-oauth-icons {
display: flex;
justify-content: center;
gap: 24px;
}
.login-oauth-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #e8edf5;
color: #1681fd;
font-size: 20px;
transition: all 0.2s;
text-decoration: none;
}
.login-oauth-icons a:hover {
border-color: #1681fd;
background: rgba(22,129,253,0.08);
color: #1681fd;
}
@media screen and (max-width: 800px) {
.login-card-box {
flex-direction: column;
width: 400px;
height: auto;
}
.login-card-pic {
width: 100%;
padding: 20px 12px 100px;
background-size: auto 100px;
}
.login-card-form {
width: 100%;
padding: 28px 24px 24px !important;
}
}
</style>
<!-- js部分 -->
<!-- 引入脚部 -->
<script type="text/javascript" src="/static/assets/layui/layui.js"></script>
@@ -52,7 +238,11 @@
var layer = layui.layer;
var form = layui.form;
// 表单提交
/**
* 登录表单提交
* 将表单数据以JSON格式POST到/login接口
* 成功后跳转至用户订单页，失败则刷新验证码并弹出错误提示
*/
form.on('submit(userLogin)', function (data) {
var loadIndex = layer.load(2);
$.ajax({
@@ -95,17 +285,17 @@
return false;
});
/* 图形验证码 */
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
$('img.login-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
// QQ登录
/* QQ登录 - 暂未开放 */
$('#goQqLogin').click(function () {
layui.layer.msg('抱歉，QQ登录暂未开放', {icon: 5, anim: 6});
});
// 微信登录
/* 微信登录 - 暂未开放 */
$('#goWxLogin').click(function () {
layui.layer.msg('抱歉，微信登录暂未开放', {icon: 5, anim: 6});
});
xiaomayi-modules/xiaomayi-web/src/main/resources/templates/register.html
+190 -148
View File
@@ -6,79 +6,184 @@
<!-- header -->
<div th:replace="~{./public/common_header::common_header}"></div>
<!-- login-wrapper -->
<div class="login-wrapper reg-wrapper">
<div class="layui-container">
<form class="layui-form">
<style>
.login-card-box {
display: flex;
width: 920px;
max-width: 96%;
height: 510px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
}
.login-card-pic {
flex: 1;
padding: 32px 8px;
box-sizing: border-box;
background-color: #1681fd;
background-image: url('/static/assets/images/login-img.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
text-align: center;
}
.login-card-pic-text h1 {
color: #ffffff;
font-size: 28px;
margin: 0 0 6px;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-pic-text p {
color: rgba(255,255,255,0.8);
font-size: 16px;
margin: 0;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-form {
width: 400px;
padding: 32px 36px 24px !important;
box-sizing: border-box;
margin: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.login-card-form h2 {
font-size: 22px;
font-weight: 700;
color: #0b1a33;
text-align: left;
margin-bottom: 22px;
}
.login-card-form .layui-form-item {
margin-bottom: 18px;
}
.login-card-form .layui-input {
height: 44px;
border-radius: 8px;
border-color: #e8edf5;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card-form .layui-input:focus {
border-color: #1681fd;
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
}
.login-card-form .login-captcha-group {
display: flex !important;
gap: 12px;
padding-right: 0 !important;
position: relative;
}
.login-card-form .login-captcha-group .layui-input {
flex: 1;
}
.login-card-form .login-captcha-group .layui-btn {
position: static !important;
width: 120px !important;
height: 44px !important;
border-radius: 8px !important;
background: #1681fd !important;
background-color: #1681fd !important;
color: #fff !important;
border: none !important;
flex-shrink: 0;
white-space: nowrap;
line-height: 44px !important;
}
.login-card-form .layui-text {
display: flex !important;
justify-content: flex-end !important;
margin-bottom: 18px;
padding: 0;
}
.login-card-form .layui-text a {
color: #1681fd;
font-size: 13px;
}
.login-card-form .layui-btn-fluid {
height: 46px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 4px;
background: #1681fd;
border: none;
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.login-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.login-wrapper:before { display: none; }
.login-card-form .layui-btn-fluid:hover {
background: #1270e0;
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
transform: translateY(-1px);
}
@media screen and (max-width: 800px) {
.login-card-box {
flex-direction: column;
width: 400px;
height: auto;
}
.login-card-pic {
width: 100%;
padding: 20px 12px 100px;
background-size: auto 100px;
}
.login-card-form {
width: 100%;
padding: 28px 24px 24px !important;
}
}
</style>
<!-- register -->
<div class="login-wrapper">
<div class="login-card-box">
<!-- 左侧插图 -->
<div class="login-card-pic">
<div class="login-card-pic-text">
<h1>小蚂蚁云官方网站</h1>
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
</div>
</div>
<!-- 右侧表单 -->
<form class="layui-form login-card-form">
<h2>用户注册</h2>
<div class="layui-form-item">
<label class="layui-form-label">邮箱账号</label>
<div class="layui-input-block">
<input class="layui-input" name="email" type="text" placeholder="请输入邮箱账号"
lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
</div>
<input class="layui-input" name="email" type="text" placeholder="请输入邮箱账号"
lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
</div>
<div class="layui-form-item" style="margin-bottom: 18px;">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block login-captcha-group">
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>
<button id="btnGetCode" type="button" class="layui-btn">获取验证码</button>
</div>
<div class="layui-form-item login-captcha-group">
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>
<button id="btnGetCode" type="button" class="layui-btn">获取验证码</button>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登录密码</label>
<div class="layui-input-block">
<input class="layui-input" name="password" type="password" placeholder="请输入登录密码"
lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
</div>
<input class="layui-input" name="password" type="password" placeholder="请输入登录密码"
lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input class="layui-input" name="rePassword" type="password" placeholder="请再次输入登录密码"
lay-verType="tips" lay-verify="required|repeat" data-target="input[name=password]"
data-tips="两次密码输入不一致" required/>
</div>
<input class="layui-input" name="rePassword" type="password" placeholder="请再次输入登录密码"
lay-verType="tips" lay-verify="required|repeat" data-target="input[name=password]"
data-tips="两次密码输入不一致" required/>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input class="layui-input" name="mobile" type="text" placeholder="请输入手机号（接收短信信息）"
lay-verType="tips" lay-verify="required|phone" maxlength="11" required/>
</div>
<input class="layui-input" name="mobile" type="text" placeholder="请输入手机号（接收短信信息）"
lay-verType="tips" lay-verify="required|phone" maxlength="11" required/>
</div>
<!-- <div class="layui-form-item" style="margin-bottom: 18px;">-->
<!-- <label class="layui-form-label">验证码</label>-->
<!-- <div class="layui-input-block login-captcha-group">-->
<!-- <input class="layui-input" name="code" type="text" placeholder="请输入验证码"-->
<!-- autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="6" required/>-->
<!-- <button id="btnMobileCode" type="button" class="layui-btn">获取验证码</button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layui-form-item" style="margin-bottom: 18px;">-->
<!-- <label class="layui-form-label">验证码</label>-->
<!-- <div class="layui-input-block login-captcha-group">-->
<!-- <input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"-->
<!-- autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>-->
<!-- <img class="login-captcha" src="/captcha"/>-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-form-item layui-text">
<div class="layui-input-block" style="min-height: unset;">
<a href="login.html">返回登录</a>
</div>
<a href="/login">返回登录</a>
</div>
<div>
<div class="layui-input-block">
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="regSubmit" lay-submit>
注册
</button>
</div>
</div>
<div class="login-oauth-group" style="padding-left: 42px;">
<a id="goQqLogin" href="javascript:;" title="QQ授权登录"><i class="layui-icon layui-icon-login-qq"></i></a>
<a id="goWxLogin" href="javascript:;" title="微信授权登录"><i class="layui-icon layui-icon-login-wechat"></i></a>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="regSubmit" lay-submit>注 册</button>
</div>
</form>
</div>
@@ -107,7 +212,11 @@
var layer = layui.layer;
var form = layui.form;
// 表单提交
/**
* 注册表单提交
* 将表单数据以JSON格式POST到/register接口
* 成功后跳转至登录页，失败则弹出错误提示
*/
form.on('submit(regSubmit)', function (obj) {
var loadIndex = layer.load(2);
$.ajax({
@@ -116,17 +225,10 @@
data: JSON.stringify(obj.field),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg('注册成功', {
icon: 1,
time: 1500
}, function () {
// 跳转至登录页
layer.msg('注册成功', {icon: 1, time: 1500}, function () {
location.href = '/login';
});
} else {
@@ -140,9 +242,16 @@
return false;
});
// 获取邮箱验证码
/**
* 获取邮箱验证码
* 1. 校验邮箱是否为空及格式是否正确
* 2. 弹出图形验证码弹窗
* 3. 用户输入图形验证码后，调用/sendEmail接口发送邮件验证码
* 4. 发送成功后启动60秒倒计时
*/
$('#btnGetCode').click(function () {
var $btn = $(this);
// 获取并校验邮箱
var $inputEmail = $('input[name="email"]');
var email = $inputEmail.val();
if (!email) {
@@ -154,6 +263,7 @@
layer.tips('邮箱格式不正确', $inputEmail, {tips: [1, '#ff4c4c']});
return;
}
// 弹出图形验证码弹窗
var layIndex = layer.open({
type: 1,
title: false,
@@ -161,11 +271,11 @@
skin: 'layui-layer-admin',
content: $('#layerGetCode').html(),
success: function () {
// 图形验证码点击事件
// 图形验证码图片点击刷新
$('.layer-get-code>.lay-code-group>img').click(function () {
this.src = this.src + '?t=' + new Date().getTime();
});
// 立即发送按钮点击事件
// 弹窗内"立即发送"按钮点击事件
$('.layer-get-code .layui-btn-fluid').click(function () {
var $input = $('.layer-get-code>.lay-code-group>input');
var captcha = $input.val();
@@ -173,8 +283,7 @@
layer.tips('请输入图形验证码', $input, {tips: [3, '#ff4c4c']});
return;
}
// layer.msg('发送成功，请注意查收', {icon: 1});
// layer.close(layIndex);
// 启动倒计时并发送邮件验证码请求
startTimer($btn);
var loadIndex = layer.msg('邮件发送中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
@@ -183,9 +292,6 @@
data: JSON.stringify({email: email, captcha: captcha, type: 2}),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
@@ -193,12 +299,10 @@
layer.close(layIndex);
startTimer($btn);
} else {
/* 刷新验证码 */
// 发送失败，刷新图形验证码
$('img.register-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
layer.msg(res.msg, {icon: 2, anim: 6});
}
},
@@ -212,58 +316,11 @@
})
});
// 获取短信验证码
$("#btnMobileCode").click(function (){
// 手机号
var $inputMobile = $('input[name="mobile"]');
var mobile = $inputMobile.val();
if (!mobile) {
layer.tips('请输入手机号', $inputMobile, {tips: [1, '#ff4c4c']});
return;
}
// 手机号格式验证
var mobileReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
if(!(mobileReg.test(mobile))){
layer.tips('手机号格式不正确', $inputMobile, {tips: [1, '#ff4c4c']});
return;
}
// 当前按钮对象
var $btn = $(this);
// 计时器
startTimer($btn);
// 发送验证码请求
var loadIndex = layer.msg('短信发送中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
type: "POST",
url: '/sendSms',
data: JSON.stringify({mobile: mobile, type: 2}),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg(res.msg, {icon: 1});
startTimer($btn);
} else {
layer.msg(res.msg, {icon: 2, anim: 6});
}
},
error: function () {
layer.msg("AJAX请求异常");
}
});
return false;
});
// 按钮开始倒计时
/**
* 按钮倒计时
* @param {Object} $btn - jQuery按钮对象
* @param {Number} second - 倒计时秒数，默认60秒
*/
function startTimer($btn, second) {
second || (second = 60);
$btn.attr('org-text', $btn.text());
@@ -283,25 +340,10 @@
}, 1000);
}
/* 图形验证码 */
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
$('img.register-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
// QQ登录
$('#goQqLogin').click(function () {
layui.layer.msg('抱歉，QQ登录暂未开放', {icon: 5, anim: 6});
});
// 微信登录
$('#goWxLogin').click(function () {
layui.layer.msg('抱歉，微信登录暂未开放', {icon: 5, anim: 6});
});
// /* 图形验证码 */
// $('img.login-captcha').click(function () {
// this.src = '/captcha?t=' + (new Date).getTime();
// }).trigger('click');
});
</script>
</body>
xiaomayi-modules/xiaomayi-web/src/main/resources/templates/user/user_common.html
+2 -2
View File
@@ -2,9 +2,9 @@
<div class="layui-card">
<div class="layui-card-body user-info-card">
<div class="user-info-top text-center layui-text">
<div class="user-info-head">
<div th:class="${userInfo['isVip'] == 1} ? 'user-info-head vip' : 'user-info-head'">
<img src="/static/assets/images/logo.png"/>
<span th:if="${userInfo['isVip'] == 1}" class="ew-vip-badge">VIP</span>
<span th:if="${userInfo['isVip'] == 1}" class="ew-vip-badge"><i class="layui-icon layui-icon-diamond"></i> VIP</span>
</div>
<h2 th:text="${userInfo['nickname']}"></h2>
<p th:text="${userInfo['signature']}?:'这家伙很懒，什么都不说~'"></p>