继续完善前端登录模块

2025-05-27 11:29:06 +08:00
parent 9352fd2a75
commit b8d3757397
18 changed files with 2574 additions and 286 deletions
@@ -0,0 +1,170 @@
+<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>