125 lines
3.3 KiB
PHP
125 lines
3.3 KiB
PHP
<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>
|
|
<div class="layui-input-block">
|
|
<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">
|
|
<div class="phone-info">
|
|
<span id="phoneNumber">未绑定</span>
|
|
<button type="button" class="layui-btn layui-btn-primary" onclick="bindPhone()">绑定手机</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.layui-input-block {
|
|
margin-left: 110px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
layui.use(['form', 'layer'], function () {
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
|
|
// 加载用户安全信息
|
|
loadSecurityInfo();
|
|
});
|
|
|
|
// 修改密码
|
|
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 bindPhone() {
|
|
layer.open({
|
|
type: 2,
|
|
title: '绑定手机',
|
|
area: ['500px', '400px'],
|
|
content: '/index/user/component/bindPhone'
|
|
});
|
|
}
|
|
|
|
function loadSecurityInfo() {
|
|
// 示例：你可以根据实际需求发起 AJAX 请求获取用户安全信息
|
|
// 这里只做简单演示
|
|
// 假设后端返回 { phone: '138****8888' } 或 { phone: null }
|
|
$.ajax({
|
|
url: '/index/user/getSecurityInfo',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function (res) {
|
|
if (res.code === 0 && res.data) {
|
|
if (res.data.phone) {
|
|
$('#phoneNumber').text(res.data.phone);
|
|
} else {
|
|
$('#phoneNumber').text('未绑定');
|
|
}
|
|
} else {
|
|
$('#phoneNumber').text('未绑定');
|
|
}
|
|
},
|
|
error: function () {
|
|
$('#phoneNumber').text('未绑定');
|
|
}
|
|
});
|
|
}
|
|
</script> |