<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{:sysconf('site_name')}{:sysconf('site_subtitle')}</title>
    <meta name="keywords" content="{:sysconf('site_keywords')}" />
    <meta name="description" content="{:sysconf('site_desc')}" />
    <link rel="shortcut icon" href="{:sysconf('browser_icon')}" />
    <!-- Bootstrap -->
    <link href="__RES__/app/default/css/bootstrap.min.css" rel="stylesheet">
    <!--custom css-->
    <link rel="stylesheet" href="__RES__/app/default/css/style.css">
    <link rel="stylesheet" href="__RES__/app/default/css/responsive.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        input, button, select, textarea{
            line-height: normal;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1" data-offset="100">
{include file="./default_header"}
<section class="shop_banner">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 hero_text">
                <h2 class="hero_title">全新发卡体验</h2>
                <p> 加入我们，打开你的成功之门! </p>
            </div>
        </div>
    </div>
</section>
<section class="user-login">
    <div class="user_form" style="padding: 40px;">

        <form class="form-inline" id="auth-form" method="post">

            <div class="form-group">
                <label class="sr-only">邮件验证</label>
                <p class="form-control-static">邮件验证</p>
            </div>

            <div class="form-group" style="margin: 20px 0 30px 0;width:100%;">
                <label for="inputPassword2" class="sr-only">邮件验证</label>
                <div class="input-group" style="width:100%;">
                    <input type="text" class="form-control" name="code" placeholder="请输入邮件验证码">
                    <div class="input-group-addon"><span style="cursor: pointer;" id="sendSms">发送验证邮件</span></div>
                </div>
            </div>

        </form>

        <button id="submit" type="button" class="btn btn-default">提交</button>

    </div>
</section>
{include file="./default_footer"}


<script src="__RES__/app/default/js/jquery-2.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="__RES__/plugs/bootstrap/js/bootstrap.min.js"></script>
<script src="__RES__/app/js/layer.js"></script>

<script>
    var time = "{$waitSeconds|default=0}"

    $(function(){
        $('#sendSms').click(function(){
            if(time > 0){
                return;
            }

            $.post('/index/user/sendAuthEmail',{},function(res){
                var icon = 2;

                if(res.code==200){
                    time = res.data;
                    icon = 1;
                    setCountDown();
                }

                layer.msg(res.msg,{icon:icon});
            },'json');
        })

        $('#submit').click(function(){
            if(checker()){
                var data = $('#auth-form').serialize()
                $.post("{:url('index/user/emailAuth')}",data,function(res){
                    if(res.code == 302){
                        layer.msg(res.msg,{icon:1},function(){
                            location.href=res.url
                        })
                    }else{
                        layer.msg(res.msg,{icon:2})
                    }
                },'json')
            }

        })
    })

    function checker(){
        if(! /\d{4}/.test($('[name=code]').val())){
            layer.msg('请输入验证码，验证码至少4位');
            return false;
        }
        return true;
    }

    function setCountDown() {
        var thread = null;
        if(time > 0){
            thread = setInterval(function(){
                time--
                $('#sendSms').text(time);
                if(time <= 0){
                    clearInterval(thread)
                    $('#sendSms').text('发送验证邮件');
                }
            },1000)
        }
    }
</script>
</body>
</html>
