goods_add.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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. .layui-btn,.layui-btn:hover {
  27. background-color: #fff;
  28. border: 1px solid #249EFB;
  29. color: #249EFB;
  30. }
  31. </style>
  32. <body>
  33. <div class="layui-fluid">
  34. <div class="layui-row layui-col-space15">
  35. <div class="layui-col-md12">
  36. <div class="layui-card">
  37. <div class="layui-card-body">
  38. <form class="layui-form" id="admin" enctype="multipart/form-data">
  39. <div class="layui-form-item">
  40. <label class="layui-form-label" for="title">商品名称:</label>
  41. <div class="layui-input-block" style="width:300px;">
  42. <input type="text" name="title" required lay-verify="required" id="title"
  43. autocomplete="off" class="layui-input">
  44. </div>
  45. </div>
  46. <div class="layui-form-item">
  47. <label class="layui-form-label" for="shop_price">店面价:</label>
  48. <div class="layui-input-inline" style="width:150px;">
  49. <input type="text" name="shop_price" required lay-verify="required" id="shop_price"
  50. autocomplete="off" class="layui-input price">
  51. </div>
  52. <div class="layui-form-mid layui-word-aux">*商品在店面的原价</div>
  53. </div>
  54. <div class="layui-form-item">
  55. <label class="layui-form-label" for="live_price">直播价:</label>
  56. <div class="layui-input-inline" style="width:150px;">
  57. <input type="text" name="live_price" required lay-verify="required" id="live_price"
  58. autocomplete="off" class="layui-input price">
  59. </div>
  60. <div class="layui-form-mid layui-word-aux">*商品在直播中的活动价</div>
  61. </div>
  62. <div class="layui-form-item">
  63. <label class="layui-form-label" for="price">所需定金:</label>
  64. <div class="layui-input-inline" style="width:150px;">
  65. <input type="text" name="price" required lay-verify="required" id="price"
  66. autocomplete="off" class="layui-input price">
  67. </div>
  68. <div class="layui-form-mid layui-word-aux">*用户在直播间购买商品所需的定金,限制0.01~1000元内</div>
  69. </div>
  70. <div class="layui-form-item">
  71. <label class="layui-form-label" for="stock">商品库存:</label>
  72. <div class="layui-input-inline" style="width:150px;">
  73. <input type="text" name="stock" required lay-verify="required" id="stock"
  74. autocomplete="off" class="layui-input price">
  75. </div>
  76. <div class="layui-form-mid layui-word-aux">*商品的最大库存</div>
  77. </div>
  78. <!-- <div class="layui-form-item">
  79. <label class="layui-form-label" for="brand">商品品牌:</label>
  80. <div class="layui-input-block" style="width:200px;">
  81. <input type="text" name="brand" required lay-verify="required" id="brand"
  82. placeholder="请输入商品品牌" autocomplete="off" class="layui-input">
  83. </div>
  84. </div>
  85. <div class="layui-form-item">
  86. <label class="layui-form-label" for="attribute">商品属性:</label>
  87. <div class="layui-input-block" style="width:500px;">
  88. <input type="text" name="attribute" required lay-verify="required" id="attribute"
  89. placeholder="请输入商品属性(用“|”分割)" autocomplete="off" class="layui-input">
  90. </div>
  91. </div> -->
  92. <div class="layui-form-item">
  93. <label class="layui-form-label">商品图片:</label>
  94. <div class="layui-input-inline" style="width: auto;">
  95. <div class="upload-img" id="img">
  96. <div class="area">
  97. <i class="layui-icon">&#xe681;</i>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="layui-form-mid layui-word-aux">jpg,png,bmp,jpeg格式,大小1M, 比例1:1</div>
  102. </div>
  103. <div class="layui-form-item">
  104. <label class="layui-form-label" for="describe">店面描述:</label>
  105. <div class="layui-input-block">
  106. <textarea name="describe" id="describe"
  107. placeholder="请输入店面描述" class="layui-textarea" lay-verify="required"></textarea>
  108. </div>
  109. </div>
  110. <div class="layui-form-item">
  111. <label class="layui-form-label" for="content">商品详情:</label>
  112. <div class="layui-input-block">
  113. <textarea name="details" id="content"
  114. placeholder="请输入内容" class="layui-textarea"></textarea>
  115. </div>
  116. </div>
  117. <div class="layui-form-item">
  118. <div class="layui-input-block">
  119. <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
  120. </div>
  121. </div>
  122. </form>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. {/block}
  129. {block name="js"}
  130. <script src="__STATIC__/js/jquery.min.js"></script>
  131. <script>
  132. function number_input(key){
  133. $(key).keypress(function(key){
  134. var ableKey = [0,46,45,48,49,50,51,52,53,54,55,56,57];
  135. var code = key.charCode;
  136. if(ableKey.indexOf(code) < 0){
  137. return false;
  138. }
  139. });
  140. $(key).on('keyup',function () {
  141. var regex = '^[0-9].*$';
  142. var content = $(this).val();
  143. if(!content.match(regex)){
  144. $(this).val('');
  145. return false;
  146. }
  147. });
  148. }
  149. </script>
  150. <script>
  151. number_input('.price');
  152. var addurl = '{:url("broad/goods_add")}';
  153. var uploadurl = '{:url("goods/textAreaUpload")}';
  154. layui.use(['form', 'upload', 'layedit'], function () {
  155. var $ = layui.jquery
  156. , form = layui.form
  157. , layedit = layui.layedit
  158. , upload = layui.upload;
  159. var textarea;
  160. form.on("submit(admin)", function (obj) {
  161. layer.confirm('商品添加后无法修改,请仔细核对信息!', function(index){
  162. if($(obj.elem).hasClass('layui-btn-disabled')) return false;
  163. $(obj.elem).addClass('layui-btn-disabled');
  164. var formData = new FormData(obj.form);
  165. formData.set('details',layedit.getContent(textarea));
  166. $.ajax({
  167. url:addurl,
  168. type: 'POST',
  169. data: formData,
  170. dataType: 'json',
  171. processData: false,
  172. contentType: false,
  173. success: function (res) {
  174. if (res.code === 0) {
  175. layer.msg(res.msg, {anim: 0}, function () {
  176. parent.t.reload();
  177. var index = parent.layer.getFrameIndex(window.name);
  178. parent.layer.close(index);
  179. });
  180. } else {
  181. layer.msg(res.msg, {anim: 6});
  182. $(obj.elem).removeClass('layui-btn-disabled');
  183. }
  184. }
  185. });
  186. return false;
  187. });
  188. return false;
  189. });
  190. upload.render({
  191. elem: '#img',
  192. accept: 'images',
  193. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  194. auto: false,
  195. field: 'picture',
  196. size: 1 * 1024,
  197. choose: function(obj){
  198. file=obj.pushFile();
  199. obj.preview(function(index, file, result){
  200. $('#img').html('<img src="' + result + '" style="height: 100%;width:100%;">');
  201. });
  202. }
  203. });
  204. layedit.set({
  205. uploadImage: {
  206. url: uploadurl
  207. }
  208. });
  209. textarea = layedit.build('content', {
  210. height:'440px'
  211. });
  212. });
  213. </script>
  214. {/block}