增加修改密码
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<div class="security-section">
|
||||
<h2 class="section-title">安全设置</h2>
|
||||
|
||||
|
||||
<form class="layui-form" lay-filter="securityForm">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录密码</label>
|
||||
@@ -8,7 +8,7 @@
|
||||
<button type="button" class="layui-btn" onclick="changePassword()">修改密码</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机绑定</label>
|
||||
<div class="layui-input-block">
|
||||
@@ -18,87 +18,94 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.security-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.security-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.phone-info, .email-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.phone-info,
|
||||
.email-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.layui-form-label {
|
||||
width: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 110px;
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.layui-form-label {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 加载用户安全信息
|
||||
loadSecurityInfo();
|
||||
});
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 加载安全信息
|
||||
function loadSecurityInfo() {
|
||||
fetch('/index/user/getSecurityInfo')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.code === 0) {
|
||||
document.getElementById('phoneNumber').textContent = data.data.phone || '未绑定';
|
||||
// 加载用户安全信息
|
||||
loadSecurityInfo();
|
||||
});
|
||||
|
||||
// 加载安全信息
|
||||
function loadSecurityInfo() {
|
||||
fetch('/index/user/getSecurityInfo')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.code === 0) {
|
||||
document.getElementById('phoneNumber').textContent = data.data.phone || '未绑定';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
function changePassword() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '修改密码',
|
||||
area: ['500px', '400px'],
|
||||
content: '/index/user/updatePassword',
|
||||
end: function () {
|
||||
// 检查是否需要跳转到登录页
|
||||
if (window.needRedirect) {
|
||||
window.location.href = '/index/user/login';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
function changePassword() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '修改密码',
|
||||
area: ['500px', '400px'],
|
||||
content: '/index/user/component/password'
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定手机
|
||||
function bindPhone() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '绑定手机',
|
||||
area: ['500px', '400px'],
|
||||
content: '/index/user/component/bindPhone'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
// 绑定手机
|
||||
function bindPhone() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '绑定手机',
|
||||
area: ['500px', '400px'],
|
||||
content: '/index/user/component/bindPhone'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
{include file="component/head" /}
|
||||
<form class="layui-form" action="/index/user/updatePassword" method="post">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">旧密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="old_password" required lay-verify="required" placeholder="请输入旧密码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">新密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="new_password" required lay-verify="required|password" placeholder="请输入新密码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">确认密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="confirm_password" required lay-verify="required|confirmPassword"
|
||||
placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="updatePassword">立即修改</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.$;
|
||||
|
||||
// 自定义验证规则
|
||||
form.verify({
|
||||
password: [
|
||||
/^[\S]{6,20}$/,
|
||||
'密码长度必须在6-20个字符之间'
|
||||
],
|
||||
confirmPassword: function (value) {
|
||||
var password = document.querySelector('input[name=new_password]').value;
|
||||
if (value !== password) {
|
||||
return '两次输入的密码不一致';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听提交
|
||||
form.on('submit(updatePassword)', function (data) {
|
||||
// 显示加载中
|
||||
var loadIndex = layer.load(2);
|
||||
|
||||
$.ajax({
|
||||
url: '/index/user/updatePassword',
|
||||
type: 'POST',
|
||||
data: data.field,
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
layer.close(loadIndex);
|
||||
if (res.code === 0) {
|
||||
layer.msg(res.msg, {
|
||||
icon: 1,
|
||||
time: 1000,
|
||||
end: function() {
|
||||
// 设置跳转标记
|
||||
parent.window.needRedirect = true;
|
||||
// 关闭当前弹窗
|
||||
var index = parent.layer.getFrameIndex(window.name);
|
||||
parent.layer.close(index);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
layer.close(loadIndex);
|
||||
layer.msg('请求失败，请重试', { icon: 2 });
|
||||
}
|
||||
});
|
||||
return false; // 阻止表单默认提交
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user