perfectInfo.html 11.1 KB
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>完善设备信息_frm</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/utils/addDevice.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html,
        body{
          background-color: #F4F6F9;
        }
    </style>
</head>

<body>

  <div class="device-title">
    <div style="margin-left:15px;margin-right:15.5px;">
      <div class="aui-row aui-row-flex top-14">
        <div class="aui-col aui-col-span-1" style="margin-top: 1rem;">
          <div class="title-sign"></div>
        </div>
        <div class="aui-col aui-col-span-23">
          <span class="device-name" id="device_imei">设备编号:000000000000000</span>
        </div>
      </div>
    </div>
  </div>
  <div class="info-panel">
    <div class="info-inside-panel">
      <div class="aui-row aui-row-flex padding-top-21">
        <div class="aui-col aui-col-span-9 aui-row-flex-start">
          <span class="measure-obj">设备名称</span>
        </div>
        <div class="aui-col aui-col-span-15 aui-row-flex-end">
          <input id="device_name" class="aui-input" placeholder="设备名不可超过12个字符" type="text" maxlength="12" style="height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
        </div>
      </div>
      <div class="panel-line margin-top-21"></div>
      <div class="check-hide aui-hide" id="input1">
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-9 aui-row-flex-start">
            <span class="measure-obj">输入设备密码</span>
          </div>
          <div class="aui-col aui-col-span-15 aui-row-flex-end">
            <input id="normal_pwd" class="aui-input" placeholder="请输入6位数字设备密码" type="tel" maxlength="6" style="-webkit-text-security:disc;height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
      </div>
      <div class="check-hide aui-hide" id="input2">
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-9 aui-row-flex-start">
            <span class="measure-obj">设置设备密码</span>
          </div>
          <div class="aui-col aui-col-span-15 aui-row-flex-end">
            <input id="device_pwd" class="aui-input" placeholder="请设置6位数字设备密码" type="tel" maxlength="6"  style="-webkit-text-security:disc;height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
      </div>
      <div class="check-hide aui-hide" id="input3">
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-9 aui-row-flex-start">
            <span class="measure-obj">确认设备密码</span>
          </div>
          <div class="aui-col aui-col-span-15 aui-row-flex-end">
            <input id="pwd_check" class="aui-input" placeholder="请再次确认设备密码" type="tel" maxlength="6" style="-webkit-text-security:disc;height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
      </div>
      <div class="aui-row aui-row-flex">
        <div class="aui-col aui-col-span-8 aui-row-flex-start  padding-top-21">
          <span class="measure-obj">设备所在地址</span>
        </div>
        <!-- <div class="aui-col aui-col-span-3 aui-row-flex-end  padding-top-21" tapmode onclick="chooseLocationType()">
        </div> -->
        <div class="aui-col aui-col-span-14 aui-row-flex-end padding-top-21" style="height:auto;vertical-align:middle;" tapmode onclick="chooseLocationType()">
          <!-- <img src="../../image/icon-map-small.png" style="width:18px;height:18px;" /> -->

          <span class="num-value" id="device_position">请添加设备所在位置</span>
        </div>
        <div class="aui-col aui-col-span-2 aui-row-flex-end  padding-top-21" tapmode onclick="chooseLocationType()">
          <i class="aui-iconfont aui-icon-right" style="color:#5B7FF8;font-size:16px;margin-top:-0.1rem;"></i>
        </div>
      </div>
      <div class="panel-line margin-top-21"></div>
      <div class="aui-row aui-row-flex padding-top-21">
        <div class="aui-col aui-col-span-7 aui-row-flex-start">
          <span class="measure-obj">完善详细地址</span>
        </div>
        <div class="aui-col aui-col-span-17 aui-row-flex-end">
          <input id="detail_address" class="aui-input" placeholder="请输入详细地址" type="text" maxlength="15" style="height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
        </div>
      </div>
      <div class="panel-line margin-top-21"></div>
    </div>
  </div>
  <div class="confirm-btn" tapmode onclick="handleAddDevice();">确认</div>
</body>


