123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta name="author" content="">
- <meta name="description" content=""/>
- <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
- <meta name="format-detection" content="telephone=no,email=no">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
- <title>远程上分</title>
- <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
- <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>
- <link rel="stylesheet" href="../components/lib/weui.min.css">
- <link rel="stylesheet" href="../components/custom/css/common.css">
- <link rel="stylesheet" href="css/xyf.common.min.css">
- <style>
- .selectDev {
- position: absolute;
- z-index: 1;
- width: 40px !important;
- right: 0;
- border: 1px solid #c8c7cc;
- background: #ececec;
- }
- .selectDev:after {
- right: 7px;
- }
- #goSearch {
- width: 40px;
- position: absolute;
- right: 40px;
- height: 100%;
- line-height: 44px;
- text-align: center;
- }
- .attach-param {
- background: #f4f4f5;
- }
- .mui-numbox {
- width: 180px;
- }
- #packagePanel .mui-table-view-cell{
- padding-left: 45px;
- }
- #packagePanel input[type=radio]{
- left: 12px;
- top: 6px;
- }
- </style>
- </head>
- <body>
- <div class="mui-input-group remote">
- <div class="mui-input-row">
- <label>上分设备</label>
- <input type="search" id="logicalCode" placeholder="设备编号" class="">
- <div id="goSearch" class="mui-icon mui-icon-search"></div>
- <p class="mui-navigate-right selectDev font-b-16-6" id="deviceID"></p>
- </div>
- </div>
- <ul class="mui-table-view ">
- <li class="mui-table-view-cell" id="devInfo">
- <p class="font-b-6">暂无设备信息</p>
- </li>
- </ul>
- <div class="padding-l-r-10 padding-t-10 " id="upperTab">
- <div class="mui-segmented-control">
- <a class="mui-control-item" href="#packageUpper" upperType="packageUpper">常规上分</a>
- <a class="mui-control-item mui-hidden" href="#packageBatchUpper" upperType="packageBatchUpper">批量上分</a>
- <a class="mui-control-item mui-hidden" href="#cardUpper" upperType="chargeCard">远程充卡</a>
- </div>
- </div>
- <!-- 常规上分 -->
- <div id="packageUpper" class="mui-control-content">
- <div class="mui-input-group margin-t-10 mui-hidden attach-param" id="attachParam">
- </div>
- <!-- 套餐容器 -->
- <form class="mui-input-group custom-top mui-hidden mui-radio" id="packagePanel">
- </form>
- </div>
- <!-- 批量上分 -->
- <div id="packageBatchUpper" class="mui-control-content">
- </div>
- <!-- 远程充卡 -->
- <div id="cardUpper" class="mui-control-content mui-input-group custom-top remote">
- <div class="mui-input-row autoheight">
- <label>充卡金额</label>
- <div class="">
- <div class="mui-numbox" data-numbox-min='1' data-numbox-max='1000' data-numbox-step='10'>
- <button class="mui-btn mui-btn-numbox-minus" type="button">−</button>
- <input class="mui-input-numbox" id="coins" type="tel" value="10" inputmode="tel"/>
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <p class="remote-range">数值范围 1~1000</p>
- </div>
- </div>
- </div>
- <div class="custom-subt">
- <a id="submitBtn" class="custom-btn custom-btn-primary" href="javascript:;">确定</a>
- </div>
- <div class="custom-subt mui-text-center">
- <a class="c-primary" href="remote-upper-record.html">
- 远程上分记录<i class="mui-icon mui-icon-arrowright"></i>
- </a>
- </div>
- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
- <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
- <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
- <script src="../components/lib/weui.min.js"></script>
- <script src="/components/custom/js/common.js"></script>
- <script src="js/xyf.common.js"></script>
- <script>
- var nowUpperType = "";
- $(function () {
- // 从链接中获取参数
- var logicalCode = "",//逻辑编码
- deviceIDDom = $("#deviceID");
- // 也可能是其他页面直接过来
- var logicalCodeQ = getQueryString("logicalCode");
- if (logicalCodeQ) {
- logicalCode = logicalCodeQ
- }
- function commonSuccess(res) {
- console.log(res)
- if (res.result == 1) {
- if (res && res.payload && res.payload.errorList && res.payload.errorList.length) {
- var errList = res.payload.errorList
- mui.alert('批量上分完成,' + (errList.length ? '<span class="c-red">部分端口失败:</span>' : '全部成功') + errList.join(','), '上分完成', '我知道了');
- } else {
- mui.toast('上分成功');
- }
- } else {
- mui.toast(res.description);
- }
- }
- //上分
- var onPoints = function () {
- var coins = $("#coins").val();
- var ruleId = $('[name="onPoint"]:checked ').val();
- var logicalCode = $("#logicalCode").val();
- var data = {};
- if (!logicalCode) {
- mui.toast('请选择上分设备');
- return;
- } else {
- data.logicalCode = logicalCode
- }
- if (logicalCode.indexOf("B") === 0) {
- mui.alert('蓝牙设备不能远程上分!');
- return;
- }
- var newAttachParas = $.extend(true, {}, attachParas);
- var url = "/dealer/onPoints";
- // 如果是充卡操作,则需要金额参数
- if (nowUpperType == "chargeCard") {
- data.coins = coins;
- data.type = nowUpperType;// 类型定为充卡
- oPointsRequest(url, data, commonSuccess);
- } else if (nowUpperType == "packageUpper" || nowUpperType == "packageBatchUpper") {
- // 有端口的设备必须选择端口
- if (!$.isEmptyObject(devData.chargeIndex) && $.isEmptyObject(newAttachParas.chargeIndex)) {
- mui.alert('请选择端口');
- return;
- }
- if (ruleId == null) {
- if (ruleList.length === 0) {
- // 如门禁系统
- console.log('设备没有套餐,无需选择')
- } else {
- mui.alert('请选择套餐进行上分');
- return;
- }
- } else {
- //组装套餐id和附加参数
- data.ruleId = ruleId;
- }
- // 自定义套餐,接口用onCustomizePoint。支持批量端口,无需特殊处理。
- if (ruleId === 'custom') {
- url = "/dealer/onCustomizePoint";
- data.time = $('#onPointTime').val();
- data.unit = $('#unitPicker').val();
- if(!data.time) {
- mui.alert('请输入自定义的上分数');
- return;
- }
- if(!data.unit) {
- mui.alert('请选择自定义的上单位');
- return;
- }
- data.attachParas = JSON.stringify(newAttachParas);
- oPointsRequest(url, data, commonSuccess);
- } else {
- if (newAttachParas.chargeIndex instanceof Array) {
- batchOnPoints(url, data);
- } else {
- // 单个上分
- data.attachParas = JSON.stringify(newAttachParas);
- oPointsRequest(url, data, commonSuccess);
- }
- }
- }
- };
- function batchOnPoints(url, data) {
- var newAttachParas = $.extend(true, {}, attachParas);
- var chargeIndexList = newAttachParas.chargeIndex;
- var length = chargeIndexList.length;
- var nowIndex = 0;
- let errList = [];
- function next() {
- if (nowIndex >= length) {
- mui.alert('批量上分完成,' + (errList.length ? '<span class="c-red">部分端口失败:</span>' : '全部成功') + errList.join(','), '上分完成', '我知道了');
- return
- }
- let port = chargeIndexList[nowIndex]
- newAttachParas.chargeIndex = port;
- data.attachParas = JSON.stringify(newAttachParas);
- sendRequest({
- url: url,
- type: "POST",
- data: data,
- success: function (res) {
- if (res.result != 1) {
- errList.push(port)
- }
- },
- error: function () {
- errList.push(port)
- },
- complete: function () {
- nowIndex++;
- next();
- }
- });
- }
- next();
- }
- function oPointsRequest(url, data, success) {
- sendRequest({
- url: url,
- type: "POST",
- data: data,
- success: success
- });
- }
- /**
- * 初始化
- */
- var init = function () {
- if (logicalCode.length !== 0) {
- $("#logicalCode").val(logicalCode);
- if (logicalCode) {
- //加载套餐
- getPackages(logicalCode);
- }
- }
- };
- init();
- //跳转到设备选择界面
- deviceIDDom.tap(function () {
- sendRequest("/dealer/getEquipmentTotal", "GET", {}, function (res) {
- if (res.result == 1) {
- var total = res.para;
- if (total === 0) {
- mui.confirm("您还未上线任何设备", "", ["添加设备", "取消"], function (obj) {
- var index = obj.index;
- if (index == 0) {
- scanQRCodeToReg();
- }
- });
- } else {
- var url = "remote-upper-devicefilter.html";
- goPage(url);
- }
- }
- });
- });
- $("#submitBtn").tap(function () {
- onPoints();
- });
- });
- function initTabCard(code) {
- var tabIndex = 0;
- //如果设备是100209中创,则展示tab页,可以远程充卡、套餐上分
- if (code == 100209) {
- //显示选项卡
- $("#upperTab [upperType=chargeCard]").removeClass("mui-hidden");
- }
- //激活上一次操作的tab
- tabIndex = getSessionStorage("upper-tab-index") || 0;
- $(".mui-control-item").eq(tabIndex).addClass("mui-active");
- $(".mui-control-content").eq(tabIndex).addClass("mui-active");
- nowUpperType = $(".mui-control-item").eq(tabIndex).attr("upperType");
- //tab操作记录cookie
- mui('.mui-segmented-control').on('tap', '.mui-control-item', function (e) {
- nowUpperType = $(this).attr("upperType");
- setSessionStorage("upper-tab-index", $(this).index(), 1000 * 3600 * 24);
- location.reload();
- });
- // 放到正确的容器
- if (nowUpperType === 'packageUpper') {
- $('#packageUpper').append($('#attachParam,#packagePanel'))
- } else {
- $('#packageBatchUpper').append($('#attachParam,#packagePanel'))
- }
- }
- //关键字搜索
- document.onkeydown = function (ev) {
- if (ev.keyCode == 13) {
- ev.preventDefault();
- getPackages($("#logicalCode").val());
- }
- };
- $('#goSearch').on('click', function () {
- getPackages($("#logicalCode").val());
- })
- var attachParas = {}; //加载附加参数
- var devData;// 设备信息
- var ruleList = []
- function getPackages(logicalCode) {
- if(!logicalCode) {
- mui.toast('请输入设备编号');
- return
- }
- //初始化加载各个类型设备的套餐
- var url = "/dealer/getPackages";
- var data = {"logicalCode": logicalCode, "isRemoteUpper": true};
- sendRequest(url, "GET", data, function (res) {
- if (res.result == 1) {
- devData = res.payload.devData;
- initTabCard(devData.typeCode);
- //chargeIndex,则展示附加参数
- if (!$.isEmptyObject(devData.chargeIndex)) {
- $("#upperTab [upperType=packageBatchUpper]").removeClass("mui-hidden");
- $("#attachParam").removeClass("mui-hidden");
- attachParas = PackageSelectComponent({
- devTypeInfo: {code: devData.typeCode, chargeIndex: devData.chargeIndex},
- multiple: nowUpperType === 'packageBatchUpper',
- el: "#attachParam",
- }).attachParas;
- }
- $("#devInfo").html('<a href="javascript:void(0);">' +
- '<div>' + "<i class='c-primary iconfont " + getDevIconName(devData.type) + "'></i> " + devData.type + '-' + logicalCode + '</div>' +
- '<p class="mui-ellipsis">地址:' + devData.groupName + '</p></a>');
- var html = "";
- ruleList = res.payload.ruleList || []
- ruleList.sort(function (objA, objB) {
- return objA.coins - objB.coins;
- });
- $.each(ruleList, function (i, obj) {
- var timeText = (obj.time ? obj.time + (obj.unit || "分钟") : "");
- if (obj.name == "充满自停" && devData.typeCode == 100207) {
- timeText = ""
- }
- html += '<div class="mui-table-view-cell">' +
- '<label for="onPoint' + obj.id + '">'+
- '<input name="onPoint" type="radio" value="' + obj.id + '" id="onPoint' + obj.id + '"> <span class="noClick">' +
- (obj.coins || 0) + '币 <span class="">' + (obj.price || 0) + '元</span> ' + obj.name +
- " " + timeText +
- '</span></label></div>';
- });
- $("#packagePanel").html(html).removeClass("mui-hidden");
- sendRequest('/dealer/getCustomizePoint', "GET", data, function (res) {
- var payload = res.payload
- if (payload && payload.length) {
- $("#packagePanel").append(
- '<div class="mui-table-view-cell padding-t-b-5 flexbox">' +
- ' <input id="onPointLastRadio" name="onPoint" type="radio" value="custom"/>' +
- ' <input id="onPointTime" type="text" placeholder="自定义输入上分数量" class="font-14 padding-l-0" onclick="onCustomClick()"/>' +
- ' <input id="unitPicker" readonly placeholder="单位" class="font-14 pull-right c-blue" style="width: 36px" onclick="onUnitClick(event)">' +
- '</div>'
- );
- if (typeof payload === 'string') {
- unitList = [payload];
- } else{
- unitList = payload;
- }
- for (var index = 0; index < unitList.length; index++) {
- unitList[index] = {
- label: unitList[index],
- value: unitList[index],
- }
- }
- $('#unitPicker').val(unitList[0].value);//默认使用第一个单位
- }
- });
- }
- });
- }
- var unitList = [];
- function onCustomClick() {
- $('#onPointLastRadio')[0].checked = true
- }
- function onUnitClick(event) {
- event && event.stopPropagation();
- event && event.preventDefault();
- weui.picker(unitList, {
- id: 'unitPicker',
- defaultValue: [unitList[0]],
- onConfirm: function (result) {
- $('#unitPicker').val(result[0].value);
- },
- })
- }
- </script>
- </body>
- </html>
|