waistcoat_add.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. {extend name="public/layout"}
  2. {block name="body"}
  3. <style>
  4. .layui-form-item .layui-input-inline {
  5. float: left;
  6. width: 190px;
  7. margin-right: 10px;
  8. }
  9. .layui-input-inline {
  10. display: inline-block;
  11. vertical-align: middle;
  12. }
  13. .upload-img {
  14. border: 1px dashed #e2e2e2;
  15. height: 100px;
  16. width: 100px;
  17. }
  18. .upload-img .area {
  19. margin-top: 40px;
  20. text-align: center;
  21. }
  22. .upload-img .area i {
  23. font-size: 50px;
  24. color: #009688;
  25. }
  26. </style>
  27. <body>
  28. <div class="layui-fluid">
  29. <div class="layui-row layui-col-space15">
  30. <div class="layui-col-md12">
  31. <div class="layui-card">
  32. <div class="layui-card-body">
  33. <form class="layui-form" id="admin" enctype="multipart/form-data">
  34. <div class="layui-form-item " id="name1">
  35. <div class="layui-form-item ">
  36. <label class="layui-form-label" for="value1">客服名称:</label>
  37. <div class="layui-input-block" style="width:200px;">
  38. <input type="text" name="value" required lay-verify="required" id="value1"
  39. placeholder="请输入系统客服名称" autocomplete="off" class="layui-input">
  40. </div>
  41. </div>
  42. <div class="layui-form-item">
  43. <label class="layui-form-label">客服头像:</label>
  44. <div class="layui-input-inline">
  45. <div class="upload-img" id="img1">
  46. <div class="area">
  47. <i class="layui-icon">&#xe681;</i>
  48. </div>
  49. </div>
  50. </div>
  51. <!--<div class="layui-form-mid layui-word-aux">
  52. <button type="button" class="layui-btn add" id="1" >
  53. <i class="layui-icon">&#xe608;</i>
  54. </button>
  55. </div>-->
  56. </div>
  57. </div>
  58. <div class="layui-form-item">
  59. <div class="layui-input-block">
  60. <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
  61. </div>
  62. </div>
  63. </form>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. {/block}
  70. {block name="js"}
  71. <script>
  72. var addurl = '{:url("broad/waistcoat_add")}';
  73. layui.use(['form', 'upload', 'layedit'], function () {
  74. var $ = layui.jquery
  75. , form = layui.form
  76. , layedit = layui.layedit
  77. , upload = layui.upload;
  78. var textarea;
  79. form.on("submit(admin)", function (obj) {
  80. if($(obj.elem).hasClass('layui-btn-disabled')) return false;
  81. $(obj.elem).addClass('layui-btn-disabled');
  82. var formData = new FormData(obj.form);
  83. $.ajax({
  84. url:addurl,
  85. type: 'POST',
  86. data: formData,
  87. dataType: 'json',
  88. processData: false,
  89. contentType: false,
  90. success: function (resp) {
  91. var res = JSON.parse(resp);
  92. if (res.code === 0) {
  93. layer.msg(res.msg, {anim: 0}, function () {
  94. parent.t.reload();
  95. var index = parent.layer.getFrameIndex(window.name);
  96. parent.layer.close(index);
  97. });
  98. } else {
  99. layer.msg(res.msg, {anim: 6});
  100. $(obj.elem).removeClass('layui-btn-disabled');
  101. }
  102. }});
  103. return false;
  104. });
  105. //多个上传
  106. /*$('.add').click(function(){
  107. var num = this.id;
  108. num ++;
  109. var name = '#name' + num;
  110. $(name).show();
  111. $(this).hide();
  112. var value = '#value' + num;
  113. $(value).attr('lay-verify','required');
  114. });*/
  115. upload.render({
  116. elem: '#img1',
  117. accept: 'images',
  118. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  119. auto: false,
  120. field: 'picture',
  121. size: 2 * 1024,
  122. choose: function(obj){
  123. file=obj.pushFile();
  124. obj.preview(function(index, file, result){
  125. $('#img1').html('<img src="' + result + '" style="height: 100%;width:100%;">');
  126. });
  127. }
  128. });
  129. });
  130. </script>
  131. {/block}