user-setting.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>基本资料</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. .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="layuimini-container">
  18. <div class="layuimini-main">
  19. <div class="layui-form layuimini-form" lay-filter="merchant-form">
  20. <div class="layui-form-item">
  21. <label class="layui-form-label required">店铺名称</label>
  22. <div class="layui-input-block">
  23. <input type="text" name="storeName" lay-verify="required" lay-reqtext="店铺名称不能为空" placeholder="请输入管理账号" value="admin" class="layui-input">
  24. <tip>填写自己店铺名称的名称。</tip>
  25. </div>
  26. </div>
  27. <div class="layui-form-item" id="area-picker">
  28. <label class="layui-form-label required">店铺地址</label>
  29. <div class="layui-input-inline" style="width: 200px;">
  30. <select id="province" name="province" class="province-selector" lay-verify="required" lay-reqtext="请选择省" data-value="广东省" lay-filter="province-1">
  31. <option value="">请选择省</option>
  32. </select>
  33. </div>
  34. <div class="layui-input-inline" style="width: 200px;">
  35. <select name="city" class="city-selector" lay-verify="required" lay-reqtext="请选择市" data-value="深圳市" lay-filter="city-1">
  36. <option value="">请选择市</option>
  37. </select>
  38. </div>
  39. <div class="layui-input-inline" style="width: 200px;">
  40. <select name="district" class="county-selector" lay-verify="required" lay-reqtext="请选择区" data-value="龙岗区" lay-filter="county-1">
  41. <option value="">请选择区</option>
  42. </select>
  43. </div>
  44. </div>
  45. <div class="layui-form-item">
  46. <label class="layui-form-label required">详细地址</label>
  47. <div class="layui-input-block">
  48. <input type="text" name="address" lay-verify="required" lay-reqtext="地址不能为空" placeholder="请输入地址" value="" class="layui-input">
  49. </div>
  50. </div>
  51. <div class="layui-form-item">
  52. <label class="layui-form-label required">营业时间</label>
  53. <div class="layui-input-inline">
  54. <input type="text" id="businessTime" name="businessTime" lay-verify="required" lay-reqtext="营业时间不能为空" value="9:00 - 21:00" class="layui-input">
  55. </div>
  56. </div>
  57. <div class="layui-form-item">
  58. <label class="layui-form-label">介绍</label>
  59. <div class="layui-input-block">
  60. <textarea name="description" placeholder="请输入描述内容" class="layui-textarea"></textarea>
  61. </div>
  62. </div>
  63. <div class="layui-form-item">
  64. <label class="layui-form-label">公告</label>
  65. <div class="layui-input-block">
  66. <textarea name="announcement" placeholder="请输入公告内容" class="layui-textarea"></textarea>
  67. </div>
  68. </div>
  69. <div class="layui-form-item layui-form-text">
  70. <label class="layui-form-label required">店铺头像</label>
  71. <img id="header-pic" class="prePicture" src="../images/loginbg.png" />
  72. <div class="layui-input-inline">
  73. <button type="button" name="pic" class="layui-btn" id="merchant-header">
  74. <i class="layui-icon">&#xe67c;</i>上传图片
  75. </button>
  76. </div>
  77. </div>
  78. <div class="layui-form-item layui-form-text">
  79. <label class="layui-form-label">店铺实景</label>
  80. <div id="realPictures"></div>
  81. <div class="layui-input-inline">
  82. <button type="button" name="pic" class="layui-btn" id="merchant-real-pic">
  83. <i class="layui-icon">&#xe67c;</i>上传图片
  84. </button>
  85. </div>
  86. </div>
  87. <div class="layui-form-item">
  88. <label class="layui-form-label required">联系电话</label>
  89. <div class="layui-input-block">
  90. <input type="number" name="phone" lay-verify="required" lay-reqtext="联系电话不能为空" placeholder="请输入手机" value="" class="layui-input">
  91. </div>
  92. </div>
  93. <div class="layui-form-item">
  94. <label class="layui-form-label">自动回复</label>
  95. <div class="layui-input-block">
  96. <input type="checkbox" id="isAutoReply" checked="" name="isAutoReply" lay-skin="switch" lay-filter="switchAutoReply" lay-text="ON|OFF">
  97. </div>
  98. </div>
  99. <div class="layui-form-item" id="ReplyContent">
  100. <label class="layui-form-label required">内容</label>
  101. <div class="layui-input-block">
  102. <textarea name="autoReplyContent" placeholder="请输入自动回复内容" class="layui-textarea"></textarea>
  103. </div>
  104. </div>
  105. <div class="layui-form-item">
  106. <div class="layui-input-block">
  107. <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
  108. </div>
  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/lay-config.js?v=1.0.4" charset="utf-8"></script>
  116. <script src="../js/myjs/user-setting.js"></script>
  117. <script src="../js/myjs/utils.js"></script>
  118. <script>
  119. layui.use(['form','miniTab', 'layarea', 'upload', 'laydate'], function () {
  120. var form = layui.form,
  121. layer = layui.layer,
  122. miniTab = layui.miniTab,
  123. layarea = layui.layarea,
  124. upload = layui.upload,
  125. laydate = layui.laydate;
  126. laydate.render({
  127. elem: '#businessTime',
  128. type: 'time',
  129. range: true,
  130. format:'HH:mm'
  131. });
  132. var uploadPics=[]
  133. var header='';
  134. var isAutoReply='on'
  135. //监听提交
  136. form.on('submit(saveBtn)', function (data) {
  137. var data=data.field;
  138. data.headerUrl=header
  139. data.realPictures=uploadPics;
  140. data.isAutoReply=isAutoReply;
  141. if(isAutoReply=='off')
  142. delete data.autoReplyContent
  143. postData('/merchant/update',JSON.stringify(data));
  144. layer.msg('保存成功')
  145. return false;
  146. });
  147. //回显数据
  148. var merchant=getData('/merchant/get',null)
  149. merchant=merchant.data
  150. form.val("merchant-form",{
  151. "storeName":merchant.storeName,
  152. "province":merchant.province,
  153. "city":merchant.city,
  154. "district":merchant.district,
  155. "address":merchant.address,
  156. "phone":merchant.phone,
  157. "description":merchant.description,
  158. "announcement":merchant.announcement,
  159. "businessTime":merchant.businessTime,
  160. // "isAutoReply":merchant.isAutoReply,
  161. "autoReplyContent":merchant.autoReplyContent
  162. })
  163. $("[name=province]").attr('data-value',merchant.province)
  164. $("[name=city]").attr('data-value',merchant.city)
  165. $("[name=district]").attr('data-value',merchant.district)
  166. $("#header-pic").attr('src',getServerIPPrefix()+merchant.headerUrl)
  167. header=getServerIPPrefix()+merchant.headerUrl
  168. isAutoReply=merchant.isAutoReply
  169. if(isAutoReply=='off'||isAutoReply==null){
  170. isAutoReply='off'
  171. $("#ReplyContent").hide()
  172. }
  173. //回显实景图片
  174. merchant.realPictureUrl.forEach(picUrl=>{
  175. var img=new Image();
  176. img.src=getServerIPPrefix()+picUrl;
  177. $(img).addClass('prePicture')
  178. $("#realPictures").append(img)
  179. })
  180. layarea.render({
  181. elem: '#area-picker',
  182. change: function (res) {
  183. //选择结果
  184. // console.log(res);
  185. }
  186. });
  187. //头像上传
  188. var uploadInst = upload.render({
  189. elem: '#merchant-header', //绑定元素
  190. url: getUploadUrl(), //上传接口
  191. headers:{
  192. token:getToken()
  193. },
  194. accept:'images',
  195. acceptMime: 'image/*',
  196. multiple:true,
  197. number:1,
  198. size:1024*5,
  199. done:function(res){
  200. if(res.success){
  201. var data=res.data;
  202. header=getServerIPPrefix()+data.fileDownloadUri
  203. $("#header-pic").attr('src',header)
  204. }
  205. },
  206. allDone:function(obj){
  207. if(obj.successful==obj.total){
  208. layer.msg("上传成功")
  209. }else{
  210. layer.msg(obj.aborted+"个上传失败")
  211. }
  212. },
  213. error: function(){
  214. //请求异常回调
  215. layer.msg('图片上传失败')
  216. }
  217. });
  218. //实景上传
  219. var uploadInst = upload.render({
  220. elem: '#merchant-real-pic', //绑定元素
  221. url: getUploadUrl(), //上传接口
  222. headers:{
  223. token:getToken()
  224. },
  225. accept:'images',
  226. acceptMime: 'image/*',
  227. multiple:true,
  228. number:3,
  229. size:1024*5,
  230. before:function(){
  231. uploadPics=[]
  232. },
  233. done:function(res){
  234. if(res.success){
  235. var data=res.data;
  236. uploadPics.push(data.fileDownloadUri);
  237. // header=data.fileDownloadUri
  238. // $("#header-pic").attr('src',header)
  239. }
  240. },
  241. allDone:function(obj){
  242. if(obj.successful==obj.total){
  243. layer.msg("上传成功")
  244. $("#realPictures").empty();
  245. uploadPics.forEach(picUrl=>{
  246. var img=new Image();
  247. img.src=getServerIPPrefix()+picUrl;
  248. $(img).addClass('prePicture')
  249. $("#realPictures").append(img)
  250. })
  251. }else{
  252. layer.msg(obj.aborted+"个上传失败")
  253. }
  254. },
  255. error: function(){
  256. //请求异常回调
  257. layer.msg('图片上传失败')
  258. }
  259. });
  260. //开关
  261. form.on('switch(switchAutoReply)', function (data) {
  262. var reply=$("#ReplyContent")
  263. if(this.checked){
  264. isAutoReply='on'
  265. reply.show()
  266. }else{
  267. isAutoReply='off'
  268. reply.hide()
  269. }
  270. });
  271. });
  272. </script>
  273. </body>
  274. </html>