goods-edit.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layui</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" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
  10. <link rel="stylesheet" href="../../css/public.css" media="all">
  11. <link rel="stylesheet" href="../../css/mycss/mycss.css" media="all" />
  12. <style>
  13. body {
  14. background-color: #ffffff;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="layui-form layuimini-form" lay-filter="goods-form">
  20. <div class="layui-form-item">
  21. <label class="layui-form-label required">商品名称</label>
  22. <div class="layui-input-block">
  23. <input id="goodsName" type="text" name="goodsName" lay-verify="required" lay-reqtext="商品名称不能为空" placeholder="请输入商品名称" value="" class="layui-input">
  24. <!-- <tip>填写自己管理账号的名称。</tip> -->
  25. </div>
  26. </div>
  27. <div class="layui-form-item">
  28. <label class="layui-form-label">商品类型</label>
  29. <div class="layui-input-inline">
  30. <select id="goodsType" name="goodsType" lay-verify="required" lay-reqtext="请选择类型" lay-search="">
  31. <option value="">请选择分类</option>
  32. </select>
  33. </div>
  34. </div>
  35. <div class="layui-form-item layui-form-text">
  36. <label class="layui-form-label">商品描述</label>
  37. <div class="layui-input-block">
  38. <textarea id="description" name="description" placeholder="请输入商品描述内容" class="layui-textarea"></textarea>
  39. </div>
  40. </div>
  41. <!-- <div class="layui-form-item layui-form-text">
  42. <label class="layui-form-label">商品图片</label>
  43. <div class="layui-input-inline">
  44. <button type="button" name="goodsPic" class="layui-btn" id="upload">
  45. <i class="layui-icon">&#xe67c;</i>上传图片
  46. </button>
  47. </div>
  48. </div> -->
  49. <div class="layui-form-item">
  50. <label class="layui-form-label required">价格(元)</label>
  51. <div class="layui-input-inline">
  52. <input id="price" type="number" name="price" lay-verify="required" lay-reqtext="请输入商品价格" placeholder="" value="" class="layui-input">
  53. </div>
  54. <label class="layui-form-label required">成本(元)</label>
  55. <div class="layui-input-inline">
  56. <input id="cost" type="number" name="cost" lay-verify="required" lay-reqtext="请输入商品成本" placeholder="" value="" class="layui-input">
  57. </div>
  58. </div>
  59. <div class="layui-form-item">
  60. <label class="layui-form-label required">库存(件)</label>
  61. <div class="layui-input-inline">
  62. <input id="stock" type="number" name="stock" lay-verify="required" lay-reqtext="请输入商品库存" placeholder="" value="" class="layui-input">
  63. </div>
  64. <label class="layui-form-label">原料</label>
  65. <div class="layui-input-inline">
  66. <input id="ingredients" type="text" name="ingredients" placeholder="" value="" class="layui-input">
  67. <!-- <tip>填写自己管理账号的名称。</tip> -->
  68. </div>
  69. </div>
  70. <div class="layui-form-item">
  71. <label class="layui-form-label">分量(g)</label>
  72. <div class="layui-input-inline">
  73. <input id="weight" type="text" name="weight" placeholder="" value="" class="layui-input">
  74. </div>
  75. <label class="layui-form-label">口味</label>
  76. <div class="layui-input-inline">
  77. <input id="taste" type="text" name="taste" placeholder="" value="" class="layui-input">
  78. </div>
  79. </div>
  80. <div class="layui-form-item">
  81. <label class="layui-form-label">荤素</label>
  82. <div class="layui-input-block">
  83. <input id="isMeat" type="radio" name="isMeat" value="y" title="荤" checked="">
  84. <input id="isMeat" type="radio" name="isMeat" value="n" title="素">
  85. </div>
  86. </div>
  87. <div class="layui-form-item layui-form-text">
  88. <label class="layui-form-label">商品图片</label>
  89. <!-- <div id="goodsPictures"></div> -->
  90. <div class="layui-carousel preCarousel" id="picCarousel">
  91. <div id="goodsPictures" carousel-item>
  92. </div>
  93. </div>
  94. <div class="layui-input-inline">
  95. <button type="button" name="pic" class="layui-btn" id="upload">
  96. <i class="layui-icon">&#xe67c;</i>上传图片
  97. </button>
  98. </div>
  99. </div>
  100. <div class="layui-form-item layui-form-text">
  101. <label class="layui-form-label">备注信息</label>
  102. <div class="layui-input-block">
  103. <textarea id="remark" name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
  104. </div>
  105. </div>
  106. <div class="layui-form-item">
  107. <div class="layui-input-block">
  108. <button id="save" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  114. <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  115. <script src="../../js/myjs/utils.js"></script>
  116. <script src="../../js/myjs/goods-edit.js" charset="utf-8"></script>
  117. <script>
  118. layui.use(['form','upload','carousel'], function () {
  119. var form = layui.form,
  120. layer = layui.layer,
  121. $ = layui.$,
  122. upload = layui.upload,
  123. carousel = layui.carousel;
  124. var goods=layui.sessionData('goods-update')
  125. goods=goods.goods;
  126. var uploadPics=[]
  127. //监听提交
  128. form.on('submit(saveBtn)', function (data) {
  129. var pics=[]
  130. uploadPics.forEach(p=>{
  131. pics.push({
  132. picName:p.fileName,
  133. picUrl:p.fileDownloadUri
  134. });
  135. })
  136. var data=data.field;
  137. data.pictures=pics;
  138. data.id=goods.id
  139. postData('/goods/update',JSON.stringify(data));
  140. layer.msg('保存成功')
  141. setTimeout(function(){
  142. var iframeIndex = parent.layer.getFrameIndex(window.name);
  143. parent.layer.close(iframeIndex);
  144. },1000)
  145. return false;
  146. });
  147. //文件上传
  148. var uploadInst = upload.render({
  149. elem: '#upload', //绑定元素
  150. url: getUploadUrl(), //上传接口
  151. headers:{
  152. token:getToken()
  153. },
  154. accept:'images',
  155. acceptMime: 'image/*',
  156. multiple:true,
  157. number:3,
  158. size:1024*3,
  159. before:function(){
  160. uploadPics=[]
  161. },
  162. done:function(res){
  163. if(res.success){
  164. var data=res.data;
  165. uploadPics.push(data);
  166. // layui.sessionData('upload',{key:'urls',value:pics})
  167. }
  168. },
  169. allDone:function(obj){
  170. if(obj.successful==obj.total){
  171. layer.msg("上传成功")
  172. $("#goodsPictures").empty();
  173. uploadPics.forEach(picture=>{
  174. var img = new Image();
  175. img.src = getServerIPPrefix()+picture.fileDownloadUri;
  176. $("#goodsPictures").append(img)
  177. })
  178. //渲染轮播图
  179. renderCarousel('#picCarousel');
  180. }else{
  181. layer.msg(obj.aborted+"个上传失败")
  182. }
  183. },
  184. error: function(){
  185. //请求异常回调
  186. layer.msg('图片上传失败')
  187. }
  188. });
  189. });
  190. </script>
  191. </body>
  192. </html>