remote-upper.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
  6. <meta http-equiv="pragma" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta name="author" content="">
  9. <meta name="description" content=""/>
  10. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  11. <meta name="format-detection" content="telephone=no,email=no">
  12. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  13. <title>远程上分</title>
  14. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
  15. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>
  16. <link rel="stylesheet" href="../components/lib/weui.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. .selectDev {
  21. position: absolute;
  22. z-index: 1;
  23. width: 40px !important;
  24. right: 0;
  25. border: 1px solid #c8c7cc;
  26. background: #ececec;
  27. }
  28. .selectDev:after {
  29. right: 7px;
  30. }
  31. #goSearch {
  32. width: 40px;
  33. position: absolute;
  34. right: 40px;
  35. height: 100%;
  36. line-height: 44px;
  37. text-align: center;
  38. }
  39. .attach-param {
  40. background: #f4f4f5;
  41. }
  42. .mui-numbox {
  43. width: 180px;
  44. }
  45. #packagePanel .mui-table-view-cell{
  46. padding-left: 45px;
  47. }
  48. #packagePanel input[type=radio]{
  49. left: 12px;
  50. top: 6px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="mui-input-group remote">
  56. <div class="mui-input-row">
  57. <label>上分设备</label>
  58. <input type="search" id="logicalCode" placeholder="设备编号" class="">
  59. <div id="goSearch" class="mui-icon mui-icon-search"></div>
  60. <p class="mui-navigate-right selectDev font-b-16-6" id="deviceID"></p>
  61. </div>
  62. </div>
  63. <ul class="mui-table-view ">
  64. <li class="mui-table-view-cell" id="devInfo">
  65. <p class="font-b-6">暂无设备信息</p>
  66. </li>
  67. </ul>
  68. <div class="padding-l-r-10 padding-t-10 " id="upperTab">
  69. <div class="mui-segmented-control">
  70. <a class="mui-control-item" href="#packageUpper" upperType="packageUpper">常规上分</a>
  71. <a class="mui-control-item mui-hidden" href="#packageBatchUpper" upperType="packageBatchUpper">批量上分</a>
  72. <a class="mui-control-item mui-hidden" href="#cardUpper" upperType="chargeCard">远程充卡</a>
  73. </div>
  74. </div>
  75. <!-- 常规上分 -->
  76. <div id="packageUpper" class="mui-control-content">
  77. <div class="mui-input-group margin-t-10 mui-hidden attach-param" id="attachParam">
  78. </div>
  79. <!-- 套餐容器 -->
  80. <form class="mui-input-group custom-top mui-hidden mui-radio" id="packagePanel">
  81. </form>
  82. </div>
  83. <!-- 批量上分 -->
  84. <div id="packageBatchUpper" class="mui-control-content">
  85. </div>
  86. <!-- 远程充卡 -->
  87. <div id="cardUpper" class="mui-control-content mui-input-group custom-top remote">
  88. <div class="mui-input-row autoheight">
  89. <label>充卡金额</label>
  90. <div class="">
  91. <div class="mui-numbox" data-numbox-min='1' data-numbox-max='1000' data-numbox-step='10'>
  92. <button class="mui-btn mui-btn-numbox-minus" type="button">&minus;</button>
  93. <input class="mui-input-numbox" id="coins" type="tel" value="10" inputmode="tel"/>
  94. <button class="mui-btn mui-btn-numbox-plus" type="button">&plus;</button>
  95. </div>
  96. <p class="remote-range">数值范围&nbsp;1~1000</p>
  97. </div>
  98. </div>
  99. </div>
  100. <div class="custom-subt">
  101. <a id="submitBtn" class="custom-btn custom-btn-primary" href="javascript:;">确定</a>
  102. </div>
  103. <div class="custom-subt mui-text-center">
  104. <a class="c-primary" href="remote-upper-record.html">
  105. 远程上分记录<i class="mui-icon mui-icon-arrowright"></i>
  106. </a>
  107. </div>
  108. <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  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="../components/lib/weui.min.js"></script>
  112. <script src="/components/custom/js/common.js"></script>
  113. <script src="js/xyf.common.js"></script>
  114. <script>
  115. var nowUpperType = "";
  116. $(function () {
  117. // 从链接中获取参数
  118. var logicalCode = "",//逻辑编码
  119. deviceIDDom = $("#deviceID");
  120. // 也可能是其他页面直接过来
  121. var logicalCodeQ = getQueryString("logicalCode");
  122. if (logicalCodeQ) {
  123. logicalCode = logicalCodeQ
  124. }
  125. function commonSuccess(res) {
  126. console.log(res)
  127. if (res.result == 1) {
  128. if (res && res.payload && res.payload.errorList && res.payload.errorList.length) {
  129. var errList = res.payload.errorList
  130. mui.alert('批量上分完成,' + (errList.length ? '<span class="c-red">部分端口失败:</span>' : '全部成功') + errList.join(','), '上分完成', '我知道了');
  131. } else {
  132. mui.toast('上分成功');
  133. }
  134. } else {
  135. mui.toast(res.description);
  136. }
  137. }
  138. //上分
  139. var onPoints = function () {
  140. var coins = $("#coins").val();
  141. var ruleId = $('[name="onPoint"]:checked ').val();
  142. var logicalCode = $("#logicalCode").val();
  143. var data = {};
  144. if (!logicalCode) {
  145. mui.toast('请选择上分设备');
  146. return;
  147. } else {
  148. data.logicalCode = logicalCode
  149. }
  150. if (logicalCode.indexOf("B") === 0) {
  151. mui.alert('蓝牙设备不能远程上分!');
  152. return;
  153. }
  154. var newAttachParas = $.extend(true, {}, attachParas);
  155. var url = "/dealer/onPoints";
  156. // 如果是充卡操作,则需要金额参数
  157. if (nowUpperType == "chargeCard") {
  158. data.coins = coins;
  159. data.type = nowUpperType;// 类型定为充卡
  160. oPointsRequest(url, data, commonSuccess);
  161. } else if (nowUpperType == "packageUpper" || nowUpperType == "packageBatchUpper") {
  162. // 有端口的设备必须选择端口
  163. if (!$.isEmptyObject(devData.chargeIndex) && $.isEmptyObject(newAttachParas.chargeIndex)) {
  164. mui.alert('请选择端口');
  165. return;
  166. }
  167. if (ruleId == null) {
  168. if (ruleList.length === 0) {
  169. // 如门禁系统
  170. console.log('设备没有套餐,无需选择')
  171. } else {
  172. mui.alert('请选择套餐进行上分');
  173. return;
  174. }
  175. } else {
  176. //组装套餐id和附加参数
  177. data.ruleId = ruleId;
  178. }
  179. // 自定义套餐,接口用onCustomizePoint。支持批量端口,无需特殊处理。
  180. if (ruleId === 'custom') {
  181. url = "/dealer/onCustomizePoint";
  182. data.time = $('#onPointTime').val();
  183. data.unit = $('#unitPicker').val();
  184. if(!data.time) {
  185. mui.alert('请输入自定义的上分数');
  186. return;
  187. }
  188. if(!data.unit) {
  189. mui.alert('请选择自定义的上单位');
  190. return;
  191. }
  192. data.attachParas = JSON.stringify(newAttachParas);
  193. oPointsRequest(url, data, commonSuccess);
  194. } else {
  195. if (newAttachParas.chargeIndex instanceof Array) {
  196. batchOnPoints(url, data);
  197. } else {
  198. // 单个上分
  199. data.attachParas = JSON.stringify(newAttachParas);
  200. oPointsRequest(url, data, commonSuccess);
  201. }
  202. }
  203. }
  204. };
  205. function batchOnPoints(url, data) {
  206. var newAttachParas = $.extend(true, {}, attachParas);
  207. var chargeIndexList = newAttachParas.chargeIndex;
  208. var length = chargeIndexList.length;
  209. var nowIndex = 0;
  210. let errList = [];
  211. function next() {
  212. if (nowIndex >= length) {
  213. mui.alert('批量上分完成,' + (errList.length ? '<span class="c-red">部分端口失败:</span>' : '全部成功') + errList.join(','), '上分完成', '我知道了');
  214. return
  215. }
  216. let port = chargeIndexList[nowIndex]
  217. newAttachParas.chargeIndex = port;
  218. data.attachParas = JSON.stringify(newAttachParas);
  219. sendRequest({
  220. url: url,
  221. type: "POST",
  222. data: data,
  223. success: function (res) {
  224. if (res.result != 1) {
  225. errList.push(port)
  226. }
  227. },
  228. error: function () {
  229. errList.push(port)
  230. },
  231. complete: function () {
  232. nowIndex++;
  233. next();
  234. }
  235. });
  236. }
  237. next();
  238. }
  239. function oPointsRequest(url, data, success) {
  240. sendRequest({
  241. url: url,
  242. type: "POST",
  243. data: data,
  244. success: success
  245. });
  246. }
  247. /**
  248. * 初始化
  249. */
  250. var init = function () {
  251. if (logicalCode.length !== 0) {
  252. $("#logicalCode").val(logicalCode);
  253. if (logicalCode) {
  254. //加载套餐
  255. getPackages(logicalCode);
  256. }
  257. }
  258. };
  259. init();
  260. //跳转到设备选择界面
  261. deviceIDDom.tap(function () {
  262. sendRequest("/dealer/getEquipmentTotal", "GET", {}, function (res) {
  263. if (res.result == 1) {
  264. var total = res.para;
  265. if (total === 0) {
  266. mui.confirm("您还未上线任何设备", "", ["添加设备", "取消"], function (obj) {
  267. var index = obj.index;
  268. if (index == 0) {
  269. scanQRCodeToReg();
  270. }
  271. });
  272. } else {
  273. var url = "remote-upper-devicefilter.html";
  274. goPage(url);
  275. }
  276. }
  277. });
  278. });
  279. $("#submitBtn").tap(function () {
  280. onPoints();
  281. });
  282. });
  283. function initTabCard(code) {
  284. var tabIndex = 0;
  285. //如果设备是100209中创,则展示tab页,可以远程充卡、套餐上分
  286. if (code == 100209) {
  287. //显示选项卡
  288. $("#upperTab [upperType=chargeCard]").removeClass("mui-hidden");
  289. }
  290. //激活上一次操作的tab
  291. tabIndex = getSessionStorage("upper-tab-index") || 0;
  292. $(".mui-control-item").eq(tabIndex).addClass("mui-active");
  293. $(".mui-control-content").eq(tabIndex).addClass("mui-active");
  294. nowUpperType = $(".mui-control-item").eq(tabIndex).attr("upperType");
  295. //tab操作记录cookie
  296. mui('.mui-segmented-control').on('tap', '.mui-control-item', function (e) {
  297. nowUpperType = $(this).attr("upperType");
  298. setSessionStorage("upper-tab-index", $(this).index(), 1000 * 3600 * 24);
  299. location.reload();
  300. });
  301. // 放到正确的容器
  302. if (nowUpperType === 'packageUpper') {
  303. $('#packageUpper').append($('#attachParam,#packagePanel'))
  304. } else {
  305. $('#packageBatchUpper').append($('#attachParam,#packagePanel'))
  306. }
  307. }
  308. //关键字搜索
  309. document.onkeydown = function (ev) {
  310. if (ev.keyCode == 13) {
  311. ev.preventDefault();
  312. getPackages($("#logicalCode").val());
  313. }
  314. };
  315. $('#goSearch').on('click', function () {
  316. getPackages($("#logicalCode").val());
  317. })
  318. var attachParas = {}; //加载附加参数
  319. var devData;// 设备信息
  320. var ruleList = []
  321. function getPackages(logicalCode) {
  322. if(!logicalCode) {
  323. mui.toast('请输入设备编号');
  324. return
  325. }
  326. //初始化加载各个类型设备的套餐
  327. var url = "/dealer/getPackages";
  328. var data = {"logicalCode": logicalCode, "isRemoteUpper": true};
  329. sendRequest(url, "GET", data, function (res) {
  330. if (res.result == 1) {
  331. devData = res.payload.devData;
  332. initTabCard(devData.typeCode);
  333. //chargeIndex,则展示附加参数
  334. if (!$.isEmptyObject(devData.chargeIndex)) {
  335. $("#upperTab [upperType=packageBatchUpper]").removeClass("mui-hidden");
  336. $("#attachParam").removeClass("mui-hidden");
  337. attachParas = PackageSelectComponent({
  338. devTypeInfo: {code: devData.typeCode, chargeIndex: devData.chargeIndex},
  339. multiple: nowUpperType === 'packageBatchUpper',
  340. el: "#attachParam",
  341. }).attachParas;
  342. }
  343. $("#devInfo").html('<a href="javascript:void(0);">' +
  344. '<div>' + "<i class='c-primary iconfont " + getDevIconName(devData.type) + "'></i> " + devData.type + '-' + logicalCode + '</div>' +
  345. '<p class="mui-ellipsis">地址:' + devData.groupName + '</p></a>');
  346. var html = "";
  347. ruleList = res.payload.ruleList || []
  348. ruleList.sort(function (objA, objB) {
  349. return objA.coins - objB.coins;
  350. });
  351. $.each(ruleList, function (i, obj) {
  352. var timeText = (obj.time ? obj.time + (obj.unit || "分钟") : "");
  353. if (obj.name == "充满自停" && devData.typeCode == 100207) {
  354. timeText = ""
  355. }
  356. html += '<div class="mui-table-view-cell">' +
  357. '<label for="onPoint' + obj.id + '">'+
  358. '<input name="onPoint" type="radio" value="' + obj.id + '" id="onPoint' + obj.id + '"> <span class="noClick">' +
  359. (obj.coins || 0) + '币 <span class="">' + (obj.price || 0) + '元</span> ' + obj.name +
  360. " " + timeText +
  361. '</span></label></div>';
  362. });
  363. $("#packagePanel").html(html).removeClass("mui-hidden");
  364. sendRequest('/dealer/getCustomizePoint', "GET", data, function (res) {
  365. var payload = res.payload
  366. if (payload && payload.length) {
  367. $("#packagePanel").append(
  368. '<div class="mui-table-view-cell padding-t-b-5 flexbox">' +
  369. ' <input id="onPointLastRadio" name="onPoint" type="radio" value="custom"/>' +
  370. ' <input id="onPointTime" type="text" placeholder="自定义输入上分数量" class="font-14 padding-l-0" onclick="onCustomClick()"/>' +
  371. ' <input id="unitPicker" readonly placeholder="单位" class="font-14 pull-right c-blue" style="width: 36px" onclick="onUnitClick(event)">' +
  372. '</div>'
  373. );
  374. if (typeof payload === 'string') {
  375. unitList = [payload];
  376. } else{
  377. unitList = payload;
  378. }
  379. for (var index = 0; index < unitList.length; index++) {
  380. unitList[index] = {
  381. label: unitList[index],
  382. value: unitList[index],
  383. }
  384. }
  385. $('#unitPicker').val(unitList[0].value);//默认使用第一个单位
  386. }
  387. });
  388. }
  389. });
  390. }
  391. var unitList = [];
  392. function onCustomClick() {
  393. $('#onPointLastRadio')[0].checked = true
  394. }
  395. function onUnitClick(event) {
  396. event && event.stopPropagation();
  397. event && event.preventDefault();
  398. weui.picker(unitList, {
  399. id: 'unitPicker',
  400. defaultValue: [unitList[0]],
  401. onConfirm: function (result) {
  402. $('#unitPicker').val(result[0].value);
  403. },
  404. })
  405. }
  406. </script>
  407. </body>
  408. </html>