easygoadmin/easygoadmin-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-28 18:51:35 +08:00
commit ab0f064ea6
2692 changed files with 354751 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
xiaomayi-modules/xiaomayi-web/src/main/resources/templates/forget.html
+340
View File
@@ -0,0 +1,340 @@
<!DOCTYPE html>
<html lang="en">
<!-- 引入头部 -->
<header th:replace="~{./public/header :: header}"></header>
<body class="no-padding">
<!-- header -->
<div th:replace="~{./public/common_header::common_header}"></div>
<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">
<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">
<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">
<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 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">
<a href="/login">返回登录</a>
</div>
<div>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="forgetSubmit" lay-submit>修改密码</button>
</div>
</form>
</div>
</div>
<!-- 输入图形验证码弹窗 -->
<script type="text/html" id="layerGetCode">
<div class="layer-get-code">
<p>验证码将发送到您的邮箱，输入下方图形验证码点击按钮即可发送：</p>
<div class="lay-code-group">
<input maxlength="20" placeholder="请输入图形验证码" class="layui-input"/>
<img class="forget-captcha" src="/captcha"/>
</div>
<div>
<button class="layui-btn layui-btn-fluid">立即发送</button>
</div>
</div>
</script>
<!-- js部分 -->
<script type="text/javascript" src="/static/assets/layui/layui.js"></script>
<script type="text/javascript" src="/static/assets/js/common.js"></script>
<script>
layui.use(['layer', 'form', 'formX'], function () {
var $ = layui.jquery;
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({
type: "POST",
url: '/forget',
data: JSON.stringify(obj.field),
contentType: "application/json",
dataType: "json",
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg('找回密码成功', {icon: 1, time: 1500}, function () {
location.href = '/login';
});
} else {
layer.msg(res.msg, {icon: 2, anim: 6});
}
},
error: function () {
layer.msg("AJAX请求异常");
}
});
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) {
layer.tips('请输入邮箱账号', $inputEmail, {tips: [1, '#ff4c4c']});
return;
}
var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!emailReg.test(email)) {
layer.tips('邮箱格式不正确', $inputEmail, {tips: [1, '#ff4c4c']});
return;
}
var layIndex = layer.open({
type: 1,
title: false,
shade: .1,
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();
if (!captcha) {
layer.tips('请输入图形验证码', $input, {tips: [3, '#ff4c4c']});
return;
}
// 启动倒计时并发送邮件验证码请求
startTimer($btn);
var loadIndex = layer.msg('邮件发送中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
type: "POST",
url: '/sendEmail',
data: JSON.stringify({email: email, captcha: captcha, type: 3}),
contentType: "application/json",
dataType: "json",
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg(res.msg, {icon: 1});
layer.close(layIndex);
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());
$btn.text(second + 's');
$btn.attr('disabled', 'disabled');
$btn.addClass('layui-disabled');
var timer = setInterval(function () {
second--;
if (second <= 0) {
clearInterval(timer);
$btn.text($btn.attr('org-text'));
$btn.removeAttr('disabled');
$btn.removeClass('layui-disabled');
} else {
$btn.text(second + 's');
}
}, 1000);
}
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
$('img.forget-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
});
</script>
</body>
</html>