<!DOCTYPE html>
<html lang="en" style="font-size: 16px;" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta data-n-head="true" data-hid="description" name="description" content="商户公众号">
    <meta data-n-head="true" http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta data-n-head="true" http-equiv="Pragma" content="no-cache">
    <meta data-n-head="true" http-equiv="Expires" content="0">
    <title data-n-head="true">账号绑定</title>
    <script src="/wap/resources/js/jquery.min.js"></script>
    <title>账号绑定</title>
    <style>
        *{-webkit-tap-highlight-color:transparent;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box}*,blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;vertical-align:baseline}html{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;word-spacing:.03125rem;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box}img{border:0 none;vertical-align:top}em,i{font-style:normal}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}#__layout,#__nuxt,body,html{min-height:100%;width:100%;background-color:#f6f6f6;color:#333}input{border:none;outline:none;color:#666;caret-color:#f04144}::-moz-input-placeholder{color:#ccc}:-ms-input-placeholder{color:#ccc}::-webkit-input-placeholder{color:#ccc}::-ms-input-placeholder{color:#ccc}::placeholder{color:#ccc}input:disabled{color:#666;background:none;opacity:1;filter:alpha(opacity=100);-webkit-text-fill-color:#666}input:disabled::-moz-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled:-ms-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::-webkit-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::-ms-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::placeholder{color:#ccc;-webkit-text-fill-color:#ccc}.absolute-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.absolute-center,.vertical-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.horizontal-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.active-color{color:#f04144}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-jurisdiction{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-top:10.3125rem}.no-jurisdiction .no-jurisdiction-img{width:6.65625rem}.no-jurisdiction .no-jurisdiction-img img{width:100%;height:auto}.no-jurisdiction .no-jurisdiction-text{margin-top:1.5625rem;font-size:.875rem;text-align:center;color:#999}.forbid-root-scroll{position:fixed;overflow:hidden;height:100%}.thin-border,.thin-border-bottom,.thin-border-left,.thin-border-right,.thin-border-top{position:relative}.thin-border-top:before{top:0;left:0;border-bottom:.0625rem solid #e5e5e5}.thin-border-bottom:before,.thin-border-top:before{content:"";position:absolute;width:200%;height:.0625rem;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5)}.thin-border-bottom:before{bottom:0;border-bottom:.0625rem solid #e6e6e6}.thin-border-right:before{right:0;height:200%;border-right:.0625rem solid #ccc}.thin-border-left:before,.thin-border-right:before{content:"";position:absolute;top:0;width:.0625rem;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5)}.thin-border-left:before{left:0;height:1.5625rem;border-left:.0625rem solid #ccc}.thin-border:before{content:"";position:absolute;top:0;left:0;width:200%;height:200%;border:.0625rem solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.125rem;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-block{display:block}.vertical-align-m{vertical-align:middle}.vertical-align-t{vertical-align:top}.float-r{float:right}.float-l{float:left}.slide-in-down-enter-active,.slide-in-down-leave-active{-webkit-transition:all .2s;transition:all .2s;-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-down-enter,.slide-in-down-leave-to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-in-up-enter-active,.slide-in-up-leave-active{-webkit-transition:.2s;transition:.2s;-webkit-transform:translate(0);transform:translate(0)}.slide-in-up-enter,.slide-in-up-leave-to{-webkit-transform:translateY(100%);transform:translateY(100%)}.zoom-in-enter-active,.zoom-leave-active{-webkit-transition:.2s;transition:.2s;-webkit-transform:scale(1);transform:scale(1)}.zoom-in-enter,.zoom-leave-to{-webkit-transform:scale(0);transform:scale(0)}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .2s;transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.slide-left-enter,.slide-right-leave-active{opacity:0;-webkit-transform:translate(100%);transform:translate(100%);-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.slide-left-leave-active,.slide-right-enter{opacity:0;-webkit-transform:translate(-100%);transform:translate(-100%);-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1)}
    </style>
    <style>
        *{
            margin: 0;
            padding: 0;
            vertical-align: baseline;
        }
        html{
            font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            word-spacing: .03125rem;
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            word-spacing: .03125rem;
        }
        body{
            min-height: 100%;
            width: 100%;
            background-color: #f6f6f6;
            color: #333;
            display: block;
        }
        /*.nuxt-progress{*/
        /*    width: 0%;*/
        /*    height: 2px;*/
        /*    background-color: #f04144;*/
        /*    opacity: 0;*/

        /*    position: fixed;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    right: 0;*/
        /*    !*height: .0625rem;*!*/
        /*    !*width: 0;*!*/
        /*    !*-webkit-transition: width .2s,opacity .4s;*!*/
        /*    transition: width .2s,opacity .4s;*/
        /*    !*opacity: 1;*!*/
        /*    !*background-color: #efc14e;*!*/
        /*    z-index: 999999;*/
        /*}*/
        .account-binding{
            width: 19.0625rem;
            height: 20.25rem;
            margin: 2.5rem auto 0;
        }
        .account-binding .account-binding-logo{
            height: 8.71875rem;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
         .absolute-center, .vertical-center {
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
             -webkit-box-align: center;
             -ms-flex-align: center;
             align-items: center;
         }
        .account-binding .account-binding-form{
            overflow: hidden;
            width: 100%;
            height: 5.625rem;
            padding: 0 .625rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #fff;
            -webkit-box-shadow: 0 0.09375rem 0.3125rem 0 rgb(0 0 0 / 5%);
            box-shadow: 0 0.09375rem 0.3125rem 0 rgb(0 0 0 / 5%);
            border-radius: .25rem;
        }
        .f-input{
            height: 2.8125rem;
            padding: .03125rem .8125rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #fff;
        }
         .absolute-center, .vertical-center {
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
             -webkit-box-align: center;
             -ms-flex-align: center;
             align-items: center;
         }
        .absolute-center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        .absolute-center, .vertical-center {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .f-input .f-input-title{
            height: 100%;
            margin-right: 1.125rem;
        }
        .f-input .f-input-value{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            height: 100%;
        }
        .f-input .f-input-icon{
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            width: 1.34375rem;
            height: .8125rem;
        }
        img {
            border: 0 none;
            vertical-align: top;
        }
        .account-binding .account-binding-form #account-icon, .account-binding .account-binding-form #pwd-icon{
            width: 1.125rem;
            height: 1.125rem;
        }
        .f-input .f-input-title .f-input-title-icon{
            width: 1.125rem;
            height: 1.125rem;
        }
        .f-input .f-input-value input{
            display: block;
            width: 100%;
            height: 100%;
            font-size: 1rem;
        }
        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        input {
            border: none;
            outline: none;
            color: #666;
            caret-color: #FD7663;
        }
        .account-binding .account-binding-btn{
            position: relative;
            height: 5.90625rem;
        }
        .f-button{
            width: 100%;
            height: 2.75rem;
            border-radius: .25rem;
            font-size: 1.0625rem;
            background-color: #FD7663;
            color: #fff;
        }
        .account-binding .account-binding-btn .acb-button{
            position: absolute;
            bottom: 0;
        }
        .account-binding .account-binding-logo{
            height: 8.71875rem;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .account-binding .account-binding-logo .abl-img{
            height: 4.375rem;
            margin-bottom: 1.46875rem;
        }
        .account-binding .account-binding-logo .abl-img img{
            height: 100%;
            width: auto;
            border-radius: 5px;
        }
        .account-binding .account-binding-form #account-icon, .account-binding .account-binding-form #pwd-icon{
            width: 1.125rem;
            height: 1.125rem;
        }
        .account-binding .account-binding-form .h-line{
            width: 100%;
            height: .063125rem;
            background-color: #e5e5e5;
        }
        .f-input .f-input-icon img{
            width: auto;
            height: 100%;
        }
        .f-toast{
            z-index: 99;
            position: fixed;
            top: 48%;
            left: 50%;
            max-width: 80%;
            min-width: 10.375rem;
            padding: .78125rem .625rem .625rem;
            border-radius: .3125rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            background: rgba(51,51,51,.7);
            color: #fff;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .f-toast .f-toast-icon{
            height: .96875rem;
            margin-bottom: .71875rem;
        }
        .f-toast .f-toast-icon img{
            width: auto;
            height: 100%;
        }
        .f-popup{
            z-index: 0;
            position: fixed;
            top: 0;
            left: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.7);
        }
        .f-loading{
            position: fixed;
            z-index: 1;
            top: 40%;
            left: 37%;
            padding: 1rem 1rem;
            display: none;
            border-radius: 5px;
            background-color: #fff;
        }
        .loading-icon{
            margin: 0 0 0 .8rem;
        }
        .loading-txt{
            margin-top: .5rem;
        }
    </style>
