location-edit.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="author" content=""/>
  6. <meta name="description" content=""/>
  7. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  8. <meta name="format-detection" content="telphone=no,email=no"/>
  9. <meta name="viewport"
  10. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <title>编辑投放地址</title>
  15. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
  16. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>
  17. <link rel="stylesheet" href="../components/custom/css/common.css"/>
  18. <link rel="stylesheet" href="css/xyf.common.min.css">
  19. <style>
  20. .partnerPanel {
  21. margin-bottom: 0;
  22. }
  23. .partnerPanel:before {
  24. display: none;
  25. }
  26. .p-operation {
  27. margin-top: 12px;
  28. }
  29. .p-operation em {
  30. padding: 6px 4px;
  31. margin-left: 10px;
  32. }
  33. .p-operation em i {
  34. font-size: 18px;
  35. vertical-align: middle;
  36. }
  37. .p-operation em span {
  38. vertical-align: middle;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div class="mui-content custom-top add-addr" style="padding-bottom: 52px">
  44. <div class="mui-input-group">
  45. <div class="mui-input-row" permission="manage-edit">
  46. <label>分组名称</label>
  47. <input type="text" id="name" placeholder="请填写" class="mui-text-right">
  48. </div>
  49. <div class="mui-input-row" permission="manage-edit">
  50. <label>地址标签</label>
  51. <input type="text" id="tag" placeholder="可以不填" class="mui-text-right">
  52. </div>
  53. <div class="mui-input-row" permission="manage-edit">
  54. <label>地址类型</label>
  55. <input type="text" id="area" name="option" placeholder="请选择" class="mui-text-right" readonly>
  56. <input type="hidden" id="addressType"/>
  57. </div>
  58. </div>
  59. <div class="mui-input-group custom-top">
  60. <div class="mui-input-row" permission="manage-edit">
  61. <label>省市县</label>
  62. <input type="text" id="location" name="option" placeholder="请选择" class="mui-text-right">
  63. <input type="hidden" id="districtId"/>
  64. </div>
  65. <div class="mui-input-row mui-hidden" id="needCountry" permission="manage-edit">
  66. <label>乡镇/街道</label>
  67. <input type="text" id="country" placeholder="请填写乡镇/街道" class="mui-text-right">
  68. </div>
  69. <div class="mui-input-row" permission="manage-edit">
  70. <label>详细地址</label>
  71. <input type="text" id="address" placeholder="请填写详细地址" class="mui-text-right">
  72. </div>
  73. </div>
  74. <div class="mui-input-group custom-top" permission="manage-show">
  75. <div class="mui-input-row autoheight">
  76. <div class="mui-pull-left">
  77. 设为默认投放地址
  78. <span>每次注册设备时使用该地址</span>
  79. </div>
  80. <div class="mui-switch mui-switch-mini isDefault">
  81. <div class="mui-switch-handle"></div>
  82. </div>
  83. </div>
  84. <div class="mui-input-row autoheight">
  85. <div class="mui-pull-left">
  86. 强制用户充值
  87. <span>如果用户没有余额,需要充值才能使用</span>
  88. </div>
  89. <div class="mui-switch mui-switch-mini beforeCharge">
  90. <div class="mui-switch-handle"></div>
  91. </div>
  92. </div>
  93. <div class="mui-input-row autoheight">
  94. <div class="mui-pull-left">
  95. 扫码弹出显示计费规则
  96. <span>用户扫码设备后, 优先先弹出计费规则</span>
  97. </div>
  98. <div class="mui-switch mui-switch-mini popPriceDescriptionButton">
  99. <div class="mui-switch-handle"></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="mui-table-view handleBtn mui-text-center">
  105. <button type="button" value="" class="mui-btn mui-btn-blue padding-l-r-20"
  106. onclick="save()">保存
  107. </button>
  108. </div>
  109. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  110. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  111. <script src="https://cdn.washpayer.com/components/lib/mui.picker.min.js"></script>
  112. <script src="/components/custom/js/common.js"></script>
  113. <script src="../components/lib/gcoord.js"></script>
  114. <script type="text/javascript"
  115. src="https://api.map.baidu.com/api?v=2.0&ak=9579bf3cb9fdab9d6b49cdaf72c9907f"></script>
  116. <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  117. <script src="js/xyf.city.three.js"></script>
  118. <script src="js/xyf.picker.js"></script>
  119. <script src="js/xyf.common.js"></script>
  120. <script>
  121. // 某些厂商必须要填写 乡镇 ,由于目前我们只有3级地区联动,所以需要手动填写
  122. var needCountry = false;
  123. getFeatureList("dealer", {list: ['needCountry']}, function (payload) {
  124. if (payload.needCountry) {
  125. $('#needCountry').removeClass('mui-hidden')
  126. }
  127. initGroupInfo()
  128. });
  129. var mapSuggestLoaded = false;
  130. // todo 暂时不要
  131. function loadMapSuggest() {
  132. if (mapSuggestLoaded) {
  133. return;
  134. }
  135. $("#address").blur();
  136. if (window.BMap) {
  137. //百度 地图mask等待,因为地图可能加载非常慢
  138. var mask = new Mask("正在获取位置信息...").show();
  139. setTimeout(function () {
  140. mask && mask.remove();//避免超时卡死
  141. mapSuggestLoaded = true;//既然加载不出来,就不再加载,只能自己去填写了
  142. }, 10 * 1000);
  143. getLocation(function (res) {
  144. mapSuggestLoaded = true;
  145. mask && mask.remove();
  146. if (res) {
  147. //转换为百度可用的坐标
  148. var pointList = gcoord.transform(
  149. [res.lng, res.lat],
  150. gcoord.GCJ02, // 当前坐标系
  151. gcoord.BD09 // 目标坐标系
  152. );
  153. var currentPoint = new BMap.Point(pointList[0], pointList[1]);
  154. //地址搜索建议
  155. var ac = new BMap.Autocomplete({
  156. "input": "address",
  157. location: currentPoint,
  158. "onSearchComplete": function (result) {
  159. }
  160. });
  161. //鼠标点击下拉列表后的事件
  162. ac.addEventListener("onconfirm", function (e) {
  163. var _value = e.item.value;
  164. var myValue = _value.street + _value.business;
  165. return myValue;
  166. });
  167. }
  168. }, function () {
  169. mask && mask.remove();
  170. });
  171. }
  172. }
  173. //阻止冒泡
  174. $('.add-addr input[name]').tap(function (e) {
  175. e.preventDefault();
  176. $('.add-addr input').blur();
  177. });
  178. //合伙人数据缓存
  179. var partnerData = [];
  180. var needPartner = false;
  181. //初始化数据
  182. var groupId = getQueryString("groupId");
  183. function initGroupInfo() {
  184. var url = "/dealer/groupInfo";
  185. var data = {"groupId": groupId};
  186. sendRequest(url, "GET", data, function (res) {
  187. if (res.result === 1) {
  188. CreateCitySelect({areaId: res.para.districtId}, function () {
  189. $("#name").val(res.para.groupName);
  190. $("#tag").val(res.para.tag);
  191. $("#districtId").val(res.para.districtId);
  192. $("#location").val(res.para.district);
  193. $("#country").val(res.para.country);
  194. $("#address").attr("placeholder", res.para.address);//设置到placeholder;如果是赋值,地址输入框会自动弹出百度的推荐下拉框! 保存时注意即可
  195. $("#addressType").val(res.para.addressType);
  196. setArea(res.para.addressType);
  197. if (res.para.isDefault) {
  198. $(".isDefault").addClass("mui-active");
  199. }
  200. if (res.para.beforeCharge) {
  201. $(".beforeCharge").addClass("mui-active");
  202. }
  203. if (res.para.popPriceDescriptionButton) {
  204. $(".popPriceDescriptionButton").addClass("mui-active");
  205. }
  206. //展示负责人名称
  207. if (res.para.managerName) {
  208. $("#owner").text(" " + res.para.managerName);
  209. }
  210. if (res.para.isManager || res.para.isManager == null) {
  211. $("body").attr("role", "manage");
  212. } else {
  213. $("body").attr("role", "limit-user");
  214. }
  215. var partnerList = res.para.partner;
  216. if (partnerList && partnerList.length > 0) {
  217. // 必须手动切换状态,mui的toggle有bug
  218. $(".partner").addClass("mui-active");
  219. $(".partnerPanelSub").removeClass("mui-hidden");
  220. needPartner = true;
  221. //缓存合伙人数据
  222. partnerData = partnerData.concat(partnerList);
  223. //展现合伙人信息到页面
  224. for (var i = 0; i < partnerData.length; i++) {
  225. var item = partnerData[i];
  226. //转换数据类型
  227. item.percent = parseFloat(item.percent);
  228. var opt = {
  229. name: item.name,
  230. tel: item.tel,
  231. id: item.id,
  232. percent: item.percent,
  233. self: item.self,
  234. editDisabled: item.editDisabled
  235. }
  236. addPartner(opt);
  237. }
  238. setMyPercent();
  239. // 合伙人数量把自己也算上
  240. $(".partnerTotal").removeClass('mui-hidden').html("共" + (partnerData.length + 1) + "人")
  241. }
  242. });
  243. } else {
  244. mui.toast(res.description);
  245. }
  246. });
  247. $(".partnerColl").tap(function (e) {
  248. $(".partnerColl").focus();
  249. e.preventDefault();
  250. });
  251. //合伙人开关
  252. $(".partner").on("toggle", function (event) {
  253. if (event.detail.isActive) {
  254. $(".partnerPanelSub").removeClass("mui-hidden");
  255. needPartner = true;
  256. } else {
  257. $(".partnerPanelSub").addClass("mui-hidden");
  258. needPartner = false;
  259. }
  260. });
  261. $("body").on("click", ".p-edit", function (event) {
  262. var dom = $(this).closest(".mui-table-view-cell");
  263. var tel = dom.attr("data-id");
  264. for (var i = 0; i < partnerData.length; i++) {
  265. var item = partnerData[i];
  266. if (item.tel == tel) {
  267. editPartner(item.name, item.tel, item.percent, i);
  268. }
  269. }
  270. }).on("click", ".p-delete", function (event) {
  271. var dom = $(this).closest(".mui-table-view-cell");
  272. var btnArray = ['取消', '确认'];
  273. mui.confirm('确定要删除信息?', '温馨提示', btnArray, function (e) {
  274. if (e.index == 0) {
  275. } else {
  276. var tel = dom.attr("data-id");
  277. for (var i = 0; i < partnerData.length; i++) {
  278. var item = partnerData[i];
  279. if (item.tel == tel) {
  280. dom.remove();
  281. partnerData.splice(i, 1);
  282. }
  283. }
  284. setMyPercent();
  285. }
  286. });
  287. });
  288. };
  289. //设置地址
  290. function setArea(value) {
  291. var areaList = window.AREA_LIST || [];
  292. for (var i = 0; i < areaList.length; i++) {
  293. if (areaList[i].value === value) {
  294. $("#area").val(areaList[i].label);
  295. }
  296. }
  297. }
  298. //重新计算我的分成
  299. function setMyPercent() {
  300. var sumPercent = 0;
  301. //展现合伙人信息到页面
  302. for (var i = 0; i < partnerData.length; i++) {
  303. var item = partnerData[i];
  304. sumPercent = sumPercent + parseFloat(item.percent);
  305. }
  306. if (sumPercent > 100) {
  307. return false;
  308. }
  309. $(".my-percent em").text((100 - sumPercent) + "%");
  310. }
  311. var isPopup = false;//弹窗标记
  312. //编辑合伙人
  313. function editPartner(name, tel, percent, editIndex) {
  314. if (editIndex == null && partnerData.length >= 10) {
  315. mui.toast("最多只能添加10个合伙人");
  316. return;
  317. }
  318. if (!isPopup) {
  319. isPopup = true;
  320. $('.partnerDialog').removeClass('mui-hidden');
  321. $("#p-name").val(name);
  322. $("#p-tel").val(tel);
  323. if (tel != '') {
  324. $("#p-tel").attr('disabled', 'disabled');
  325. } else {
  326. $("#p-tel").removeAttr('disabled');
  327. }
  328. $("#p-percent").val(percent);
  329. window.editIndex = editIndex;
  330. }
  331. }
  332. var editIndex = null;
  333. //保存合伙人
  334. $('.partner-oper span').click(function () {
  335. //点击取消
  336. if ($(this).index() == 0) {
  337. } else {
  338. //点击确定
  339. var name = $("#p-name").val();
  340. if (name == "") {
  341. mui.toast("姓名不能为空");
  342. return;
  343. }
  344. var tel = $("#p-tel").val();
  345. if (!isPhone(tel)) {
  346. mui.toast("请输入11位正确手机号码");
  347. return;
  348. }
  349. var percent = parseFloat($("#p-percent").val());
  350. var percentReg = /^(100|(([1-9]\d|\d)(\.\d{1,2})?))$/;
  351. if (!percentReg.test(percent)) {
  352. mui.toast("百分比保持在0-100%");
  353. return;
  354. }
  355. //缓存合伙人数据
  356. if (editIndex != null) {
  357. var editItem = partnerData[editIndex];
  358. var dom = $("[data-id='" + editItem.tel + "']");
  359. var sumP = 0;
  360. for (var index = 0; index < partnerData.length; index++) {
  361. var otherItem = partnerData[index];
  362. if (index != editIndex && otherItem.tel == tel) {
  363. mui.toast("不能和其他合伙人重复手机");
  364. return;
  365. }
  366. if (index != editIndex) {
  367. sumP = sumP + otherItem.percent;
  368. }
  369. }
  370. //校验分成比例
  371. if (percent > (100 - sumP)) {
  372. mui.toast("分成比例最多只能是" + (100 - sumP) + "%");
  373. $("#p-percent").val(100 - sumP);
  374. return;
  375. }
  376. editItem.name = name;
  377. editItem.tel = tel;
  378. editItem.percent = percent;
  379. dom.find(".p-name-show").text(name);
  380. dom.find(".p-tel-show").text(tel);
  381. dom.find(".p-percent-show ").text(percent + "%");
  382. dom.attr("data-id", tel);
  383. } else {
  384. var sumP1 = 0;
  385. for (var i = 0; i < partnerData.length; i++) {
  386. var item = partnerData[i];
  387. if (item.tel == tel) {
  388. mui.toast("不能重复添加相同手机");
  389. return;
  390. }
  391. sumP1 = sumP1 + item.percent;
  392. }
  393. //校验分成比例
  394. if (percent > (100 - sumP1)) {
  395. mui.toast("分成比例最多只能是" + (100 - sumP1) + "%");
  396. $("#p-percent").val(100 - sumP1);
  397. return;
  398. }
  399. partnerData.push({
  400. name: name,
  401. tel: tel,
  402. percent: percent
  403. });
  404. addPartner({name: name, tel: tel, percent: percent});
  405. }
  406. }
  407. $('.partnerDialog').addClass('mui-hidden');
  408. //不能立即赋值,否则会出现不停弹出的情况
  409. setTimeout(function () {
  410. isPopup = false;
  411. }, 500);
  412. setMyPercent();//刷新我的比例
  413. });
  414. function addPartner(option) {
  415. var name = option.name;
  416. var tel = option.tel;
  417. var id = option.id;
  418. var percent = option.percent;
  419. var self = option.self;
  420. var editDisabled = option.editDisabled;
  421. var dom = $('<div class="mui-table-view-cell" >' +
  422. '<p class="font-b-16"> ' +
  423. '<span class="p-name-show"></span><span class="is-self c-success"></span> ' +
  424. '<span class="mui-pull-right font-b-16-8">分成 <em class="p-percent-show c-success"></em></span>' +
  425. '</p>' +
  426. '<p class="p-operation clearfix">' +
  427. '<span class="p-tel-show"></span>' +
  428. '<span class="font-b-16-6 mui-pull-right edit-row" permission="manage-show">' +
  429. '<em class="p-edit"><i class="iconfont icon-edit"></i><span>编辑</span></em>' +
  430. '<em class="p-delete"><i class="iconfont icon-delete"></i><span>删除</span></em>' +
  431. '</span></p></div>');
  432. dom.find(".p-name-show").text(name);
  433. if (self) {
  434. dom.find(".is-self").text(" (我)");
  435. }
  436. dom.find(".p-tel-show").text(tel);
  437. dom.find(".p-percent-show ").text(percent + "%");
  438. dom.attr("data-id", tel);
  439. dom.attr("pId", id);
  440. if (editDisabled) {
  441. dom.find('.edit-row').remove()
  442. }
  443. $(".my-percent").after(dom);
  444. }
  445. //保存地址信息
  446. var saveFlag = false;
  447. function save() {
  448. var name = $("#name").val();
  449. var tag = $("#tag").val();
  450. var districtId = $("#districtId").val();
  451. var country = $("#country").val();
  452. var address = $("#address").val() || $("#address").attr('placeholder');
  453. var addressType = $("#addressType").val();
  454. if (!name) {
  455. mui.toast("请填写分组名称");
  456. return;
  457. }
  458. if (!addressType) {
  459. mui.toast("请填写地址类型");
  460. return;
  461. }
  462. if (!districtId) {
  463. mui.toast("请选择所在地区");
  464. return;
  465. }
  466. if (!country && needCountry) {
  467. mui.toast("请填写正确的乡镇");
  468. return;
  469. }
  470. if (!address) {
  471. mui.toast("请填写详细地址");
  472. return;
  473. }
  474. var isDefault = $(".isDefault").hasClass("mui-active");
  475. var beforeCharge = $(".beforeCharge").hasClass("mui-active");
  476. var popPriceDescriptionButton = $(".popPriceDescriptionButton").hasClass("mui-active");
  477. if (!saveFlag) {
  478. saveFlag = true;
  479. var url = "/device/saveEquipmentGroup";
  480. var data = {
  481. "name": name,
  482. tag: tag,
  483. "districtId": districtId, country: country, "address": address,
  484. "addressType": addressType, "isDefault": isDefault, "beforeCharge": beforeCharge,
  485. "popPriceDescriptionButton": popPriceDescriptionButton,
  486. "groupId": groupId
  487. };
  488. sendRequest(url, "POST", data, function (res) {
  489. if (res.result == 1) {
  490. window.history.replaceState({}, "账号设置", "account-setting.html");
  491. var url = "location-list.html";
  492. goPage(url);
  493. } else {
  494. saveFlag = false;
  495. mui.toast(res.description);
  496. }
  497. }, "json");
  498. }
  499. }
  500. </script>
  501. </body>
  502. </html>