105 lines
2.3 KiB
PHP
105 lines
2.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 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/component/password'
|
|
});
|
|
}
|
|
|
|
// 绑定手机
|
|
function bindPhone() {
|
|
layer.open({
|
|
type: 2,
|
|
title: '绑定手机',
|
|
area: ['500px', '400px'],
|
|
content: '/index/user/component/bindPhone'
|
|
});
|
|
}
|
|
</script>
|