继续完善前端登录模块

2025-05-27 11:29:06 +08:00
parent 9352fd2a75
commit b8d3757397
18 changed files with 2574 additions and 286 deletions
@@ -0,0 +1,127 @@
+<div class="basic-info">
+    <h2 class="section-title">个人资料</h2>
+    <form class="layui-form" lay-filter="basicForm">
+        <div class="layui-form-item">
+            <label class="layui-form-label">用户名</label>
+            <div class="layui-input-block">
+                <input type="text" name="name" value="{$user.name}" placeholder="请输入用户名" class="layui-input">
+            </div>
+        </div>
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">账号</label>
+            <div class="layui-input-block">
+                <input type="text" value="{$user.account}" class="layui-input" disabled>
+            </div>
+        </div>
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">QQ</label>
+            <div class="layui-input-block">
+                <input type="qq" name="qq" value="{$user.qq}" placeholder="请输入QQ号" class="layui-input">
+            </div>
+        </div>
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">手机号</label>
+            <div class="layui-input-block">
+                <input type="tel" name="phone" value="{$user.phone}" placeholder="请输入手机号" class="layui-input">
+            </div>
+        </div>
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">性别</label>
+            <div class="layui-input-block">
+                <input type="radio" name="sex" value="1" title="男" {if $user.sex==1}checked{/if}>
+                <input type="radio" name="sex" value="2" title="女" {if $user.sex==2}checked{/if}>
+                <input type="radio" name="sex" value="0" title="保密" {if $user.sex==0}checked{/if}>
+            </div>
+        </div>
+
+        <div class="layui-form-item">
+            <div class="layui-input-block">
+                <button class="layui-btn" lay-submit lay-filter="saveBasic">保存修改</button>
+                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<style>
+    .basic-info {
+        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;
+    }
+
+    .layui-form-label {
+        width: 100px;
+    }
+
+    .layui-input-block {
+        margin-left: 130px;
+    }
+
+    .layui-form-item {
+        margin-bottom: 24px;
+    }
+
+    .layui-textarea {
+        min-height: 120px;
+    }
+
+    @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;
+
+        // 监听表单提交
+        form.on('submit(saveBasic)', function (data) {
+            // 发送AJAX请求保存数据
+            fetch('/index/user/saveBasic', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: JSON.stringify(data.field)
+            })
+                .then(response => response.json())
+                .then(result => {
+                    if (result.code === 0) {
+                        layer.msg(result.msg, { icon: 1 }, function () {
+                            // 保存成功后刷新页面
+                            window.location.reload();
+                        });
+                    } else {
+                        layer.msg(result.msg, { icon: 2 });
+                    }
+                })
+                .catch(error => {
+                    console.error('保存失败:', error);
+                    layer.msg('保存失败，请稍后重试', { icon: 2 });
+                });
+
+            return false; // 阻止表单默认提交
+        });
+    });
+</script>