<style>
    .weui-form {
        padding: 56px 0 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        line-height: 1.4;
        min-height: 100%;
        box-sizing: border-box;
        background-color: #fff;
    }

    .weui-cell {
        padding: 16px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        line-height: 1.41176471;
        font-size: 17px;
        color: rgba(0,0,0,0.9);
    }

    .weui-form__text-area {
        padding: 0 32px;
        color: #000000;
        text-align: center;
    }

    .weui-form__control-area {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin: 48px 0;
    }

    .weui-cells__group_form .weui-cells {
        margin-left: 16px;
        margin-right: 16px;
    }

    .weui-cells__group_form .weui-cell {
        padding: 16px 16px;
    }

    [class*=" weui-icon-"] {
        display: inline-block;
        vertical-align: middle;
        font-size: 10px;
        width: 2.4em;
        height: 2.4em;
        -webkit-mask-position: 50% 50%;
        mask-position: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        background-color: currentColor;
    }

    .weui-cells__group_form .weui-cell_vcode.weui-cell_wrap .weui-input {
        font-size: 17px;
        min-height: 1.88235294em;
    }

    .weui-cells__group_form input, .weui-cells__group_form textarea, .weui-cells__group_form label[for] {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    .weui-input {
        width: 100%;
        border: 0;
        outline: 0;
        -webkit-appearance: none;
        background-color: transparent;
        font-size: inherit;
        color: inherit;
        height: 1.41176471em;
        line-height: 1.41176471;
    }

    .weui-cells__group_form .weui-vcode-btn {
        font-size: 16px;
        padding: 0 12px;
        height: auto;
        width: auto;
        line-height: 2;
        border-radius: 6px;
        color: #06ae56;
        background-color: #f2f2f2;
    }
    button.weui-vcode-btn {
        background-color: transparent;
        border: 0;
        outline: 0;
    }
    button.weui-btn, input.weui-btn {
        border-width: 0;
        outline: 0;
        -webkit-appearance: none;
    }
    .weui-vcode-btn {
        display: inline-block;
        height: 56px;
        margin-left: 5px;
        padding: 0 0.6em 0 0.7em;
        line-height: 56px;
        vertical-align: middle;
        font-size: 17px;
        color: #576b95;
        position: relative;
    }
    .weui-btn_default {
        color: #06ae56;
        background-color: #f2f2f2;
    }
    .weui-btn {
        position: relative;
        display: block;
        width: 184px;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 24px;
        box-sizing: border-box;
        font-weight: 700;
        font-size: 17px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 1.88235294;
        border-radius: 8px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-user-select: none;
        user-select: none;
    }

    .form_vcode {
        height: 85vh;
    }

    .weui-cells__group_form .weui-cell_vcode.weui-cell_wrap .weui-label {
        margin-top: 12px;
    }

    .page.form_input_status .weui-label, .page.form_vcode .weui-label {
        width: 3.14em;
    }
    .weui-cells__group_form .weui-cell_wrap .weui-label {
        margin-top: 8px;
    }
    .weui-cells__group_form input, .weui-cells__group_form textarea, .weui-cells__group_form label[for] {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    .weui-cells__group_form .weui-label {
        max-width: 5em;
        margin-right: 8px;
    }
    .weui-cells__group_form .weui-cell__control {
        margin: 8px 0 8px 16px;
    }

    .weui-btn {
        position: relative;
        display: block;
        width: 184px;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 24px;
        box-sizing: border-box;
        font-weight: 700;
        font-size: 17px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 1.88235294;
        border-radius: 8px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-user-select: none;
        user-select: none;
    }

    .weui-toast {
        position: fixed;
        z-index: 5500;
        font-size: 10px;
        width: 13.6em;
        height: 13.6em;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        text-align: center;
        border-radius: 12px;
        color: rgba(255,255,255,0.9);
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        background-color: #4c4c4c;
        box-sizing: border-box;
        line-height: 1.4;
    }

    .weui-toast_text {
        width: auto;
        height: auto;
        min-width: 152px;
        max-width: 216px;
        padding: 12px 0;
        border-radius: 8px;
    }

    .weui-toast_text .weui-toast__content {
        font-size: 14px;
        padding: 0 20px;
    }

    .weui-btn[disabled] {
        color: rgba(0,0,0,0.2);
        background-color: #f2f2f2;
    }

</style>
<div class="page form_vcode js_show" tabindex="-1">
    <input type="hidden" value="<?= $openid ?>" id="input-openid">
    <div class="weui-form">
        <div class="weui-form__text-area">
            <h2 class="weui-form__title">手机号绑定</h2>
<!--            <div class="weui-form__desc" id="">--><?//= $openid ?><!--</div>-->
        </div>
        <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <span class="weui-cell__control">+86</span>
                        <div class="weui-cell__bd">
                            <input id="input-mobile" class="weui-input weui-cell__control" type="number" placeholder="请输入手机号" value="">
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label for="js_input1" class="weui-label">验证码</label></div>
                        <div class="weui-cell__bd">
                            <input id="input-captcha" class="weui-input weui-cell__control" type="number" pattern="[0-9]*" placeholder="请输入验证码" value="">
                        </div>
                        <div class="weui-cell__ft">
                            <button id="captchaBtn" role="button" onclick="getCaptcha()" class="js_target weui-cell__control weui-btn weui-btn_default weui-vcode-btn weui-btn_loading">获取验证码</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-form__opr-area">
<!--            <button class="weui-btn weui-btn_primary" type="button" style="width: 184px" id="submitBtn" onclick="submit()"><i class="weui_icon_msg weui_icon_success"></i>确定</button>-->
            <button disabled class="weui-btn weui-btn_primary" type="button" style="width: 184px" id="submitBtn" onclick="submit()"><i class="weui_icon_msg weui_icon_success"></i>确定</button>
        </div>
    </div>
    <div role="alert" id="textToast" style="opacity:0;display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast weui-toast_text">
            <p class="weui-toast__content">文字提示</p>
        </div>
    </div>
</div>
<script>
    //ajax post请求获取接口数据
    var ajaxPost = function (reqUrl, params, callback, async) {
        var xhr = null;
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(!xhr) { return false;}
        if (async && callback) {
            xhr.addEventListener('readystatechange', function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    callback(JSON.parse(xhr.responseText));
                }
            });
        }
        xhr.open('post', reqUrl, async);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        var strArr = [];
        for(var k in params) {
            strArr.push(k + "=" + params[k]);
        }
        var data = strArr.join("&");
        xhr.send(data);
        if (!async) {
            return xhr.responseText;
        }
    };

    /**
     * 获取手机号验证码
     */
    function getCaptcha() {
        let mobile = document.getElementById('input-mobile').value;

        if (!mobile || !/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(mobile)) {
            topTips('请输入正确的手机号')
            return
        }

        ajaxPost('<?= $host ?>' + '/wechat/bind-captcha', {
            'mobile': document.getElementById('input-mobile').value,
            'openid': document.getElementById('input-openid').value,
        }, (e) => {
            if (e.code === 200) {
                topTips('验证码发送成功', 'success')
                setTimer();
                // 让确定按键可以点
                document.getElementById('submitBtn').attributes.removeNamedItem('disabled')
                // 发验证码了就不让改手机号
                document.getElementById('input-mobile').attributes.setNamedItem(document.createAttribute('disabled'))
            } else {
                topTips(e.msg)
            }
        }, true)
    }

    // 计时器句柄
    let timerHandler = 0;

    // 发送验证码速率
    let totalTimer = 60;

    function setTimer() {
        const el = document.getElementById('captchaBtn');
        let attr = document.createAttribute('disabled')
        el.attributes.setNamedItem(attr)

        if (timerHandler) {
            clearInterval(timerHandler)
            totalTimer = 60
        }

        el.textContent = `获取验证码(${totalTimer}S)`;
        timerHandler = setInterval(() => {
            totalTimer--;
            el.textContent = `获取验证码(${totalTimer}S)`;
            if (totalTimer === 0) {
                clearInterval(timerHandler)
                el.textContent = `获取验证码`;
                el.attributes.removeNamedItem('disabled')
            }
        }, 1000)
    }

    function submit() {
        document.getElementById('submitBtn').attributes.setNamedItem(document.createAttribute('disabled'))
        ajaxPost('<?= $host ?>' + '/wechat/bind-submit', {
            'mobile': document.getElementById('input-mobile').value,
            'captcha': document.getElementById('input-captcha').value,
            'openid': document.getElementById('input-openid').value,
        }, (e) => {
            if (e.code === 200) {
                alert('绑定成功');
                WeixinJSBridge.call('closeWindow');
            } else {
                topTips(e.msg)
            }
            document.getElementById('submitBtn').attributes.removeNamedItem('disabled')
        }, true)
    }

</script>
