<style>
    .login-section .control-label {
        font-weight: normal;
    }
</style>
<div id="content-container" class="container">
    {if isset($userinfo['avatar'])}
    <div class="text-center">
        <img src="{$userinfo.avatar}" class="img-circle" width="80" height="80" alt=""/>
        <div style="margin-top:15px;">{$userinfo.nickname|default=''|htmlentities}</div>
    </div>
    {/if}
    <div class="user-section login-section" style="margin-top:20px;">
        <div class="bind-main login-main">
            <h3 class="text-center mt-0 mb-4">绑定账号</h3>
            <form name="form" id="bind-form" class="form-vertical" method="POST" action="">
                {:token()}
                <input type="hidden" name="platform" value="{$platform|htmlentities}"/>
                <input type="hidden" name="url" value="{$url|htmlentities}"/>
                <div class="form-group">
                    <label class="control-label">手机号</label>
                    <div class="controls">
                        <input type="text" id="mobile" name="mobile" data-rule="required" class="form-control input-lg">
                        <p class="help-block"></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">验证码</label>
                    <div class="controls">
                        <div class="input-group">
                            <input type="text" name="captcha" class="form-control input-lg" data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_sms_correct')}, event=bind, mobile:#mobile)" />
                            <span class="input-group-btn" style="padding:0;border:none;">
                                <a href="javascript:;" class="btn btn-info btn-captcha btn-lg" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="bind">发送验证码</a>
                            </span>
                        </div>
                        <p class="help-block"></p>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block btn-lg">{:__('确认绑定')}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    require.callback = function () {
        define('frontend/third', ['jquery', 'bootstrap', 'frontend', 'template', 'form'], function ($, undefined, Frontend, Template, Form) {
            var Controller = {
                prepare: function () {
                    var validatoroptions = {
                        invalid: function (form, errors) {
                            $.each(errors, function (i, j) {
                                Layer.msg(j);
                            });
                        }
                    };

                    //本地验证未通过时提示
                    $("#register-form").data("validator-options", validatoroptions);

                    //为表单绑定事件
                    Form.api.bindevent($("#bind-form"), function (data, ret) {
                        location.href = ret.url;
                        return false;
                    }, function (data, ret) {

                    });

                }
            };
            return Controller;
        });
    }
</script>