{extend name="./main"}
{block name="content"}
<style>
    .ymm-login-logo {
        width: auto;
    }

    .span_check_tip, #newusernameTip, #password1Tip, #password2Tip, #newqqTip, #newemailTip {
        color: orangered;
        margin-left: 10px;
    }

    .user_input {
        position: relative;
    }
    @media only screen and (min-width: 768px) {
        .layui-layer-iframe{min-height: 400px;}

    }
    @media only screen and (max-width: 768px) {
        .layui-layer-iframe{width: 80%!important;}

    }
</style>
<link rel="stylesheet" href='__RES__/app/t3/css/zhuce.css'>
<link rel="stylesheet" href="__RES__/app/t3/css/common-forth.css">
<!--中间内容start-->
<div class="saas-body">

    <div class="content">
        <!--页面标题-->
        <div class="bl-approve">
            <span class="h2">账号注册</span>
        </div>
        <!-- 浏览器提示框start-->
        <div class='bl-browser'>
            <ul class="float-clear show-icon">
                <li class='float-l bl-font-recor'>建议以下浏览器操作：</li>
                <li class='float-l bl-fox'><img src="__RES__/app/t3/image/fox.png" alt="Firefox(火狐)"/></li>
                <li class='float-l bl-google'><img src="__RES__/app/t3/image/google.png" alt="Chrome(谷歌)"/></li>
                <li class='float-l bl-safari'><img src="__RES__/app/t3/image/safari.png" alt="Safari"/></li>
                <li class='float-l bl-sg'><img src="__RES__/app/t3/image/sg.png" alt="搜狗"/></li>
                <li class='float-l bl-lb'><img src="__RES__/app/t3/image/lb.png" alt="猎豹"/></li>
                <li class='float-l bl-opra'><img src="__RES__/app/t3/image/opra.png" alt="Opera(欧朋)"/></li>
            </ul>
        </div>
        <!-- 浏览器提示框end-->
        <!--页面主体start-->
        <div class="ymm-zhuce">
            <form method="post" class="ymm-form ymm-form-zhuce" action="/register/regsave" id="reg" name="reg"
                  autocomplete="off">
                <input type="hidden" name="spread_userid" value="{$Think.get.user_id}">
                <ul>
                    <li class="float-clear">
                        <label class="float-l" for="">手机号码<span>*</span></label>
                        <div class="ymm-form-ipt float-l">
                            <div class="form-group">
                                <input id="newusername" class="form-control" name="reginfo[username]" type="text"
                                       placeholder="请输入11位手机号码" autocomplete="off"/ >

                            </div>

                        </div>
                        <span id="newusernameTip" class="span_check_tip"></span>
                    </li>
                    <li class="float-clear">
                        <label class="float-l" for="">密码<span>*</span></label>
                        <div class="ymm-form-ipt float-l">
                            <div class="form-group">
                                <input class="form-control" id="password1" name='reginfo[password]' type="password"
                                       placeholder="字母、数字或者特殊字符，长度为8-16位，区分大小写">

                            </div>


                        </div>
                        <span id="password1Tip" class="span_check_tip"></span>
                    </li>
                    <li class="float-clear">
                        <label class="float-l" for="">确认密码<span>*</span></label>
                        <div class="ymm-form-ipt float-l">
                            <div class="form-group">
                                <input class="form-control" id="password2" name='reginfo[confirmpassword]'
                                       type="password" placeholder="字母、数字或者特殊字符，长度为8-16位，区分大小写">

                            </div>


                        </div>
                        <span id="password2Tip" class="span_check_tip"></span>
                    </li>
                    <li class="float-clear">
                        <label class="float-l" for="">QQ<span>*</span></label>
                        <div class="ymm-form-ipt float-l" style="margin-bottom:10px;">
                            <div class="form-group">
                                <input id="newqq" class="form-control" name="reginfo[qq] type=" number"
                                autocomplete="off"/ >

                            </div>

                        </div>
                        <span id="newqqTip" class="span_check_tip"></span>
                    </li>
                    <li class="float-clear">
                        <label class="float-l" for="">邮箱<span>*</span></label>
                        <div class="ymm-form-ipt float-l">
                            <div class="form-group">
                                <input class="form-control" name="reginfo[email]" type="text" autocomplete="off"
                                       id="newemail"/>

                            </div>

                        </div>
                        <span id="newemailTip" class="span_check_tip"></span>
                    </li>
                    {if sysconf('site_register_smscode_status')==1}
                    <li class="float-clear">
                        <label class="float-l" for="">验证码<span>*</span></label>
                        <div class="ymm-form-ipt float-l">
                            <div class="form-group">
                                <input style="width:255px;" class="form-control ymm-login-code-ipt"
                                       name="reginfo[chkcode]"
                                       type="number" id="code"/>
                                <input style="margin-left:6px;" type="button" class="common-btn-code" value="短信验证码"
                                       id="click_checkcode">
                                <input type="hidden" value="" id="trace">
                            </div>
                            <p>6位数字的短信验证码</p>
                        </div>
                    </li>
                    {/if}
                    {if sysconf('spread_invite_code')==1}
                    <li class="float-clear">
                        <label class="float-l" for="">邀请码</label>
                        <div class="ymm-form-ipt float-l" style="margin-bottom:10px;">
                            <div class="form-group">
                                <input id="invite_code" class="form-control" name="reginfo[invite_code]" type="text" autocomplete="off"  placeholder="{if sysconf('is_need_invite_code')==1}必填{else}选填{/if}"/ >

                            </div>

                        </div>
                        <span id="invite_codeTip" class="span_check_tip"></span>
                    </li>
                    {/if}
                </ul>
                <div class="ymm-zhuce-bot">
                    <div class="ymm-prompt form-group">
                        <input style="display:inline-block;margin-top:-3px" id="check" class="checkbox" name="agree" type="checkbox">
                        <span class="color1">阅读并同意<a id="agreement" href="javascript:;" target="_blank" style="margin-top:-1px;display:inline-block">《服务协议》</a> </span>
                    </div>
                    <div class="ymm-btn">
                        <input class="common-btn-much" type="button" id="regBtn" value="注册">
                    </div>
                </div>
            </form>
        </div>
        <!--页面主体end-->
    </div>
