yunzer/app/index/view/user/component/security.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>
        
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱绑定</label>
            <div class="layui-input-block">
                <div class="email-info">
                    <span id="emailAddress">未绑定</span>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="bindEmail()">绑定邮箱</button>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">两步验证</label>
            <div class="layui-input-block">
                <input type="checkbox" name="twoFactor" lay-skin="switch" lay-text="开启|关闭">
            </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();
    
    // 监听两步验证开关
    form.on('switch(twoFactor)', function(data){
        updateTwoFactor(data.elem.checked);
    });
});

// 加载安全信息
function loadSecurityInfo() {
    fetch('/index/user/getSecurityInfo')
        .then(response => response.json())
        .then(data => {
            if(data.code === 0) {
                document.getElementById('phoneNumber').textContent = data.data.phone || '未绑定';
                document.getElementById('emailAddress').textContent = data.data.email || '未绑定';
                // 设置两步验证开关状态
                layui.form.val('securityForm', {
                    twoFactor: data.data.twoFactor
                });
            }
        });
}

// 修改密码
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'
    });
}

// 绑定邮箱
function bindEmail() {
    layer.open({
        type: 2,
        title: '绑定邮箱',
        area: ['500px', '400px'],
        content: '/index/user/component/bindEmail'
    });
}

// 更新两步验证状态
function updateTwoFactor(enabled) {
    fetch('/index/user/updateTwoFactor', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({enabled: enabled})
    })
    .then(response => response.json())
    .then(data => {
        if(data.code === 0) {
            layer.msg(enabled ? '两步验证已开启' : '两步验证已关闭', {icon: 1});
        } else {
            layer.msg(data.msg || '操作失败', {icon: 2});
            // 恢复开关状态
            layui.form.val('securityForm', {
                twoFactor: !enabled
            });
        }
    })
    .catch(error => {
        layer.msg('操作失败，请重试', {icon: 2});
        // 恢复开关状态
        layui.form.val('securityForm', {
            twoFactor: !enabled
        });
    });
}
</script>