user_form.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <div class="layui-fluid">
  2. <div class="layui-row layui-col-space15">
  3. <div class="layui-col-md12">
  4. <div class="layui-card">
  5. <div class="layui-card-header">用户信息</div>
  6. <div class="layui-card-body" pad15>
  7. <div class="layui-form layui-form-pane" lay-filter="{$lay_table}">
  8. <input type="hidden" name="id" value="{$info.id}" />
  9. <div class="layui-form-item">
  10. <label class="layui-form-label"><span style="color:#f90c05;">*</span>用户名</label>
  11. <div class="layui-input-block">
  12. <input type="text" name="account" value="{$info.account}" lay-verify="required" placeholder="请输入用户名"
  13. autocomplete="off" class="layui-input">
  14. </div>
  15. </div>
  16. <div class="layui-form-item">
  17. <label class="layui-form-label">密码</label>
  18. <div class="layui-input-block">
  19. <input type="text" name="password" placeholder="请输入登录密码,不修改留空" autocomplete="off" class="layui-input">
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label">头像</label>
  24. <div class="layui-input-block">
  25. <div class="layui-upload">
  26. <button type="button" class="layui-btn attachment-upload-images" data-input="avatar" data-amount="1">上传图片</button>
  27. <div class="layui-inline layui-word-aux"> 最佳尺寸:320px*320px </div>
  28. <div class="layui-upload-list echo-attachment-image-list" id="avatar">
  29. {notempty name="info.avatar"}
  30. <div>
  31. <input type="hidden" name="avatar" value="{$info.avatar}">
  32. <img src="{$info.avatar}">
  33. </div>
  34. {/notempty}
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <label class="layui-form-label"><span style="color:#f90c05;">*</span>昵称</label>
  41. <div class="layui-input-block">
  42. <input type="text" name="nickname" value="{$info.nickname}" lay-verify="required" placeholder="请输入用户昵称"
  43. autocomplete="off" class="layui-input">
  44. </div>
  45. </div>
  46. <div class="layui-form-item" pane>
  47. <label class="layui-form-label"><span style="color:#f90c05;">*</span>性别</label>
  48. <div class="layui-input-block">
  49. {volist name="gender_list" id="v"}
  50. <input type="radio" name="gender" lay-filter="type" value="{$key}" title="{$v}" {eq name="info.gender|default=1" value="$key" }checked{/eq}>
  51. {/volist}
  52. </div>
  53. </div>
  54. <div class="layui-form-item">
  55. <label class="layui-form-label"><span style="color:#f90c05;">*</span>手机号</label>
  56. <div class="layui-input-block">
  57. <input type="text" name="mobile" value="{$info.mobile}" lay-verify="required|phone" placeholder="请输入手机号"
  58. autocomplete="off" class="layui-input">
  59. </div>
  60. </div>
  61. <div class="layui-form-item">
  62. <label class="layui-form-label">真实姓名</label>
  63. <div class="layui-input-block">
  64. <input type="text" name="realname" value="{$info.realname}" placeholder="请输入真实姓名"
  65. autocomplete="off" class="layui-input">
  66. </div>
  67. </div>
  68. <div class="layui-form-item">
  69. <label class="layui-form-label">出生日期</label>
  70. <div class="layui-input-block">
  71. <input type="text" name="birthday" id="birthday" value="{$info.birthday}" placeholder="请选择出生日期" autocomplete="off"
  72. class="layui-input">
  73. </div>
  74. </div>
  75. <div class="layui-form-item" pane>
  76. <label class="layui-form-label"><span style="color:#f90c05;">*</span>状态</label>
  77. <div class="layui-input-block">
  78. {volist name="status_list" id="v"}
  79. <input type="radio" name="status" lay-filter="type" value="{$key}" title="{$v}" {eq name="info.status|default=1" value="$key" }checked{/eq}>
  80. {/volist}
  81. </div>
  82. </div>
  83. <div class="layui-form-item">
  84. <label class="layui-form-label">审核备注</label>
  85. <div class="layui-input-block">
  86. <textarea name="remark" placeholder="请输入审核备注" class="layui-textarea">{$info.remark}</textarea>
  87. </div>
  88. </div>
  89. <div class="layui-form-item">
  90. <div class="layui-input-block">
  91. <input type="button" lay-submit lay-filter="{$lay_btn}" value="确认提交" class="layui-btn">
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <script>
  101. layui.use(['index', 'form', 'upload', 'laydate'], function () {
  102. const $ = layui.$;
  103. const admin = layui.admin;
  104. const form = layui.form;
  105. const upload = layui.upload;
  106. const laydate = layui.laydate;
  107. form.render();
  108. laydate.render({
  109. elem: '#birthday',
  110. type: 'date'
  111. });
  112. form.on('submit({$lay_btn})', function (obj) {
  113. const index = parent.layer.getFrameIndex(window.name);
  114. admin.req({
  115. url: "{:url('user/editUser')}",
  116. type: 'post',
  117. data: obj.field,
  118. done: function (res) {
  119. layer.msg("提交成功", {
  120. icon: 1
  121. });
  122. parent.layui.table.reload('lay-user-index-table'); //重载表格
  123. parent.layer.close(index);
  124. }
  125. });
  126. });
  127. let upload_input = '';
  128. let upload_amount = '';
  129. upload.render({
  130. elem: '.attachment-upload-images',
  131. url: "{:url('upload/image')}",
  132. accept: 'images',
  133. exits: 'jpg|png|jpeg',
  134. acceptMime: 'image/*',
  135. size: 2048,
  136. number: 1,
  137. method: 'post',
  138. before: function(obj) {
  139. var item = this.item;
  140. upload_input = $(item).data('input');
  141. upload_amount = $(item).data('amount');
  142. layer.load();
  143. },
  144. done: function(res, index, upload) {
  145. layer.closeAll('loading');
  146. let html = "";
  147. if (upload_amount == 1) {
  148. html += '<div> <input type="hidden" name="' + upload_input + '" value="' + res.data.src + '"> ';
  149. html += '<img src="' + res.data.src + '"></div>';
  150. $("#" + upload_input).html(html);
  151. } else {
  152. html += '<div> <input type="hidden" name="' + upload_input + '[]" value="' + res.data.src + '"> ';
  153. html += '<img src="' + res.data.src +
  154. '"> <button type="button" class="attachment-del layui-btn layui-btn-primary layui-btn-xs layui-btn-fluid">删除</button></div>';
  155. $("#" + upload_input).append(html);
  156. }
  157. },
  158. error: function(index, upload) {
  159. layer.closeAll('loading');
  160. }
  161. });
  162. });
  163. </script>