@guohh@修复内蒙项目配置页面样式及js问题

2021/nm-zsyt/ipu/connect-config.html

@@ -5,10 +5,10 @@
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="./css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="./css/connect-config.css">
  <!-- 顺序要先ipu-mobile.js 再android-webview.js-->
  <script src="./js/frame/ipu-mobile.js"></script>
  <script src="./js/frame/android-webview.js"></script>
@@ -30,6 +30,80 @@
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content" id="content">
      <div class="demo-item"><p class="demo-title">类型</p>
        <div class="demo-body">
          <div class="ipu-list">
            <ul>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_BRAND_TYPE" value="SR">森锐
                  </label>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_BRAND_TYPE" value="SYD">三元达
                  </label>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_BRAND_TYPE" value="ZYZX">中移在线
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="demo-item"><p class="demo-title">连接方式</p>
        <div class="demo-body">
          <div class="ipu-list">
            <ul>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_CONNECT_TYPE" value="bt">蓝牙
                  </label>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_CONNECT_TYPE" value="otg">OTG
                  </label>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <label class="ipu-radio">
                    <input type="radio" name="DEVICE_CONNECT_TYPE" value="nfc">NFC
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="demo-item"><p class="demo-title">蓝牙地址</p>
        <div class="demo-body">
          <div class="ipu-list">
            <ul>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-input-wrap">
                    <input class="ipu-list-item-input" name="DEVICE_BT_ADDRESS" type="text"
                           placeholder="请选择" readonly="">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2021/nm-zsyt/ipu/css/ipuUI.css

@@ -568,7 +568,7 @@ a:active {
.ipu-radio {
  display: inline-block;
}
.ipu-radio input {
/*.ipu-radio input {
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
@@ -600,7 +600,7 @@ a:active {
  height: 50%;
  background: #0083d3;
  border-radius: 50%;
}
}*/
.ipu-checkbox {
  display: inline-block;
}

2021/nm-zsyt/ipu/js/connect-config.js

@@ -2,88 +2,11 @@ $(function () {
  var contentRoot = $("#content");
  // 设备连接配置项
  var configItems = [{
    label: '类型',
    name: 'DEVICE_BRAND_TYPE',
    options: [{
      name: '森锐', value: 'SR',
    }, {
      name: '三元达', value: 'SYD',
    }, {
      name: '中移在线', value: 'ZYZX',
    }]
  }, {
    label: '连接方式',
    name: 'DEVICE_CONNECT_TYPE',
    options: [{
      name: '蓝牙', value: 'bt',
    }, {
      name: 'OTG', value: 'otg',
    }, {
      name: 'NFC', value: 'nfc',
    }]
  }, {
    label: '蓝牙地址',
    name: 'DEVICE_BT_ADDRESS',
    type: 'input',
    clickFun: function (callback) {
      AndroidWebView.btDeviceList(callback)
    }
  }];
  // 设置连接信息
  function setConnectConfig(name, value) {
    AndroidWebView.setCache(name, value);
  }
  // 初始化配置项
  function iniConfigItem(items) {
    var contentHtml = '';
    $(items).each(function (i, item) {
      var optionStr = '';
      if ($.isArray(item.options)) {
        $(item.options).each(function (i, option) {
          optionStr = optionStr + '<li class="ipu-list-item">\n' +
            '                        <div class="ipu-list-item-inner">\n' +
            '                          <label class="ipu-radio">\n' +
            '                            <input type="radio" name="' + item.name + '" value="' + option.value + '">' + option.name + '\n' +
            '                        </label>\n' +
            '                      </div>\n' +
            '                    </li>'
        });
      } else if (item.type == 'input') {
        var readonly = item.clickFun ? 'readonly' : '';
        optionStr = optionStr + '<li class="ipu-list-item">\n' +
          '                <div class="ipu-list-item-inner">\n' +
          '                  <div class="ipu-list-item-input-wrap">\n' +
          '                    <input class="ipu-list-item-input"name="' + item.name + '" type="text"' +
          '                     placeholder="请选择" ' + readonly + '>\n' +
          '                  </div>\n' +
          '                </div>\n' +
          '              </li>';
        // 绑定事件
        if (item.clickFun) {
          contentRoot.on("click", "input[name='" + item.name + "']", function () {
            var input = $(this);
            item.clickFun(function (result) {
              input.val(result);
              setConnectConfig(input.attr("name"), input.val());
            });
          });
        }
      }
      contentHtml = contentHtml + '<div class="demo-item"><p class="demo-title">' + item.label + '</p>' +
        '<div class="demo-body"><div class="ipu-list"><ul>' + optionStr + '</ul></div></div></div>';
    });
    $(contentHtml).appendTo(contentRoot);
  }
  //　初始化配置项值
  function initConfigItemValue() {
    AndroidWebView.getDeviceConfig(function (obj) {
@@ -92,7 +15,7 @@ $(function () {
          var inputs = $("input[name='" + key + "']");
          if (inputs.length != 1) { // radio之类
            $("input[name='" + key + "'][value='" + obj[key] + "']").prop("checked", true);
            $("input[name='" + key + "'][value='" + obj[key] + "']").attr("checked", true);
          } else {
            inputs.val(obj[key]);
          }
@@ -103,15 +26,22 @@ $(function () {
  // 页面初始化
  function init() {
    // 初始化配置项
    iniConfigItem(configItems);
    // 读取身份证缓存数据,更新配置初始值
    // 读取配置数据,更新到页面
    initConfigItemValue();
  }
  // 页面事件绑定
  function bindEvent() {
    // 选择蓝牙
    $("input[name='DEVICE_BT_ADDRESS']").click(function () {
      var input = $(this);
      AndroidWebView.btDeviceList(function (result) {
        input.val(result);
        setConnectConfig(input.attr("name"), input.val());
      });
    });
    // 保存配置项变动
    $("input", contentRoot).change(function () {
      setConnectConfig($(this).attr("name"), $(this).val());