user_info.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>个人信息</title>
  7. <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  8. <style>
  9. body { padding: 20px; }
  10. .user-info-card { background: #fff; padding: 30px; border-radius: 8px; max-width: 600px; margin: 0 auto; }
  11. .avatar-upload { text-align: center; margin-bottom: 20px; }
  12. .avatar-img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #667eea; }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="user-info-card">
  17. <form class="layui-form" lay-filter="userInfoForm" id="userInfoForm">
  18. <div class="avatar-upload">
  19. <img src="../../images/user.png" class="avatar-img" id="avatarImg">
  20. </div>
  21. <div class="layui-form-item">
  22. <label class="layui-form-label">账号</label>
  23. <div class="layui-input-block">
  24. <input type="text" name="account" class="layui-input" readonly style="width: 300px; background: #f5f5f5;">
  25. </div>
  26. </div>
  27. <div class="layui-form-item">
  28. <label class="layui-form-label">姓名</label>
  29. <div class="layui-input-block">
  30. <input type="text" name="name" class="layui-input" style="width: 300px;">
  31. </div>
  32. </div>
  33. <div class="layui-form-item">
  34. <label class="layui-form-label">手机号</label>
  35. <div class="layui-input-block">
  36. <input type="text" name="phone" class="layui-input" style="width: 300px;">
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <label class="layui-form-label">邮箱</label>
  41. <div class="layui-input-block">
  42. <input type="text" name="email" class="layui-input" style="width: 300px;">
  43. </div>
  44. </div>
  45. <div class="layui-form-item">
  46. <div class="layui-input-block">
  47. <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">保存</button>
  48. </div>
  49. </div>
  50. </form>
  51. </div>
  52. <script src="../../lib/layui/layui.js"></script>
  53. <script src="../../js/config.js"></script>
  54. <script src="../../js/common.js"></script>
  55. <script>
  56. layui.use(['form'], function() {
  57. var form = layui.form;
  58. // 获取当前用户信息
  59. Common.get(Config.api.currentUser, function(res) {
  60. if (res.code === 200) {
  61. var user = res.data || res;
  62. form.val('userInfoForm', {
  63. account: user.account,
  64. name: user.name,
  65. phone: user.phone,
  66. email: user.email
  67. });
  68. if (user.avatar) {
  69. $('#avatarImg').attr('src', user.avatar);
  70. }
  71. }
  72. });
  73. // 提交表单
  74. form.on('submit(submitForm)', function(data) {
  75. Common.success('个人信息已更新');
  76. return false;
  77. });
  78. });
  79. </script>
  80. </body>
  81. </html>