teacher_add.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. {extend name="public/layout"}
  2. {block name="body"}
  3. <style>
  4. html,body {
  5. background-color: #fff;
  6. }
  7. .layui-form-item .layui-input-inline {
  8. float: left;
  9. width: 190px;
  10. margin-right: 10px;
  11. }
  12. .layui-input-inline {
  13. display: inline-block;
  14. vertical-align: middle;
  15. }
  16. .upload-img {
  17. border: 1px dashed #e2e2e2;
  18. height: 100px;
  19. width: 100px;
  20. }
  21. .upload-img .area {
  22. margin-top: 40px;
  23. text-align: center;
  24. }
  25. .upload-img .area i {
  26. font-size: 50px;
  27. color: #009688;
  28. }
  29. .layui-btn,.layui-btn:hover {
  30. background-color: #fff;
  31. border: 1px solid #269efb;
  32. color: #269efb;
  33. }
  34. </style>
  35. <body>
  36. <div class="layui-fluid">
  37. <div class="layui-row layui-col-space15">
  38. <div class="layui-col-md12">
  39. <div class="layui-card">
  40. <div class="layui-card-body">
  41. <form class="layui-form" id="admin" enctype="multipart/form-data">
  42. <div class="layui-form-item">
  43. <label class="layui-form-label" for="name">姓名:</label>
  44. <div class="layui-input-block" style="width: 150px">
  45. <input type="text" name="name" required lay-verify="required" id="name"
  46. placeholder="请输入姓名" autocomplete="off" class="layui-input">
  47. </div>
  48. </div>
  49. <div class="layui-form-item">
  50. <label class="layui-form-label" for="name">联系方式:</label>
  51. <div class="layui-input-block" style="width: 150px">
  52. <input type="text" name="phone" required lay-verify="required" id="phone"
  53. placeholder="请输入联系电话" autocomplete="off" class="layui-input num" >
  54. </div>
  55. </div>
  56. <div class="layui-form-item">
  57. <label class="layui-form-label" for="name">微信号:</label>
  58. <div class="layui-input-block" style="width: 150px">
  59. <input type="text" name="vx" required lay-verify="required" id="vx"
  60. placeholder="请输入微信号" autocomplete="off" class="layui-input numletter" >
  61. </div>
  62. </div>
  63. <div class="layui-form-item">
  64. <label class="layui-form-label">头像:</label>
  65. <div class="layui-input-inline">
  66. <div class="upload-img" id="img">
  67. <div class="area">
  68. <i class="layui-icon">&#xe681;</i>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="layui-form-mid layui-word-aux">jpg,png,bmp,jpeg格式,大小800KB</div>
  73. </div>
  74. <div class="layui-form-item">
  75. <label class="layui-form-label" for="desc">简介:</label>
  76. <div class="layui-input-block">
  77. <textarea name="desc" id="desc"
  78. placeholder="请输入简介" class="layui-textarea" lay-verify="required"></textarea>
  79. </div>
  80. </div>
  81. <div class="layui-form-item">
  82. <div class="layui-input-block">
  83. <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
  84. </div>
  85. </div>
  86. </form>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. {/block}
  93. {block name="js"}
  94. <script src="__STATIC__/js/jquery.min.js"></script>
  95. <script>
  96. function number_input(key){
  97. $(key).keypress(function(key){
  98. var ableKey = [0,46,45,48,49,50,51,52,53,54,55,56,57];
  99. var code = key.charCode;
  100. if(ableKey.indexOf(code) < 0){
  101. return false;
  102. }
  103. });
  104. $(key).on('keyup',function () {
  105. var regex = '^[0-9]*$';
  106. var content = $(this).val();
  107. if(!content.match(regex)){
  108. $(this).val('');
  109. return false;
  110. }
  111. });
  112. }
  113. function number_letter_input(key){
  114. $(key).on('keyup',function () {
  115. var regex = '^[A-Za-z0-9]+$';
  116. var content = $(this).val();
  117. if(!content.match(regex)){
  118. $(this).val('');
  119. return false;
  120. }
  121. });
  122. }
  123. </script>
  124. <script>
  125. number_input('.num');
  126. number_letter_input('.numletter');
  127. var addurl = '{:url("broad/teacher_add")}';
  128. layui.use(['form','upload'], function () {
  129. var $ = layui.jquery
  130. , form = layui.form
  131. , upload = layui.upload;
  132. form.on("submit(admin)", function (obj) {
  133. if($(obj.elem).hasClass('layui-btn-disabled')) return false;
  134. $(obj.elem).addClass('layui-btn-disabled');
  135. var formData = new FormData(obj.form);
  136. $.ajax({
  137. url:addurl,
  138. type: 'POST',
  139. data: formData,
  140. dataType: 'json',
  141. processData: false,
  142. contentType: false,
  143. success: function (resp) {
  144. var res = JSON.parse(resp);
  145. if (res.code === 0) {
  146. layer.msg(res.msg, {anim: 0}, function () {
  147. if(parent.t){
  148. parent.t.reload();
  149. }else{
  150. //parent.teacher.append('<option value="'+res.data.id+'">'+res.data.name+'</option');
  151. parent.teacher.prepend('<option value="'+res.data.id+'">'+res.data.name+'</option');
  152. parent.teacher.find("option:selected").attr("selected", false);
  153. parent.teacher.find("option").first().attr("selected", true);
  154. parent.layui.form.render('select');
  155. }
  156. var index = parent.layer.getFrameIndex(window.name);
  157. parent.layer.close(index);
  158. });
  159. } else {
  160. layer.msg(res.msg, {anim: 6});
  161. $(obj.elem).removeClass('layui-btn-disabled');
  162. }
  163. }});
  164. return false;
  165. });
  166. upload.render({
  167. elem: '#img',
  168. accept: 'images',
  169. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  170. auto: false,
  171. field: 'headimg',
  172. size: 800,
  173. choose: function(obj){
  174. file=obj.pushFile();
  175. obj.preview(function(index, file, result){
  176. $('#img').html('<img src="' + result + '" style="height: 100%;width:100%;">');
  177. });
  178. }
  179. });
  180. });
  181. </script>
  182. {/block}