agentform.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <style type="text/css">
  2. .amap-sug-result{
  3. z-index:999999999;
  4. }
  5. #pickerInput{
  6. z-index: 999999;
  7. position: absolute;
  8. right: 30px;
  9. top: 20px;
  10. width: 200px;
  11. }
  12. </style>
  13. <div class="layui-fluid">
  14. <div class="layui-row layui-col-space15">
  15. <div class="layui-col-md12">
  16. <div class="layui-card">
  17. <div class="layui-card-header">代理门店</div>
  18. <div class="layui-card-body" pad15>
  19. <div class="layui-form layui-form-pane" lay-filter="LAY-agent-agentform-edit">
  20. <input type="hidden" name="id" value="{$agent.id}">
  21. <div class="layui-form-item">
  22. <label class="layui-form-label">劳务公司</label>
  23. <div class="layui-input-block">
  24. <input type="text" name="workertitle" value="{$worker.title}" readonly class="layui-input layui-disabled">
  25. </div>
  26. </div>
  27. <div class="layui-form-item">
  28. <label class="layui-form-label">关联用户</label>
  29. <div class="layui-input-block">
  30. <input type="text" name="musermobile" value="{$agent.muser ? $agent.muser.mobile : ''}" lay-verify="phone" placeholder="请输入关联用户手机号..."
  31. autocomplete="off" class="layui-input">
  32. <div class="layui-form-mid layui-word-aux">关联用户的手机号。<!-- 关联的用户个人中心会出现代理门店管理入口导航。 --></div>
  33. </div>
  34. </div>
  35. <div class="layui-form-item">
  36. <label class="layui-form-label"><span style="color:#f90c05;">*</span>代理编号</label>
  37. <div class="layui-input-block">
  38. <input type="text" name="idnumber" value="{$agent.idnumber}" lay-verify="required" placeholder="请输入..."
  39. autocomplete="off" class="layui-input">
  40. <div class="layui-form-mid layui-word-aux">可以是代理特定编号,需要确保唯一性。</div>
  41. </div>
  42. </div>
  43. <div class="layui-form-item">
  44. <label class="layui-form-label"><span style="color:#f90c05;">*</span>代理名称</label>
  45. <div class="layui-input-block">
  46. <input type="text" name="title" value="{$agent.title}" lay-verify="required" placeholder="请输入..." autocomplete="off"
  47. class="layui-input">
  48. </div>
  49. </div>
  50. <div class="layui-form-item">
  51. <label class="layui-form-label">标图</label>
  52. <div class="layui-input-block">
  53. <div class="layui-upload">
  54. <button type="button" class="layui-btn attachment-upload-images" data-input="tilpic" data-amount="1">上传图片</button>
  55. <div class="layui-inline layui-word-aux"> 最佳尺寸:320px*320px </div>
  56. <div class="layui-upload-list echo-attachment-image-list" id="tilpic">
  57. {notempty name="agent.tilpic"}
  58. <div>
  59. <input type="hidden" name="tilpic" value="{$agent.tilpic}">
  60. <img src="{$agent.tilpic}">
  61. </div>
  62. {/notempty}
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="layui-form-item">
  68. <label class="layui-form-label">轮播图</label>
  69. <div class="layui-input-block">
  70. <div class="layui-upload">
  71. <button type="button" class="layui-btn attachment-upload-images" data-input="picall" data-amount="9">上传图片</button>
  72. <div class="layui-inline layui-word-aux"> 最佳尺寸:750px*375px </div>
  73. <div class="layui-upload-list echo-attachment-image-list" id="picall">
  74. {volist name="agent.picall" id="vo"}
  75. <div>
  76. <input type="hidden" name="picall[]" value="{$vo}">
  77. <img src="{$vo}"> <button type="button" class="attachmentdel layui-btn layui-btn-primary layui-btn-xs layui-btn-fluid">删除</button>
  78. </div>
  79. {/volist}
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="layui-form-item">
  85. <label class="layui-form-label"><span style="color:#f90c05;">*</span>负责人姓名</label>
  86. <div class="layui-input-block">
  87. <input type="text" name="realname" value="{$agent.realname}" lay-verify="required" placeholder="请输入..."
  88. autocomplete="off" class="layui-input">
  89. </div>
  90. </div>
  91. <div class="layui-form-item">
  92. <label class="layui-form-label">负责人手机</label>
  93. <div class="layui-input-block">
  94. <input type="text" name="mobile" value="{$agent.mobile}" lay-verify="phone" placeholder="请输入..." autocomplete="off"
  95. class="layui-input">
  96. </div>
  97. </div>
  98. <div class="layui-form-item">
  99. <label class="layui-form-label">门店电话</label>
  100. <div class="layui-input-block">
  101. <input type="text" name="telephone" value="{$agent.telephone}" placeholder="请输入..." autocomplete="off" class="layui-input">
  102. </div>
  103. </div>
  104. <div class="layui-form-item" id="LAY-agent-agentform-edit-areapicker">
  105. <label class="layui-form-label"><span style="color:#f90c05;">*</span>省市区</label>
  106. <div class="layui-input-inline">
  107. <select name="province" class="province-selector" data-value="{$agent.province}" lay-filter="province-2"
  108. lay-verify="required">
  109. <option value="">请选择省</option>
  110. </select>
  111. </div>
  112. <div class="layui-input-inline">
  113. <select name="city" class="city-selector" data-value="{$agent.city}" lay-filter="city-2" lay-verify="required">
  114. <option value="">请选择市</option>
  115. </select>
  116. </div>
  117. <div class="layui-input-inline">
  118. <select name="district" class="district-selector" data-value="{$agent.district}" lay-filter="district-2"
  119. lay-verify="required">
  120. <option value="">请选择区</option>
  121. </select>
  122. </div>
  123. </div>
  124. <div class="layui-form-item">
  125. <label class="layui-form-label">详细地址</label>
  126. <div class="layui-input-block">
  127. <input type="text" name="address" value="{$agent.address}" lay-verify="required" placeholder="请输入..."
  128. autocomplete="off" class="layui-input">
  129. </div>
  130. </div>
  131. <div class="layui-form-item">
  132. <label class="layui-form-label"><span style="color:#f90c05;">*</span>经纬度</label>
  133. <div class="layui-input-inline">
  134. <input type="text" name="longitude" value="{$agent.longitude}" lay-verify="required" placeholder="经度"
  135. autocomplete="off" class="layui-input">
  136. </div>
  137. <div class="layui-input-inline">
  138. <input type="text" name="latitude" value="{$agent.latitude}" lay-verify="required" placeholder="纬度"
  139. autocomplete="off" class="layui-input">
  140. </div>
  141. <div id="maplocation" style="width:500px;height:500px;display: none;">
  142. <input id="pickerInput" class="layui-input" placeholder="输入关键字选取地点"/>
  143. </div>
  144. <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-map-lnglat">选择地理位置</button>
  145. </div>
  146. <div class="layui-form-item" id="formdetails">
  147. <label class="layui-form-label">门店介绍</label>
  148. <div class="layui-input-block">
  149. <textarea class="layui-textarea" name="details" id="details" placeholder="请输入..." style="display: none"
  150. lay-verify="editcontent">
  151. {$agent.details}
  152. </textarea>
  153. </div>
  154. </div>
  155. <div class="layui-form-item">
  156. <label class="layui-form-label">排序</label>
  157. <div class="layui-input-block">
  158. <input type="text" name="priority" value="{$agent.priority|default=0}" lay-verify="number" placeholder="请输入...,倒序,值越大越靠前。"
  159. autocomplete="off" class="layui-input">
  160. </div>
  161. </div>
  162. <div class="layui-form-item">
  163. <label class="layui-form-label">信息备注</label>
  164. <div class="layui-input-block">
  165. <input type="text" name="remark" value="{$agent.remark}" placeholder="请输入..." autocomplete="off" class="layui-input">
  166. </div>
  167. </div>
  168. <div class="layui-form-item" pane>
  169. <label class="layui-form-label">状态</label>
  170. <div class="layui-input-block">
  171. <input type="radio" name="status" value="1" title="正常" {eq name="agent.status|default=1" value="1" }checked{/eq} />
  172. <input type="radio" name="status" value="2" title="禁用" {eq name="agent.status" value="2" }checked{/eq} />
  173. </div>
  174. </div>
  175. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  176. <legend>PC端管理账号密码</legend>
  177. </fieldset>
  178. <div class="layui-form-item">
  179. <label class="layui-form-label">登录账号</label>
  180. <div class="layui-input-block">
  181. <input type="text" name="loginname" value="{$agent.loginname}" placeholder="请输入..." autocomplete="off" class="layui-input">
  182. <div class="layui-form-mid layui-word-aux">PC端管理登录账号。</div>
  183. </div>
  184. </div>
  185. <div class="layui-form-item">
  186. <label class="layui-form-label">登录密码</label>
  187. <div class="layui-input-block">
  188. <input type="text" name="password" value="" placeholder="请输入登录密码,不修改留空" autocomplete="off" class="layui-input">
  189. <div class="layui-form-mid layui-word-aux">PC端管理登录密码。</div>
  190. </div>
  191. </div>
  192. <div class="layui-form-item">
  193. <div class="layui-input-block">
  194. <input type="button" lay-submit lay-filter="LAY-agent-agentform-edit-submit" value="确认提交" class="layui-btn">
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. <script>
  204. layui.config({
  205. base: '/static/echoui/' //静态资源所在路径
  206. }).extend({
  207. index: 'lib/index' //主入口模块
  208. }).use(['index', 'form', 'set', 'upload', 'layedit', 'layarea'], function() {
  209. var $ = layui.$,
  210. setter = layui.setter,
  211. admin = layui.admin,
  212. form = layui.form,
  213. upload = layui.upload,
  214. layedit = layui.layedit,
  215. layarea = layui.layarea;
  216. form.render();
  217. var details = layedit.build('details', {
  218. uploadImage: {
  219. url: setter.baseWorkerUrl + 'attachment/tplfieldimage',
  220. type: 'post'
  221. }
  222. });
  223. form.verify({
  224. editcontent: function(value) {
  225. layedit.sync(details);
  226. }
  227. });
  228. layarea.render({
  229. elem: '#LAY-agent-agentform-edit-areapicker',
  230. data: {
  231. province: '福建省',
  232. city: '泉州市',
  233. district: '晋江市',
  234. }
  235. });
  236. var map = new AMap.Map('maplocation', {
  237. center:[118.551494,24.781674],//地图中心位置
  238. zoom: 12,
  239. });
  240. $('#layuiadmin-map-lnglat').on('click', function() {
  241. var index = layer.open({
  242. type: 1,
  243. title: '点击获取地址坐标',
  244. area: ['500px', '550px'],
  245. content: $('#maplocation'),
  246. success: function() {
  247. //var map = new AMap.Map("maplocation", { resizeEnable: true });
  248. map.on('click', function(e) {
  249. $('input[name="longitude"]').val(e.lnglat.getLng());
  250. $('input[name="latitude"]').val(e.lnglat.getLat());
  251. layer.close(index);
  252. });
  253. }
  254. });
  255. });
  256. var auto = new AMap.Autocomplete({ input: "pickerInput" });
  257. var placeSearch = new AMap.PlaceSearch({ map: map });
  258. window.select = function (e) {
  259. console.log(e);
  260. placeSearch.setCity(e.poi.adcode);
  261. placeSearch.search(e.poi.name);
  262. };
  263. AMap.event.addListener(auto, "select", select);
  264. form.on('submit(LAY-agent-agentform-edit-submit)', function(obj) {
  265. var index = parent.layer.getFrameIndex(window.name);
  266. admin.req({
  267. url: setter.baseWorkerUrl + 'agent/editagent',
  268. type: 'post',
  269. data: obj.field,
  270. done: function(res) {
  271. layer.msg("提交成功", {
  272. icon: 1
  273. });
  274. parent.layui.table.reload('LAY-agent-agentlist-table'); //重载表格
  275. parent.layer.close(index);
  276. }
  277. });
  278. });
  279. $('.echo-attachment-image-list').on('click', '.attachmentdel', function() {
  280. $(this).parent().remove();
  281. });
  282. upload.render({
  283. elem: '.attachment-upload-images',
  284. url: setter.baseWorkerUrl + 'attachment/tplfieldimage',
  285. accept: 'images',
  286. exits: 'jpg|png|jpeg',
  287. acceptMime: 'image/*',
  288. size: 2048,
  289. number: 1,
  290. method: 'post',
  291. before: function(obj) {
  292. var item = this.item;
  293. upload_input = $(item).data('input');
  294. upload_amount = $(item).data('amount');
  295. layer.load();
  296. },
  297. done: function(res, index, upload) {
  298. layer.closeAll('loading');
  299. var html = "";
  300. if (upload_amount == 1) {
  301. html += '<div> <input type="hidden" name="' + upload_input + '" value="' + res.data.src + '"> ';
  302. html += '<img src="' + res.data.src + '"></div>';
  303. $("#" + upload_input).html(html);
  304. } else {
  305. html += '<div> <input type="hidden" name="' + upload_input + '[]" value="' + res.data.src + '"> ';
  306. html += '<img src="' + res.data.src +
  307. '"> <button type="button" class="attachmentdel layui-btn layui-btn-primary layui-btn-xs layui-btn-fluid">删除</button></div>';
  308. $("#" + upload_input).append(html);
  309. }
  310. },
  311. error: function(index, upload) {
  312. layer.closeAll('loading');
  313. }
  314. });
  315. });
  316. </script>