</div>
<!--中间内容end--></div>
<script type="text/javascript">
    $(function () {
        $('#click_checkcode').on('click', getCode);
    });

    function getCode() {
        var phone = $('#newusername').val();
        //var name=$('#newusername').val();
        var reg = /\d{11}/;
        if (phone == '' || !reg.test(phone)) {
            alert('请填写正确的手机号码！');
            $('#newusername').focus();
            return false;
        }
        layer.prompt({
            title: '请输入验证码',
            formType: 3
        }, function (chkcode) {
            $('#click_checkcode_phone').off('click');
            $.post('/register/sms', {
                chkcode: chkcode,
                token: token,
                phone: phone,
                t: new Date().getTime()
            }, function (ret) {
                //                        console.log(ret);
                if (ret.code === 1) {
                    layer.closeAll();
                    layer.msg(ret.msg);
                    token = ret.data.token;
                    $('#click_checkcode_phone').html('<i class="times">80</i> 秒后重发');
                    timeC(80, '#click_checkcode_phone');
                } else {
                    alert(ret.msg);
                    $('#click_checkcode_phone').on('click', getCode);
                }
            }, 'json');
        })
        $('.layui-layer-prompt .layui-layer-content').prepend($(
            '<img style="cursor:pointer;height: 60px;" id="chkcode_img" src="/chkcode" onclick="javascript:this.src=\'/chkcode\'+\'?time=\'+Math.random()">'
        ))
    }

    function timeC(t) {
        if (t == 0) {
            $('.getcode .code').on('click', getCode);
            $('.getcode a i.t').text('获取验证码');
        } else {
            t = t - 1;
            $('.getcode a i.times').text(t);
            setTimeout('timeC(' + t + ')', 1000);
        }
    }

    $(function () {
        $("#newusername").focus();

        $("#r2").click(function () {
            $(".btn-code").attr("disabled", true);
            $(".btn-code").addClass('notallowsubmit');
        });

        $("#r1").click(function () {
            $(".btn-code").attr("disabled", false);
            $(".btn-code").removeClass('notallowsubmit');
        });

        $.formValidator.initConfig({
            formid: "reg", onerror: function (msg) {
                alert(msg)
            }, onsuccess: function () {
                return true;
            }
        });
        $("#newusername").formValidator({
            onshow: " ",
            onfocus: "请输入11位手机号",
            onempty: "手机号码是您登录账户的凭证，一定要填写哦",
            oncorrect: "<font color=green>√该用户名可以注册</font>"
        }).inputValidator({
            min: 11,
            max: 11,
            onerror: "你填写的手机号码长度不正确,请确认"
        }).regexValidator({regexp: "mobile", datatype: "enum", onerror: "你输入的不是11位手机号码"})
            .ajaxValidator({
                type: "get",
                url: "/register/checkuser",
                success: function (data) {
                    if (data == 0) {
                        return true;
                    } else {
                        return false;
                    }
                },
                buttons: $(".btn_zc"),
                error: function () {
                    alert("服务器没有返回数据，可能服务器忙，请重试！");
                },
                onerror: "<font color=red> * 该用户名已被使用，请更换！</font>",
                onwait: "正在对用户名进行合法性校验，请稍候..."
            });

        $("#newemail").formValidator({
            onshow: " ",
            onfocus: "用于找回密码、接收校验信息等操作",
            oncorrect: "<font color=green> √ 邮箱地址填写完成</font>",
            defaultvalue: ""
        }).inputValidator({
            min: 6,
            max: 100,
            onerror: "你填写的邮箱地址长度不正确,请确认"
        }).regexValidator({
            regexp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
            onerror: "你填写的邮箱格式不正确"
        });
        $("#newidcard").formValidator({
            empty: true,
            onshow: "身份证",
            onfocus: "身份证",
            oncorrect: "请确认无误，注册后不能修改。",
            onempty: "注册后不能修改"
        }).inputValidator({max: 18, onerror: "最多18位字符"});
        $("#newqq").formValidator({
            onshow: " ",
            onfocus: "请填写联系QQ号码",
            oncorrect: "<font color=green> √ QQ填写完成</font>",
            onempty: "QQ一定填写哦"
        }).inputValidator({min: 5, max: 12, onerror: "QQ号最少5位，最多11位数字"}).regexValidator({
            regexp: "qq",
            datatype: "enum",
            onerror: "您输入的QQ帐号不正确"
        });
        $("#password1").formValidator({
            onshow: " ",
            onfocus: "密码不能为空",
            oncorrect: "<font color=green> √ 密码填写完成</font>"
        }).inputValidator({
            min: 8,
            empty: {leftempty: false, rightempty: false, emptyerror: "密码两边不能有空符号"},
            onerror: "密码长度为8-16位,请确认"
        });
        $("#password2").formValidator({
            onshow: " ",
            onfocus: "两次密码必须一致哦",
            oncorrect: "<font color=green> √ 密码一致</font>"
        }).inputValidator({
            min: 8,
            empty: {leftempty: false, rightempty: false, emptyerror: "重复密码两边不能有空符号"},
            onerror: "密码长度为8-16位,请确认"
        }).compareValidator({desid: "password1", operateor: "=", onerror: "2次密码不一致,请确认"});
        $('#regBtn').click(function () {
            if ($(".onError").length > 0) {
                layer.msg($(".onError").first().text());
                return false;
            }
            if(false === $("#check").is(':checked')) {
                layer.msg('请先同意服务协议');
                return false;
            }
            var loading = '';
            $.ajax({
                type: 'post',
                url: '/index/user/doRegister',
                dataType: "json",
                data: $("form").serialize(),
                beforeSend: function (xhr) {
                    loading = layer.load()
                },
                success: function (res) {
                    layer.close(loading);
                    if (res.code == 1) {
                        layer.alert(res.msg, function () {
                            window.location.href = '/merchant';
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(loading);
                    layer.msg('连接错误');
                }
            });
        })
        $('#agreement').click(function(){
            layer.open({
                type: 2,
                title: '服务协议',
                area: ['60%'],
                anim: 2,
                content: ['/index/index/agreement']

            });
        })
    });
</script>
{/block}
