location-add.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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. </style>
  38. </head>
  39. <body>
  40. <div class="mui-content custom-top add-addr" style="padding-bottom: 52px">
  41. <h5 class="mui-content-padded">小提示:不同的投放地址设置一个分组,便于管理设备和用户,<span class="c-red">建立后不可删除</span></h5>
  42. <div class="mui-input-group">
  43. <div class="mui-input-row" permission="manage-edit">
  44. <label>分组名称</label>
  45. <input type="text" id="name" placeholder="请填写" class="mui-text-right">
  46. </div>
  47. <div class="mui-input-row" permission="manage-edit">
  48. <label>地址标签</label>
  49. <input type="text" id="tag" placeholder="可以不填" class="mui-text-right">
  50. </div>
  51. <div class="mui-input-row" permission="manage-edit">
  52. <label>地址类型</label>
  53. <input type="text" id="area" name="option" placeholder="请选择" class="mui-text-right" readonly>
  54. <input type="hidden" id="addressType"/>
  55. </div>
  56. </div>
  57. <div class="mui-input-group custom-top">
  58. <div class="mui-input-row" permission="manage-edit">
  59. <label>省市县</label>
  60. <input type="text" id="location" name="option" placeholder="请选择" class="mui-text-right">
  61. <input type="hidden" id="districtId"/>
  62. </div>
  63. <div class="mui-input-row mui-hidden" id="needCountry" permission="manage-edit">
  64. <label>乡镇/街道</label>
  65. <input type="text" id="country" placeholder="请填写乡镇/街道" class="mui-text-right">
  66. </div>
  67. <div class="mui-input-row" permission="manage-edit">
  68. <label>详细地址</label>
  69. <input type="text" id="address" placeholder="请填写详细地址" class="mui-text-right">
  70. </div>
  71. </div>
  72. <div class="mui-input-group custom-top" permission="manage-show">
  73. <div class="mui-input-row autoheight">
  74. <div class="mui-pull-left">
  75. 设为默认投放地址
  76. <span>每次注册设备时优先使用该地址</span>
  77. </div>
  78. <div class="mui-switch mui-switch-mini mui-active isDefault">
  79. <div class="mui-switch-handle"></div>
  80. </div>
  81. </div>
  82. <div class="mui-input-row autoheight">
  83. <div class="mui-pull-left">
  84. 强制用户充值
  85. <span>如果用户没有余额,需要充值才能使用</span>
  86. </div>
  87. <div class="mui-switch mui-switch-mini beforeCharge">
  88. <div class="mui-switch-handle"></div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="mui-table-view handleBtn mui-text-center">
  94. <button type="button" value="" class="mui-btn mui-btn-blue padding-l-r-20"
  95. onclick="save()">保存
  96. </button>
  97. </div>
  98. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  99. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  100. <script src="https://cdn.washpayer.com/components/lib/mui.picker.min.js"></script>
  101. <script src="/components/custom/js/common.js"></script>
  102. <script src="../components/lib/gcoord.js"></script>
  103. <script type="text/javascript"
  104. src="https://api.map.baidu.com/api?v=2.0&ak=9579bf3cb9fdab9d6b49cdaf72c9907f"></script>
  105. <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  106. <script src="js/xyf.common.js"></script>
  107. <script src="js/xyf.city.three.js"></script>
  108. <script src="js/xyf.picker.js"></script>
  109. <script>
  110. var citySelEntity = CreateCitySelect({});
  111. // 某些厂商必须要填写 乡镇 ,由于目前我们只有3级地区联动,所以需要手动填写;zhenguduo为加盟设备 需求非常特殊;
  112. var needCountry = false;
  113. getFeatureList("dealer", {list: ['needCountry', 'zhenguduo']}, function (payload) {
  114. if (payload.needCountry) {
  115. $('#needCountry').removeClass('mui-hidden')
  116. }
  117. if (payload.zhenguduo) {
  118. getZhengguduoInfo()
  119. }
  120. });
  121. function getZhengguduoInfo() {
  122. sendRequest({
  123. url: "/dealer/homepageData?random=" + Math.random() * 1000,
  124. type: "GET",
  125. data: null,
  126. mask: "加载数据...",
  127. success: function (response) {
  128. if (response.result == 1) {
  129. var payload = response.payload
  130. setDefaultPartner(payload)
  131. } else {
  132. mui.toast(response.description);
  133. }
  134. }
  135. });
  136. }
  137. function setDefaultPartner(payload) {
  138. // 隐藏合伙人开关,因为一定有合伙人
  139. $('.partner').addClass('mui-active').closest('.mui-input-row').addClass('mui-hidden')
  140. $('.partner-mui-collapse').addClass('mui-active')
  141. $(".partnerPanelSub").removeClass("mui-hidden");
  142. needPartner = true;
  143. console.log('发现有默认合伙人')
  144. partnerData.push({
  145. name: '默认加盟商',
  146. tel: payload["defaultJoinerUsername"],
  147. percent: payload["defaultJoinerScale"],
  148. editDisabled: true
  149. })
  150. var partner = partnerData
  151. //展现合伙人信息到页面
  152. for (var i = 0; i < partner.length; i++) {
  153. var item = partner[i];
  154. //转换数据类型
  155. item.percent = parseFloat(item.percent);
  156. addPartner({name:item.name, tel:item.tel, percent:item.percent, editDisabled:item.editDisabled});
  157. }
  158. setMyPercent();
  159. }
  160. if (window.BMap) {
  161. //百度 地图mask等待,因为地图可能加载非常慢
  162. var mask = new Mask("正在获取位置信息...").show();
  163. setTimeout(function () {
  164. mask && mask.remove();//避免超时卡死
  165. }, 15 * 1000);
  166. getLocation(function (res) {
  167. mask && mask.remove();
  168. if (res) {
  169. //转换为百度可用的坐标
  170. var pointList = gcoord.transform(
  171. [res.lng, res.lat],
  172. gcoord.GCJ02, // 当前坐标系
  173. gcoord.BD09 // 目标坐标系
  174. );
  175. var currentPoint = new BMap.Point(pointList[0], pointList[1]);
  176. // 创建地理编码实例
  177. var myGeo = new BMap.Geocoder();
  178. // 根据坐标得到地址描述
  179. myGeo.getLocation(currentPoint, function (result) {
  180. if (result) {
  181. var addComp = result.addressComponents;
  182. var address = addComp.street + addComp.streetNumber;
  183. $("#address").val(address);//详细地址
  184. //如果有地理位置信息,则根据地理位置初始化下拉框【百度地图没有权限一般也能至少获取到city】
  185. citySelEntity.setAddressSelected({addressComponents: addComp});
  186. }
  187. });
  188. var isFirst = true;
  189. //地址搜索建议
  190. var ac = new BMap.Autocomplete({
  191. "input": "address", location: currentPoint, "onSearchComplete": function (result) {
  192. if (isFirst) {
  193. $(".tangram-suggestion-main").hide();
  194. isFirst = false;
  195. }
  196. }
  197. });
  198. //鼠标点击下拉列表后的事件
  199. ac.addEventListener("onconfirm", function (e) {
  200. var _value = e.item.value;
  201. var myValue = _value.street + _value.business;
  202. return myValue;
  203. });
  204. } else {
  205. uplog({level: "error", short_message: "异常:定位失败,地区相关组件未初始化", full_message: r});
  206. }
  207. }, function () {
  208. mask && mask.remove();
  209. });
  210. }
  211. //阻止冒泡
  212. $('.add-addr input[name]').tap(function (e) {
  213. e.preventDefault();
  214. $('.add-addr input').blur();
  215. });
  216. //合伙人数据缓存
  217. var partnerData = [];
  218. var needPartner = false;
  219. $(".partnerColl").tap(function (e) {
  220. $(".partnerColl").focus();
  221. e.preventDefault();
  222. });
  223. //合伙人开关
  224. $(".partner").on("toggle", function (event) {
  225. if (event.detail.isActive) {
  226. $(".partnerPanelSub").removeClass("mui-hidden");
  227. needPartner = true;
  228. } else {
  229. $(".partnerPanelSub").addClass("mui-hidden");
  230. needPartner = false;
  231. }
  232. });
  233. $("body").on("click", ".p-edit", function (event) {
  234. var dom = $(this).closest(".mui-table-view-cell");
  235. var tel = dom.attr("data-id");
  236. for (var i = 0; i < partnerData.length; i++) {
  237. var item = partnerData[i];
  238. if (item.tel == tel) {
  239. editPartner(item.name, item.tel, item.percent, i);
  240. }
  241. }
  242. }).on("click", ".p-delete", function (event) {
  243. var dom = $(this).closest(".mui-table-view-cell");
  244. var btnArray = ['取消', '确认'];
  245. mui.confirm('确定要删除信息?', '温馨提示', btnArray, function (e) {
  246. if (e.index == 0) {
  247. } else {
  248. var tel = dom.attr("data-id");
  249. for (var i = 0; i < partnerData.length; i++) {
  250. var item = partnerData[i];
  251. if (item.tel == tel) {
  252. dom.remove();
  253. partnerData.splice(i, 1);
  254. }
  255. }
  256. setMyPercent();
  257. }
  258. });
  259. });
  260. //重新计算我的分成
  261. function setMyPercent() {
  262. var sumPercent = 0;
  263. //展现合伙人信息到页面
  264. for (var i = 0; i < partnerData.length; i++) {
  265. var item = partnerData[i];
  266. sumPercent = sumPercent + parseFloat(item.percent);
  267. }
  268. if (sumPercent > 100) {
  269. return false;
  270. }
  271. $(".my-percent em").text((100 - sumPercent) + "%");
  272. }
  273. var isPopup = false;//弹窗标记
  274. //编辑合伙人
  275. function editPartner(name, tel, percent, editIndex) {
  276. if (editIndex == null && partnerData.length >= 10) {
  277. mui.toast("最多只能添加10个合伙人");
  278. return;
  279. }
  280. if (!isPopup) {
  281. isPopup = true;
  282. $('.partnerDialog').removeClass('mui-hidden');
  283. $("#p-name").val(name);
  284. $("#p-tel").val(tel);
  285. $("#p-percent").val(percent);
  286. window.editIndex = editIndex;
  287. }
  288. }
  289. //保存合伙人
  290. $('.partner-oper span').click(function () {
  291. //点击取消
  292. if ($(this).index() == 0) {
  293. } else {
  294. //点击确定
  295. var name = $("#p-name").val();
  296. if (name == "") {
  297. mui.toast("姓名不能为空");
  298. return;
  299. }
  300. var tel = $("#p-tel").val();
  301. if (!isPhone(tel)) {
  302. mui.toast("请输入11位正确手机号码");
  303. return;
  304. }
  305. var percent = parseFloat($("#p-percent").val());
  306. var percentReg = /^(100|(([1-9]\d|\d)(\.\d{1,2})?))$/;
  307. if (!percentReg.test(percent)) {
  308. mui.toast("百分比保持在0-100%");
  309. return;
  310. }
  311. //缓存合伙人数据
  312. if (editIndex != null) {
  313. var editItem = partnerData[editIndex];
  314. var dom = $("[data-id='" + editItem.tel + "']");
  315. var sumP = 0;
  316. for (var index = 0; index < partnerData.length; index++) {
  317. var otherItem = partnerData[index];
  318. if (index != editIndex && otherItem.tel == tel) {
  319. mui.toast("不能和其他合伙人重复手机");
  320. return;
  321. }
  322. if (index != editIndex) {
  323. sumP = sumP + otherItem.percent;
  324. }
  325. }
  326. //校验分成比例
  327. if (percent > (100 - sumP)) {
  328. mui.toast("分成比例最多只能是" + (100 - sumP) + "%");
  329. $("#p-percent").val(100 - sumP);
  330. return;
  331. }
  332. editItem.name = name;
  333. editItem.tel = tel;
  334. editItem.percent = percent;
  335. dom.find(".p-name-show").text(name);
  336. dom.find(".p-tel-show").text(tel);
  337. dom.find(".p-percent-show ").text(percent + "%");
  338. dom.attr("data-id", tel);
  339. } else {
  340. var sumP1 = 0;
  341. for (var i = 0; i < partnerData.length; i++) {
  342. var item = partnerData[i];
  343. if (item.tel == tel) {
  344. mui.toast("不能重复添加相同手机");
  345. return;
  346. }
  347. sumP1 = sumP1 + item.percent;
  348. }
  349. //校验分成比例
  350. if (percent > (100 - sumP1)) {
  351. mui.toast("分成比例最多只能是" + (100 - sumP1) + "%");
  352. $("#p-percent").val(100 - sumP1);
  353. return;
  354. }
  355. partnerData.push({
  356. name: name,
  357. tel: tel,
  358. percent: percent
  359. });
  360. addPartner({name: name, tel: tel, percent: percent});
  361. }
  362. }
  363. $('.partnerDialog').addClass('mui-hidden');
  364. //不能立即赋值,否则会出现不停弹出的情况
  365. setTimeout(function () {
  366. isPopup = false;
  367. }, 500);
  368. setMyPercent();//刷新我的比例
  369. });
  370. function addPartner(option) {
  371. var name = option.name;
  372. var tel = option.tel;
  373. var percent = option.percent;
  374. var editDisabled = option.editDisabled;
  375. var dom = $('<div class="mui-table-view-cell">' +
  376. '<p class="font-b-16">' +
  377. '<span class="p-name-show"></span> ' +
  378. '<span class="mui-pull-right font-b-16-8">分成 <em class="p-percent-show c-success"></em></span>' +
  379. '</p>' +
  380. '<p class="p-operation clearfix">' +
  381. '<span class="p-tel-show"></span>' +
  382. '<span data-id="" class="font-b-16-6 mui-pull-right edit-row" permission="manage-show">' +
  383. '<em class="p-edit"><i class="iconfont icon-edit"></i>编辑</em>' +
  384. '<em class="p-delete"><i class="iconfont icon-delete"></i>删除</em>' +
  385. '</span></p></div>');
  386. dom.find(".p-name-show").text(name);
  387. dom.find(".p-tel-show").text(tel);
  388. dom.find(".p-percent-show ").text(percent + "%");
  389. dom.attr("data-id", tel);
  390. if (editDisabled) {
  391. dom.find('.edit-row').remove()
  392. }
  393. $(".my-percent").after(dom);
  394. }
  395. var saveFlag = false;
  396. function save() {
  397. var name = $("#name").val();
  398. var tag = $("#tag").val();
  399. var districtId = $("#districtId").val();
  400. var country = $("#country").val();
  401. var address = $("#address").val();
  402. var addressType = $("#addressType").val();
  403. if (!name) {
  404. mui.toast("请填写分组名称");
  405. return;
  406. }
  407. if (!addressType) {
  408. mui.toast("请填写地址类型");
  409. return;
  410. }
  411. if (!districtId) {
  412. mui.toast("请选择所在地区");
  413. return;
  414. }
  415. if (!country && needCountry) {
  416. mui.toast("请填写正确的乡镇");
  417. return;
  418. }
  419. if (!address) {
  420. mui.toast("请填写详细地址");
  421. return;
  422. }
  423. var isDefault = $(".isDefault").hasClass("mui-active");
  424. var beforeCharge = $(".beforeCharge").hasClass("mui-active");
  425. if (!saveFlag) {
  426. saveFlag = true;
  427. var url = "/device/saveEquipmentGroup";
  428. var data = {
  429. "name": name,
  430. tag: tag,
  431. "districtId": districtId, country: country, "address": address,
  432. "addressType": addressType, "isDefault": isDefault, "beforeCharge": beforeCharge,
  433. };
  434. if ($(".partner").hasClass("mui-active")) {
  435. if (needPartner && partnerData.length > 0) {
  436. data.partner = partnerData;
  437. }
  438. } else {
  439. data.partner = null;
  440. }
  441. sendRequest(url, "POST", data, function (res) {
  442. if (res.result == 1) {
  443. var btnArray = ['关闭', '返回上一页'];
  444. mui.confirm('添加地址成功', '温馨提示', btnArray, function (e) {
  445. if (e.index === 0) {
  446. } else if (e.index === 1) {
  447. history.back();
  448. }
  449. });
  450. } else {
  451. saveFlag = false;
  452. mui.toast(res.description);
  453. }
  454. }, "json");
  455. }
  456. }
  457. </script>
  458. </body>
  459. </html>