</head>
<body>
    <div class="container">
<!--        <div class="nuxt-progress"></div>-->
        <input type="hidden" name="openid" id="openid" th:value="${openid}">
        <div class="content">
            <div class="account-binding">
                <div class="account-binding-logo vertical-center">
                    <div class="abl-img">
                        <img src="https://www.shouyinbei.net/resources/images/logo.png"/>
                    </div>
                    <div class="abl-text">
                        绑定您的快银账户
                    </div>
                </div>
                <div class="account-binding-form">
                    <div class="f-input vertical-center">
                        <div class="f-input-title absolute-center">
                            <div class="f-input-title-icon absolute-center">
                                <img src="/wap/resources/images/account_icon.2635004.png" id="account-icon" />
                            </div>
                        </div>
                        <div class="f-input-value vertical-center">
                            <input placeholder="请输入账号" id="loginName"  class="vertical-center ellipsis">
                        </div>
                        <div class="f-input-icon vertical-center" style="display: none" data-id="loginName">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAADLklEQVRIia2WTWhdVRSFv7XPRaEFBy0tOir+oQit1RKNREEdGSpYaP2F6kSROlDxZyg6cNTiUMGKiAoiNQWtoogTxSpIrBnYSrGKbaJpNVXU1qB5757l4J2H6c19Mdau0WOfdfd39zn77XM1MTGBJHLOdLtdIgJJ2KZouaTrbQ8DFwLnlviM7SPA58CHtn+SdMqzKSUiAttUDNZK4AngLtur2gyS+j9ngTeAp21/0+aNAZCtwFfAQ0ArpKFlku6RdEDSY0sFbbf9CrB6CYCmzgJ2SHq9H+hXHf19LYEdwOOnAWjqdkljADlnbBOdToe5uTlyzneklFrLPk1truv6yU6nQ13XvYqAVTnnF+d1Wl+HgR+XkPRXYEETSHpK0nrbRGnB7ZKWNXz7JZ0PXAR8uwjkZ+Ay4GLg45b1520TdV2fY3tri6FT1zW2T0bEOuDLFs8ksBY4Wnam0zRExFW2Lw3bo0BqSXIF8E5d1+ScZyNimF7L9zUNDANHAWy/DNzYTGKbqqq2hKSRFggAKaWNKaWxbrfbh10J/AYYWN+HAC8Adw/KI+maAC6Z9w9f8DYRsTmltKvA/oqIoVLtTLE9B9w7CFLyXFABa1q6rQm71fZeSXdKOlSWVgKvAqOLQYpWBCw67+bDRiJiuW1yzgBnAwO3vSEF8P0SjMckrc45HyxbSM552vZ5wMElPH8iJH33L6ZJYIPtmW63i6T3Ukp7y2iZtT0E7B9YSu/8pwL4YhHILwUyXdc1EfGspJsiYiSltKvATtoesr3YC08EsGfA4mFJ64DjOWciYqekB+CfBkkpjZXz+jMiLpd0oJnENrbfjJzzEeDTFtCU7R9K0pck3ddMUFr/7RI6YfvrljzHIuKjqly1D9K7kufrOuC1MgNvaSvZNpJuBj6wPQ1sanokPSwJjY+P9wPPAI+0JTxdSXo3pbQRIKqqoqoqIuJR25+cQc5kRNxWzmjBVX4t8NkZgExFxAbgj36g7ZthGNj5PyBvAWslHZ8fbP0KknQ/sAXY9x8Ah4BttjfRm/CnaOCcs73b9m5JNwCjkq4G1gAriuV3euNrH/C+7T2DbgGAvwHNP28e196upwAAAABJRU5ErkJggg==" />
                        </div>
                    </div>
                    <div class="h-line"></div>
                    <div class="f-input vertical-center">
                        <div class="f-input-title absolute-center">
                            <div class="f-input-title-icon absolute-center">
                                <img src="/wap/resources/images/pwd_icon.6459233.png" id="pwd-icon" />
                            </div>
                        </div>
                        <div class="f-input-value vertical-center" >
                            <input type="password" id="password" placeholder="请输入密码" class="vertical-center ellipsis">
                        </div>
                        <div class="f-input-icon vertical-center" data-id="password" style="display: none">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAADLklEQVRIia2WTWhdVRSFv7XPRaEFBy0tOir+oQit1RKNREEdGSpYaP2F6kSROlDxZyg6cNTiUMGKiAoiNQWtoogTxSpIrBnYSrGKbaJpNVXU1qB5757l4J2H6c19Mdau0WOfdfd39zn77XM1MTGBJHLOdLtdIgJJ2KZouaTrbQ8DFwLnlviM7SPA58CHtn+SdMqzKSUiAttUDNZK4AngLtur2gyS+j9ngTeAp21/0+aNAZCtwFfAQ0ArpKFlku6RdEDSY0sFbbf9CrB6CYCmzgJ2SHq9H+hXHf19LYEdwOOnAWjqdkljADlnbBOdToe5uTlyzneklFrLPk1truv6yU6nQ13XvYqAVTnnF+d1Wl+HgR+XkPRXYEETSHpK0nrbRGnB7ZKWNXz7JZ0PXAR8uwjkZ+Ay4GLg45b1520TdV2fY3tri6FT1zW2T0bEOuDLFs8ksBY4Wnam0zRExFW2Lw3bo0BqSXIF8E5d1+ScZyNimF7L9zUNDANHAWy/DNzYTGKbqqq2hKSRFggAKaWNKaWxbrfbh10J/AYYWN+HAC8Adw/KI+maAC6Z9w9f8DYRsTmltKvA/oqIoVLtTLE9B9w7CFLyXFABa1q6rQm71fZeSXdKOlSWVgKvAqOLQYpWBCw67+bDRiJiuW1yzgBnAwO3vSEF8P0SjMckrc45HyxbSM552vZ5wMElPH8iJH33L6ZJYIPtmW63i6T3Ukp7y2iZtT0E7B9YSu/8pwL4YhHILwUyXdc1EfGspJsiYiSltKvATtoesr3YC08EsGfA4mFJ64DjOWciYqekB+CfBkkpjZXz+jMiLpd0oJnENrbfjJzzEeDTFtCU7R9K0pck3ddMUFr/7RI6YfvrljzHIuKjqly1D9K7kufrOuC1MgNvaSvZNpJuBj6wPQ1sanokPSwJjY+P9wPPAI+0JTxdSXo3pbQRIKqqoqoqIuJR25+cQc5kRNxWzmjBVX4t8NkZgExFxAbgj36g7ZthGNj5PyBvAWslHZ8fbP0KknQ/sAXY9x8Ah4BttjfRm/CnaOCcs73b9m5JNwCjkq4G1gAriuV3euNrH/C+7T2DbgGAvwHNP28e196upwAAAABJRU5ErkJggg==" />
                        </div>
                    </div>
                </div>
                <div class="account-binding-btn">
                    <div class="f-button absolute-center acb-button" onclick="bind()">绑定</div>
                </div>
            </div>
        </div>
        <div class="f-toast ellipsis" style="display: none">
            <div class="f-toast-text"></div>
        </div>
        <div class="f-popup jsPop" style="display: none"></div>
        <div class="f-loading">
            <img src="/wap/resources/images/loading-2.gif" class="loading-icon" />
            <div class="loading-txt">加载中...</div>
        </div>
    </div>