<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  var userId;
  var token;
  var username;
  var addImei;
  var isFirstAdd;
  var province;
  var city;
  var address;
  var bmap;
    apiready = function() {
        api.parseTapmode();
        var params = api.pageParam;
        token = $api.getStorage('userToken');
        username = $api.getStorage('userName');
        userId = $api.getStorage('userID');
        addImei = params.code;
        bmap = api.require('bMap');
        $api.html($api.byId('device_imei'), '设备编号:'+params.code);

        api.addEventListener({
            name: 'changeDeviceLocation'
        }, function(ret, err){
            if( ret ){
              if (ret.value.info) {
                $api.html($api.byId('device_position'), ret.value.info.address);
                bindDeviceInfo(ret.value.info);
              }
            }
        });

      checkIsFirstAdd();

    }

    function bindDeviceInfo(param) {
      bmap.getNameFromCoords({
          lon: param.lon,
          lat: param.lat
      }, function(ret, err) {
          if (ret.status) {
            province = ret.province;
            city = ret.city;
            address = param.address;
          }
      });
    }

    function chooseLocationType() {
      api.openWin({
          name: 'map_win',
          url: './map_win.html',
          slidBackEnabled: false,
      });
    }

    function checkIsFirstAdd() {
      $.ajax({
          url: HOST + '/iot_api/v1/app/get_store_bind_user_count?imei='+ addImei,
          type: 'GET',
          dataType: 'json',
          headers: {
              'Content-Type': 'application/json;charset=utf-8',
              'token': token
          },
          complete: function() {
              api.hideProgress();
          },
          success: function(ret) {
            var dom1 = $api.byId('input1');
            var dom2 = $api.byId('input2');
            var dom3 = $api.byId('input3');

            if (ret.data > 0) {
              isFirstAdd = false;
              $api.removeCls(dom1, 'aui-hide');
              $api.addCls(dom2, 'aui-hide');
              $api.addCls(dom3, 'aui-hide');
            }else {
              isFirstAdd = true;
              $api.addCls(dom1, 'aui-hide');
              $api.removeCls(dom2, 'aui-hide');
              $api.removeCls(dom3, 'aui-hide');
            }
          },
          error: function() {
            api.toast({msg: ERR_MSG,duration: 2000,location: 'bottom'});
          }
      });

    }

    function handleAddDevice() {
      var device_name = $api.val($api.byId("device_name"));
      if (device_name == '') {
        api.toast({ msg: "设备名称不可为空"});
      }
      var password;
      if (isFirstAdd) {
        var setInput = $api.val($api.byId('device_pwd'));
        var checkInput = $api.val($api.byId('pwd_check'));
        if (setInput == '') {
          api.toast({ msg: "设置密码不可为空"});
          return;
        }
        if (checkInput == '' || setInput != checkInput) {
          api.toast({ msg: "两次密码不一致"});
          return;
        }
        password = setInput;
      }else {
        var normalInput = $api.val($api.byId('normal_pwd'));
        if (normalInput == '') {
          api.toast({ msg: "密码不可为空"});
          return;
        }
        password = normalInput;
      }

      var mapAddress_ = $api.html($api.byId('device_position'));
      if (mapAddress_ == '请添加设备所在位置') {
        api.toast({ msg: "请进行初始化定位该设备"});
        return;
      }

      var inputAddress_ = $api.val($api.byId('detail_address'));
      if (inputAddress_ == '') {
        api.toast({ msg: "请输入详细地址"});
        return;
      }

      var allAddress = mapAddress_ + '--' + inputAddress_;
      //开始绑定
      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '正在绑定中...',
          text: '',
          modal: true
      });

      $.ajax({
          url: HOST + '/iot_api/v1/app/bind_device',
          type: 'POST',
          dataType: 'json',
          headers:{
              'Content-Type':'application/json;charset=utf-8',
              'token': token
          },
          data: JSON.stringify({
            qrstr: addImei,
            user_id: userId,
            username: username,
            province: province,
            city: city,
            address: allAddress,
            password: password,
            first_add: isFirstAdd,
            store_name: device_name
          }),
          complete: function() {
              api.hideProgress();
          },
          success: function(ret) {
            if (ret.code == 0) {
              var devices = $api.getStorage('devices');
              //添加新设备同步推送
              var ajpush = api.require('ajpush');
              initAndListenPush(ajpush, false);
              api.sendEvent({
                  name: 'change_device'
              });

              api.sendEvent({
                  name: 'change_device_device_list'
              });

              alert("绑定成功!");

              api.sendEvent({
                  name: 'closeAddDevicePage',
                  extra: {
                      isAdd: true,
                  }
              });
            }else {
              api.toast({
                msg: "绑定失败," + ajaxCodeCheck(ret.code, ret.msg, '请重试!')
              });
            }
          },
          error: function() {
            api.toast({msg: ERR_MSG,duration: 2000,location: 'bottom'});
          }
      });
      //----------
    }
</script>
</html>