<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芝麻认证</title>

    <meta charset="utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <script type="text/javascript" src="/zmop/js/zepto.js"></script>
    <script type="text/javascript" src="/zmop/js/common.js"></script>
    <script type="text/javascript" src="/zmop/js/asset.js"></script>
    <!--<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            background: white;
        }

        .container {
            padding: 75px 28px 0;
        }

        input {
            border: none;
            outline: none;
            height: 22px;
            margin: 20px 0;
            font-size: 16px;
            border-bottom: 1px solid #C0C4CC;
            background: white;
        }

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #8E9091;
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #8E9091;
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #8E9091;
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #8E9091;
        }

        .input-group {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .btn {
            padding-top: 50px;
            font-size: 14px;
        }

        button {
            height: 48px;
            width: 100%;
            border-radius: 4px;
            border: none;
            color: #FFFFFF;
            background: #1195F7;
            position: relative;
            display: block;
            margin: 0 auto;
            text-decoration: none;
            transition: background-color, width .1s, .25s ease-in-out;
            -moz-transition: background-color, width .1s, .25s ease-in-out;
            -webkit-transition: background-color, width .1s, .25s ease-in-out;
        }

        button[disabled] {
            background: #8DC1F4;
        }

        input[placeholder] {
            letter-spacing: 0;
            opacity: 0.7;
        }

        .toast {
            position: fixed;
            top: 40px;
            max-width: 80%;
            border-radius: 10px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.75);
            font-size: 0;
            display: inline-block;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: 100;
        }

        .toast > * {
            display: inline-block;
            vertical-align: middle;
        }

        .toast span {
            font-size: 14px;
            padding: 10px 10px;
            display: block;
            height: auto;
            word-wrap: break-word;
        }
		
		.tips {
            position: fixed;
            top: 40px;
            max-width: 80%;
            border-radius: 10px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.75);
            font-size: 0;
            display: inline-block;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: 100;
        }

        .tips > * {
            display: inline-block;
            vertical-align: middle;
        }

        .tips span {
            font-size: 14px;
            padding: 10px 10px;
            display: block;
            height: auto;
            word-wrap: break-word;
        }

        .protocol {
            margin-top: 20px;
            color: #a6a6a6;
            font-size: 13px;
        }
		
		.protocol span{
		    vertical-align: top;
		}

        .protocol a {
            text-decoration: none;
            vertical-align: top;
            color: #1195F7;
        }

        .checkbox input[type="checkbox"] + label {
            display: inline-block;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAclBMVEUAAACoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKj////p6en8/Pytra3f39/Jycmqqqr4+Pj19fXz8/Pv7+/Dw8OysrKwsLDX19e7u7u6urq2trbj4+PY2NjQ0NC8vLwcRG8RAAAAD3RSTlMA6QSSxldMEJX5gOut+oEKcoNDAAAA9ElEQVQoz4WT2c6DIBBGASkgtmVw12qXf3n/V2yhAtpiODdDckI+lhnkISyjOM8xzRhBn3CJlaeQfGsPVgbwYSWJUF8I4u1RRTg6n6koYslVO9h8jvc0NueXaheJEMH7GhPEomLWN1NY/Nj3HrSpGaIR25SgK7OgyEZfhsfKXgGuSzjKTamhn5ysNJTNss7futUwVsryGKC/K6/xe8sIurUxr9g53MwdbR6gfpU/gLpVHuovNnXwW/3Y2EAWnuVWQgfdv1rDECnc+gIwTh+Puv6SxsU6ZOJDE+1gEXErEq2YaOTUGAT4uQiyOHMvNiN4Om1H8AmlICp9QDwrnAAAAABJRU5ErkJggg==");
            background-size: 100%;
            background-repeat: no-repeat;
            width: 15px;
            height: 15px;
            font-size: 0;
        }

        .checkbox {
            text-align: center;
            display: inline-block;
            height: 15px;
            width: 15px;
        }

        .checkbox input {
            display: none;
        }

        .checkbox input[type="checkbox"]:checked + label {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAflBMVEUAAAA+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/4+o/7///9JqP74/P/v9//q9f/l8//b7v/O6P+n1v95v/5puP5jtf5Oq/5Cpf7R6f/J5f+63v+Myf6DxP5bsf5Trf7C4v+83/+w2f+d0P4xTFaUAAAAEHRSTlMA6pQE+UwQxoBY6K3sV4HE2iTsxQAAAP1JREFUKM+Fk9mSgyAQRWnBKMZkaHCNxuyz/P8PzihChJHyvtDFqa7eiRWNoyRjLEuimBJfuxSEFaQ7l/JMOMr4AtJI/FNELd2LFe0NN76+v6YHEdBhyhlCGMb8UxFUSgiFMAZK4lVwbrrxidfT7ku86OQ/VuhD4VWORkKm0KeqX9AWsZ2DEzY+NyxfBsorqsdsM42HBmupf54Vlr2wGLRLjc0whVF4Ob8rI8lcSYW3v+cH8XsQVokt7FlgKz9R3d2p2LZ0CgssOot0W2hu7BNi/fKauhzJ/Ut6I9keaHgd+OYyba9ieJGtOHhZce+Ijvkb5kdzRO4JAmPgnOAvE1MtY68I6P8AAAAASUVORK5CYII=");
        }

        .btn svg {
            opacity: 0;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
            position: absolute;
            border-radius: 1.83333333rem;
            left: 0;
            top: 0;
            width: 100%;
            background-color: inherit;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
        }

        #submit.loading {
            width: 47px;
            overflow: hidden;
            border-radius: 21.99999999px;
            background-color: #0091cb;
            background: -webkit-linear-gradient( #1195F7, #1195F7);
            background: -o-linear-gradient( #1195F7, #1195F7);
            background: -moz-linear-gradient( #1195F7, #1195F7);
            background: linear-gradient(#1195F7, #1195F7);
        }

        #submit.loading span {
            display: none;
        }

        #submit.loading svg{
            opacity: 1;
        }

        .ignorepage {
          //  text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="input-group">
        {% if readonly == '1' %}
        {% if modify_no == '1' %}
        <input id="cert_no" name="身份证" type="text" placeholder="身份证" value="{{cert_no}}" data="{{raw_no}}"
               data-re="^([\dxX]{15,18})$" onkeyup="a()">
        {% else %}
        <input id="cert_no" name="身份证" type="text" readonly="readonly" placeholder="身份证" value="{{cert_no}}" disabled="disabled"
               data="{{raw_no}}"
               data-re="^([\dxX]{15,18})$" onkeyup="a()">
        {% endif %}
        {% if modify_name == '1' %}
        <input id="cert_name" name="姓名" type="text" placeholder="姓名" value="{{cert_name}}" data="{{raw_name}}"
               data-re="[^\d\s]">
        {% else %}
        <input id="cert_name" name="姓名" type="text" readonly="readonly" placeholder="姓名" value="{{cert_name}}" disabled="disabled"
               data="{{raw_name}}"
               data-re="[^\d\s]">
        {% endif %}
        {% if modify_phone == '1' %}
        <input id="cert_phone" name="手机号" type="text" placeholder="手机号" value="{{cert_phone}}" data="{{raw_phone}}"
               data-re="^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$">
        {% else %}
        <input id="cert_phone" name="手机号" type="text" readonly="readonly" placeholder="手机号" value="{{cert_phone}}" disabled="disabled"
               data="{{raw_phone}}"
               data-re="^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$">
        {% endif %}
        {% else %}
        <input id="cert_no" name="身份证" type="text" placeholder="身份证" value="{{cert_no}}" data="{{raw_no}}"
               data-re="^([\dxX]{15,18})$" onkeyup="a()">
        <input id="cert_name" name="姓名" type="text" placeholder="姓名" value="{{cert_name}}" data="{{raw_name}}"
               data-re="[^\d\s]">
        <input id="cert_phone" name="手机号" type="text" placeholder="手机号" value="{{cert_phone}}" data="{{raw_phone}}"
               data-re="^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$">
        {% endif %}
    </div>
    <div class="btn">
        <button id="submit" onclick="submit()">
            <span>同意授权</span>
            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
                <g fill="none" fill-rule="evenodd">
                    <g transform="translate(1 1)" stroke-width="3">
                        <circle stroke-opacity=".5" cx="18" cy="18" r="15"></circle>
                        <path d="M33 18c0-9.94-8.06-15-15-15" transform="rotate(348 18 18)">
                            <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s"
                                              repeatCount="indefinite"></animateTransform>
                        </path>
                    </g>
                </g>
            </svg>
        </button>
    </div>
    <div class="protocol">
        <div class="checkbox">
            <input type="checkbox" checked="checked" class="input-option" autocomplete="off" id="check"
                   onclick="check()">
            <label for="check"></label>
        </div>
        <span id="protocol">我已阅读并同意</span><a href="/zmop/protocol?app_key={{ app_key }}">《用户授权服务协议》</a>
    </div>
</div>
<input id="query" hidden="hidden" value="{{ query }}">
<input id="app_id" hidden="hidden" value="">
<input id="app_key" hidden="hidden" value="{{ app_key }}">
<script>
    // var vConsole = new VConsole();

    function check() {
        var checked = $('#check')[0].checked
        if (checked) {
            $('#submit').removeAttr('disabled')
        } else {
            $('#submit').attr('disabled', 'disabled')
        }
    }

    var channel = JSON.parse($('#query').val()).channel
    if (channel != 'H5' && ($('#app_key').val() == 'D5027812582F4D2CBBA22759C78C5C0C' || $('#app_key').val() == '4797DB4A2D9349F4B9C801CD173F74C8' || $('#app_key').val() == 'E41E84C394BA47CB8C525CAC9F883C69' || $('#app_key').val() == 'FB6B0D6DBD3748B389A89FAACC2B0D0D')){
        $(".container").append('<label style="color: #a6a6a6;padding-top: 15px;display: block">请确保您的手机已安装并登录支付宝APP后进行授权</label>')
    }

    if (channel != 'H5' && ($('#app_key').val() == '2D0650A080644A59A4F56087E34A3983' || $('#app_key').val() == '5429650395C74BFEA0B058275B1AE517')){
        apptips("请确保您的手机已安装并登录支付宝APP后进行授权")
    }

    if (channel != 'H5' &&($('#app_key').val() == '5EE9D5B528324C49A3B4DAFF715577E1' || $('#app_key').val() == '5369C700EB6942F3921BF05A7D31CDAF')){
        $(".input-group").css('display','none');
        $(".input-group").before("<div style='text-align: center;'><img style='width: 35%;' src='/zmop/static/zmopicon.png'></div><div class='ignorepage'><div style='margin: 18% 0 1% 0;'><label style='display: block;width: 96%;margin: 0 0 0 4%'>(1) 认证成功后，请返回App完成后续操作<br/>(2) 若未认证成功,建议您返回App重新操作<br/>(3) 如有问题，您可以致电官网客服1010-0668</label></div></div>");
    }

    function submit() {
        $("#submit").addClass("loading");
        $("#submit").attr("disabled","disabled");
        var data = {
            cert_no: $('#cert_no').val().trim(),
            cert_name: $('#cert_name').val().trim(),
            cert_phone: $('#cert_phone').val().trim()
        }
        if (data.cert_no.indexOf('*') >= 0) {
            data.cert_no = $('#cert_no').attr('data')
        }
        if (data.cert_name.indexOf('*') >= 0) {
            data.cert_name = $('#cert_name').attr('data')
        }
        if (data.cert_phone.indexOf('*') >= 0) {
            data.cert_phone = $('#cert_phone').attr('data')
        }
        if (!valid_input(data)) {
            $("#submit").removeClass("loading");
            $("#submit").removeAttr("disabled");
            return
        }

        $(".input-group input").attr("readonly","readonly")
        var query = JSON.parse($('#query').val())
		// if(query.appKey != '2D0650A080644A59A4F56087E34A3983' && query.channel == 'H5' && query.appKey != '6911223ABDBF4A0588E3A0B64E18ED3A' && query.appKey != 'F001E17E23CD45C384674071F6836B47'){
		// 	  $.toast('h5授权暂停服务');
		// 	  return;
		// }
        query.cert_no = data.cert_no
        query.cert_name = data.cert_name
        query.cert_phone = data.cert_phone
        query.app_id = $('#app_id').val()
       // query.system = window.lib.env.os.name
        var url = '/zmop/auth'
        if (query.channel == 'H5') {
            url = '/zmop/auth?channel=H5'
        }
        setTimeout(function () {
            $("#submit").removeClass("loading");
            $(".input-group input").removeAttr("readonly")
            $("#submit").removeAttr("disabled");
        },10000)
        doAjax({
            url: url,
            type: 'POST',
            data: query,
            success: function (resp) {
                if (resp.code == 0) {
                    //  上传到OSS
                    if (resp.channel == 'H5') {
                        window.location.href = resp.auth_url
                    } else if (resp.channel == 'APP') {
                        call_alipay(resp.auth_url)
                        if (typeof WebSocket == 'undefined') {
                            loop(query, resp) // 不支持websocket
                        } else {
                            window.ws = new WS()
                            window.ws.init(query.order_id)
                        }
                    }
                } else {
                    if (JSON.parse($('#query').val()).appKey === '03B5615498F8432D8E9E8D2F1AA0D88B' || JSON.parse($('#query').val()).appKey === 'CD3282798620404AB48EAA5F146E1F71' || JSON.parse($('#query').val()).appKey === 'D5027812582F4D2CBBA22759C78C5C0C'){
                        redirect({error_msg:resp.msg,success:"fail"})
                    }else{
						if(query.channel != 'H5' && (JSON.parse($('#query').val()).appKey === '33E4438EB7DA49F8AFC1658CD0988E8C' || JSON.parse($('#query').val()).appKey === 'A90F3A8D74C24CA3A03FB23A0DADA4DD')){
							$.toast("授权已发起成功，您可以返回上一页面等待成功结果。如长时间未成功跳转，或您未完成支付宝操作。您可以在上一页面重新发起芝麻分授权")
						}else{
                        $.toast(resp.msg)
						}
                        $("#submit").removeClass("loading");
                        $(".input-group input").removeAttr("readonly")
                        $("#submit").removeAttr("disabled");
                    }
                }
            },
            error: function (err) {
                console.error(err)
                $.toast('系统错误, 请稍后再试')
                $("#submit").removeClass("loading");
                $(".input-group input").removeAttr("readonly")
                $("#submit").removeAttr("disabled");
            }
        })
    }

    function call_alipay(scheme) {
        if ($('#callApp')) {
            $('#callApp').remove()
        }
        checkUA()
        var n = window.lib.env.os.name
        if (n == 'Android') {
            var ifa = document.createElement('iframe');
            ifa.id = 'callApp';
            ifa.style.display = 'none';
            ifa.style.width = '0%';
            ifa.style.height = '0%';
            ifa.style.border = 'none';
            ifa.style.margin = '0';
            ifa.style.padding = '0';
            ifa.src = scheme
            document.body.appendChild(ifa);
            //document.body.removeChild(ifa);
            ifa = null
        }
        if (n == 'iPhone' || n == 'iPad') {
            var a = document.createElement('a');
            a.setAttribute('href', scheme);
            a.id = 'callApp';
            a.style.display = 'none';
            document.body.appendChild(a);
            var e = document.createEvent('HTMLEvents');
            e.initEvent('click', false, false);
            a.dispatchEvent(e);
        }
        document.getElementById('callApp').click()
    }

    function valid_input(data) {
        var rt = true;
        $.each(data, function (key) {
            if (key == 'cert_no') {
                console.log(data[key])
                if (!IdentityCodeValid(data[key].toUpperCase())) {
                    $.toast('无效的身份证号');
                    rt = false
                    return rt
                }
            }
            var index = 'input[id="' + key + '"]';
            if ($(index).attr('data-re')) {

                var re = new RegExp($(index).attr('data-re'))
                if (!re.test(data[key])) {
                    $.toast($(index).attr('name') + '格式不对');
                    rt = false;
                    return rt
                }
            }
        });
        return rt
    }

    function a() {
        var l = $('#cert_no').val().length
        if (l == 18 || l == 15) {
            app_id()
        }
    }

    window.onload = function () {
        a()
    }

    function app_id() {
        var query = JSON.parse($('#query').val())
		// if(query.appKey != '2D0650A080644A59A4F56087E34A3983' && query.channel == 'H5' && query.appKey != '6911223ABDBF4A0588E3A0B64E18ED3A' && query.appKey != 'F001E17E23CD45C384674071F6836B47'){
		// 	  $.toast('h5授权暂停服务');
		// 	  return;
		// }
        var cert_no = $('#cert_no').val()
        if (cert_no.indexOf('*') >= 0) {
            cert_no = $('#cert_no').attr('data')
        }
        doAjax({
            url: '/zmop/app_id',
            type: 'POST',
            data: {cert_no: cert_no, channel: query.channel},
            success: function (resp) {
                if (resp.code == 0) {
				$('#app_id').val(resp.data)
				$('#protocol+a').attr('href', '/zmop/protocol?app_id=' + resp.data + '&app_key=' + $('#app_key').val())
                } else {
                    $.toast(resp.msg)
                }
            },
            error: function (err) {
                $.toast('系统错误, 请稍后再试')
            }
        })
    }

    function loop(query) {
        window.loop = setInterval(function () {
            check_task()
        }, 2e3)
    }

    function check_task() {
        var _q = JSON.parse($('#query').val())
        doAjax({
            url: '/zmop/task',
            type: 'POST',
            data: _q,
            success: function (resp) {
                console.log('task: ', JSON.stringify(resp))
                if (resp.code == 0 && resp.data.success != 0) {
                    redirect(resp.data)
                }
            },
            error: function (err) {
                console.error(err)
                $.toast('系统错误, 请稍后再试')
                $("#submit").removeClass("loading");
                $(".input-group input").removeAttr("readonly")
                $("#submit").removeAttr("disabled");
            }
        })
    }

    function redirect(loop) {
        var _q = JSON.parse($('#query').val())
        if (loop.success == 0) {
            return
        }
        var _p = {
            order_id: _q.order_id,
            status: 1 == loop.success || 'true' == loop.success ? 'success' : 'fail',
            msg: loop.error_msg || '',
        }
        if (_q.extras) {
            _p.extras = _q.extras
        }
        if (!_q.customUrl) {
            clearInterval(window.loop)
            window.location.href = '/zmop/result?' + serializeParams(_p)
            return
        }
        var _url = decodeURIComponent(_q.customUrl).split('?')
        var url = _url[0] + '?' + serializeParams(_p)
        if (_url.length == 2) {
            url += '&' + decodeURIComponent(_url[1])
        }
        console.log('Navigated to: ', url)
        window.location.href = url
    }

    function WS() {
    }

    WS.prototype.init = function (id) {
        var p = window.location.protocol
        var w
        if (p == 'http:') {
            w = 'ws'
        } else {
            w = 'wss'
        }
        var _ws = new WebSocket(w + '://' + window.location.host + '/zmop/ws?order_id=' + id);
        _ws.onopen = function () {
            console.log('webSocket [connected]');
            check_task()
        };
        _ws.onmessage = function (o) {
            console.log('webSocket [receive]: ', o.data);
            redirect(JSON.parse(o.data))
        }

        _ws.onclose = function (e) {
            console.log(e)
        };

    }
</script>
</body>
</html>