<script>
    function bind(){
        let $loginName = $("#loginName").val();
        if(!$loginName){
            $(".f-toast").show().html("账号不能为空！");
            hideMsg();
            return;
        }
        let $password = $("#password").val();
        if(!$password){
            $(".f-toast").show().html("密码不能为空！");
            hideMsg();
            return;
        }
        let $openid = $("#openid").val();
        if(!$openid || $openid == "null"){
            $(".f-toast").show().html("缺失参数！");
            hideMsg();
            return;
        }
        $(".jsPop").show();
        $(".f-loading").show();
        let $url = "/wap/merchant/account/toBind"
        $.ajax({
            url:$url,
            type:"post",
            data:{"loginName":$loginName,"password":$password,"openid":$openid},
            dataType:"json",
            success:function (res){
                $(".jsPop").hide();
                $(".f-loading").hide();
                $(".f-toast").show().html(res.message);
                hideMsg();
                if(res.code == 200){
                    setTimeout("toLocation("+res.data+")",500);
                }
            },error:function (error){
                $(".jsPop").hide();
                $(".f-loading").hide();
                $(".f-toast").show().html("系统异常");
            }
        })
    }
    $(document).keydown(function (event){
        $(event.target).parent("div").next().show();
    })
    $(".f-input-icon").click(function (event){
        let $data = $(event.currentTarget).data();
        $("#"+$data.id).val("");
        $(event.currentTarget).hide();
    })
    function toLocation(id){
        window.location.href = `/wap/merchant/account/list/` + id;
    }
    function hideMsg(){
        setTimeout(function (){
            $(".f-toast").hide();
        },1000)
    }
</script>
</body>
</html>