scannerView.html 6.6 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>添加设备</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/style.css" />
    <style>
        html,body{
            background-color: rgba(0,0,0,0);
        }
        #line{
            width:200px;
            height:20px;
            position: absolute;
            left:10px;
            top: 10px;
            background:transparent;
            border-bottom:1px solid #FF5B5B;
        }
        #line:active{
            height:100px;
        }
    </style>
</head>

<body class="scanner-view" id="scannerView">
  <div class="aui-content aui-margin-b-15">
    <header class="aui-header-bar" style="padding-top:30px;background-color:rgba(61,62,62,0.75);">
      <div class="aui-header-left" tapmode onclick="closeWin();">
          <i class="aui-iconfont aui-icon-left" style="color:#FFFFFF;font-size:16px;">返回</i>
      </div>
      <div class="aui-title title-font">添加设备</div>
      <div class="aui-header-right">
      </div>
    </header>
      <div class="scanner-view-content">
          <p>请扫描设备上的二维码以获取设备编号</p>
          <div id="scanner_view">
            <i style="top:-1px;left:-1px;border-right:0;border-bottom:0;"></i>
            <i style="top:-1px;right:-1px;border-left:0;border-bottom:0;"></i>
            <i style="bottom:-1px;left:-1px;border-top:0;border-right:0;"></i>
            <i style="bottom:-1px;right:-1px;border-top:0;border-left:0;"></i>
            <!-- <div id="line"></div> -->
          </div>
      </div>
  </div>

  <div class="bar-shadow">
  </div>
  <!-- <div class="check-device-alert">
    <div class="check-device-alert-inside">
        <span style="float: right;">X</span>
    </div>
  </div> -->
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.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" src="../../script/ctrl.js"></script>
<script type="text/javascript">
    var header = $api.byId('header');
    fixStatusBar_API(header);
    var h=0;
    apiready = function() {
        $api.css($api.byId('scanner_view'),"left:"+(((api.winWidth-220)/2)-1)+"px");
        $(".scanner-view").css("height",api.winHeight+"px");
        api.addEventListener({
            name: 'confirm_add_device'
        }, function(ret, err){
            // api.alert({msg: 'confirm_add_device'});
            // $("#scannerView").empty();
            // document.body.style.backgroundColor="#000000";
            getDeviceInfos(ret.value.type, ret.value.imei);
        });

    }
    

    async function getDeviceInfos(productType, imei) {
        console.log(productType);
        var result = await get_product_type_list()
        // console.log(JSON.stringify(result));
        var products = result.data.List
        products.forEach(d => {
            if (d.id === productType) {
                api.imageCache({
                    url: d.pic_url
                }, function(ret, err) {
                    if (ret) {
                        console.log(ret.url);
                        
                        if (ret.url) {
                            var dialogBox = api.require('dialogBox');
                            dialogBox.alert({
                                tapClose: true,
                                texts: {
                                    title: '',
                                    content: d.remark + '(' + d.name + ')',
                                    leftBtnTitle: '确认',
                                },
                                styles: {
                                    bg: '#fff',
                                    w: 300,
                                    corner:6,
                                    title: {
                                        marginT: 20,
                                        icon: ret.url,
                                        iconSize: 100,
                                        titleSize: 25,
                                        titleColor: '#37394E'
                                    },
                                    content: {
                                        color: '#37394E',
                                        size: 14
                                    },
                                    left: {
                                        marginB: 7,
                                        marginL: 20,
                                        w: 260,
                                        h: 40,
                                        corner: 24,
                                        bg: '#5B7FF8',
                                        color: '#FFFFFF',
                                        size: 12
                                    },
                                }
                            }, function(ret) {
                                if (ret.eventType == 'left') {
                                    var dialogBox = api.require('dialogBox');
                                    dialogBox.close({
                                        dialogName: 'alert'
                                    });
                                    console.log(JSON.stringify(d));
                                    
                                    api.openWin({
                                        slidBackEnabled:false,
                                        name: 'perfectInfo_win',
                                        url: './perfectInfo_win.html',
                                        pageParam: {
                                            "productInfos": d,
                                            "imei": imei,
                                        },
                                        bounces: false,
                                    });                              
                                }
                                
                            });
                        }
                    } else{
                        var value = err.msg;
                    }
                });
                
                
                
            }
        });


    }
</script>