user_info.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>基本资料</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  10. <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
  11. <style>
  12. .layui-form-item .layui-input-company {
  13. width: auto;
  14. padding-right: 10px;
  15. line-height: 38px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="layuimini-container">
  21. <div class="layuimini-main">
  22. <div class="layui-form layuimini-form">
  23. <div class="layui-form-item">
  24. <label class="layui-form-label required">账号</label>
  25. <div class="layui-input-block">
  26. <input type="hidden" name="userId" th:value="${userInfo.userId}">
  27. <input type="hidden" name="status" th:value="${userInfo.status}">
  28. <input type="text" name="account" lay-verify="required" lay-reqtext="账号不能为空" placeholder="请输入账号" th:value="${userInfo.account}" class="layui-input" readonly>
  29. <tip>登陆账号不可修改</tip>
  30. </div>
  31. </div>
  32. <div class="layui-form-item">
  33. <label class="layui-form-label required">姓名</label>
  34. <div class="layui-input-block">
  35. <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" th:value="${userInfo.name}" class="layui-input">
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label required">性别</label>
  40. <div class="layui-input-block" th:if="${userInfo.sex == '1'}">
  41. <input type="radio" name="sex" value="1" title="男" checked>
  42. <input type="radio" name="sex" value="2" title="女">
  43. </div>
  44. <div class="layui-input-block" th:if="${userInfo.sex == '2'}">
  45. <input type="radio" name="sex" value="1" title="男">
  46. <input type="radio" name="sex" value="2" title="女" checked>
  47. </div>
  48. </div>
  49. <div class="layui-form-item">
  50. <label class="layui-form-label required">手机</label>
  51. <div class="layui-input-block">
  52. <input type="phone" name="phone" lay-verify="required|phone" lay-reqtext="手机不能为空" placeholder="请输入手机"
  53. th:value="${userInfo.phone}" class="layui-input">
  54. </div>
  55. </div>
  56. <div class="layui-form-item">
  57. <label class="layui-form-label">用户头像</label>
  58. <div class="layui-input-block">
  59. <input type="hidden" name="avatar" th:value="${userInfo.avatar}">
  60. <div style="height: 100px;width: 100px;position: relative;">
  61. <input type="file" accept="image/*" id="pic-input"
  62. style="position: absolute;left: 0;top: 0;opacity: 0;filter: alpha(opacity=0);height: 100%;width: 100%;z-index: 99">
  63. <img th:src="${userInfo.avatarPreUrl}" alt="" id="pic-img"
  64. style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;border: 1px solid #1E9FFF;">
  65. </div>
  66. </div>
  67. </div>
  68. <div class="layui-form-item layui-form-text">
  69. <label class="layui-form-label">备注信息</label>
  70. <div class="layui-input-block">
  71. <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息" th:text="${userInfo.account}"></textarea>
  72. </div>
  73. </div>
  74. <div class="layui-form-item">
  75. <div class="layui-input-block">
  76. <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
  83. <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  84. <script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
  85. <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
  86. <script type="text/javascript" th:inline="javascript">
  87. AjaxUtil.ctx = /*[[@{/}]]*/'';
  88. layui.use(['form', 'miniTab', 'layer'], function () {
  89. var form = layui.form,
  90. layer = layui.layer,
  91. miniTab = layui.miniTab;
  92. //监听提交
  93. form.on('submit(saveBtn)', function (data) {
  94. var index = layer.confirm('确认提交吗?', function () {
  95. var loading = layer.load(0, {shade: 0.1}); //0代表加载的风格,支持0-2
  96. AjaxUtil.post({
  97. url: AjaxUtil.ctx + 'sysuser/doUpdate',
  98. data: data.field,
  99. success: function (res) {
  100. if (res.code === 0) {
  101. layer.close(index);
  102. layer.close(loading);
  103. Message.success(1500, "个人基本信息修改成功!", function () {
  104. // 关闭miniTab
  105. miniTab.deleteCurrentByIframe();
  106. });
  107. } else {
  108. layer.close(loading);
  109. Message.error("个人基本信息修改失败!", 1000);
  110. }
  111. },
  112. error: function (error) {
  113. }
  114. });
  115. });
  116. return false;
  117. });
  118. $('#pic-input').change(function () {
  119. var formData = new FormData();
  120. formData.append("files", $("#pic-input")[0].files[0]);
  121. formData.append("fileName", $("#pic-input")[0].files[0].name); // 文件名字
  122. var index = layer.load(0, {shade: 0.1}); //0代表加载的风格,支持0-2
  123. AjaxUtil.upload({
  124. url: AjaxUtil.ctx + 'fileupload/put',
  125. data: formData
  126. }, function (res) {
  127. layer.close(index);
  128. if (0 === res.code) {
  129. $("input[name='avatar']").val(res.data.fileId);
  130. $('#pic-img').attr('src', res.data.previewUrl);
  131. Message.success(res.message, 1000);
  132. } else {
  133. Message.error(res.message, 1000);
  134. }
  135. }, function (res) {
  136. layer.close(index);
  137. Message.error("服务器异常,请联系系统管理员!", 1000);
  138. });
  139. });
  140. });
  141. </script>
  142. </body>
  143. </html>