{eval
    $_HEAD[title] = "会员注册";
}
{include mobile_template('header')}
<div class="form-box">
	<form action="{url member/mobile/do/reg}" method="POST">
        <!--{if $_G['passport_apis']}-->
        <div class="form-item">
            <fieldset>
                <legend>使用合作网站帐号登录：</legend>
                <!--{loop $_G['passport_apis'] $passport_name $passport_title}-->
                    <a href="{url member/login/op/passport_login/type/$passport_name}">
                        <img src="{URLROOT}/static/images/passport/{$passport_name}_n.png">
                        $passport_title
                    </a>
                <!--{/loop}-->  
            </fieldset>
        </div>
        <!--{/if}-->
		<div class="form-item">
            <label>用户名
                <input name="username" id="username" placeholder="请输入用户名" value="" type="text" required>
            </label>
        </div>
        <div class="form-item">
            <label>E-Mail：
                <input name="email" id="email" placeholder="请输入电子邮箱" value="" type="email" required>
            </label>
        </div>
		<div class="form-item">
            <label>密码：
            <input name="password" id="password" placeholder="请输入密码" value="" type="password" required>
            </label>
        </div>
        <div class="form-item">
            <label>确认密码：
            <input name="password2" id="password2" placeholder="请重新输入密码" value="" type="password" required>
            </label>
        </div>
        {if S('member:mobile_verify')}
        <div class="form-item">
            <label>手机号验证：</label>
            <input style="width:200px;" name="mobile" id="mobile" placeholder="请输入手机号" value="" type="text" required>
            <span class="abtn" id="btn_mobile"><a href="javascript:;" onclick="check_mobile();">发送验证码</a></span> 
            <span id="msg_mobile"></span>
        </div>
        <div class="form-item">
            <label>手机号验证码：</label>
            <input style="width:200px;" onblur="check_mobile_verify()" name="mobile_verify" id="mobile_verify" placeholder="请输入手机号验证码" value="" type="text" required>
            <span id="msg_mobile_verify"></span>
        </div>
        {/if}
        <!--{if $MOD['seccode_reg']}-->
        <div class="form-item">
            <label>验证码：
                <div>
                    <input style="width:200px;" name="seccode" id="seccode" placeholder="请输入验证码" value="" type="text" required>
                    <span id="seecode"></span>
                </div>
            </label>
        </div>
        <script type="text/javascript">
        $(function(){
            var sec = $('#seecode').empty();
            var img = $('<img />')
                .css({weight:"80px", height:"25px", cursor:"pointer"})
                .attr("title",'点击更新验证码')
                .click(function() {
                    this.src= Url('modoer/seccode/x/'+getRandom());
                    $('#seecode').show();
                });
            sec.append(img);
            img.click();
        });
        </script>
        <!--{/if}-->
		<div class="form-item">
            <input type="submit" value="注册" name="dosubmit" class="sub_btn" />
        </div>
	</form>
</div>
<script>
function check_mobile(obj) {
    var mobile = $('#mobile').val().trim();
    if(!mobile) {
        alert('请输入手机号码');
        return;
    }
    $.post(Url('member/reg/op/check_mobile'), {'mobile':mobile,'in_ajax':1}, function(data) {
        if(data=='OK') {
            $('#msg_mobile').hide();
            $('#btn_mobile').hide();
            member_mobile_send(mobile);
        } else if(data=='SUCCEED') {
            $('#msg_mobile').html('手机号验证成功。').show();
            $('#btn_mobile').hide();
        } else {
            $('#msg_mobile').html(data).show();
            $('#btn_mobile').show();
        }
    });
}

var mobile_verify_time = 59;
var mobile_verify_time_handle = null;
function member_mobile_send(mobile) {
    if(mobile_verify_time_handle) clearInterval(mobile_verify_time_handle);
    $('#msg_mobile').html('正在发送手机验证码...').show();
    $.post(Url('member/reg/op/send_verify'), {'mobile':mobile,'in_ajax':1}, function(data) {
        data = data.trim();
        $('#msg_mobile').html('').hide();
        if(data=='OK'||is_numeric(data)) {
            if(data=='OK') {
            $('#msg_mobile').html('验证码已发送，请在下方文本框内输入验证码。').show();
            } else if(is_numeric(data)) {
                mobile_verify_time = data;
            }
            mobile_verify_time_handle = window.setInterval(function() {
                if(mobile_verify_time <= 0) {
                    $('#msg_mobile').html('');
                    $('#btn_mobile').show();
                    mobile_verify_time = 59;
                    clearInterval(mobile_verify_time_handle);
                } else {
                    $('#msg_mobile').html('重新发送验证码('+mobile_verify_time--+')').show();
                }
            }, 1000);
        } else if(is_message(data)) {
            myAlert(data);
        } else {
            alert('手机短信发送失败。');
        }
    });
}

function check_mobile_verify() {
    var serial = $('#mobile_verify').val().trim();
    if(serial=='') {
        $('#msg_mobile_verify').html('<span style="color:red">请输入验证码</span>').show();
        return;
    }
    $.post(Url('member/reg/op/check_mobile_verify'), {'serial':serial,'in_ajax':1}, function(data) {
        if(data=='OK') {
            if(mobile_verify_time_handle) clearInterval(mobile_verify_time_handle);
            $('#msg_mobile_verify').html('<span style="color:green">短信验证成功！</span>').show();
        } else {
            $('#msg_mobile').html('<span style="color:red">短信验证失败！</span>').show();
        }
    });
}

$(document).ready(function() {
    check_mobile_verify();
});
</script>
{include mobile_template('footer')}