xiaogang
/
chengluApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邀请注册</title>
    <script src="js/mui.min.js"></script>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div class="title">欢迎来到橙π</div>
<div class="content">
<!--    <form action="" onsubmit="return checkForm()">-->
        <!-- 手机号 -->
        <div class="out-box phone">
            <div class="inner-box">
                <div class="icon">
                    <img class="icon-img" src="./images/phone.png">
                </div>
                <div class="line"></div>
                <div class="input">
                    <input id="phone" type="number" placeholder="请输入手机号码"/>
                </div>
            </div>
        </div>
        <!-- 验证码 -->
        <div class="out-box validcode">
            <div class="inner-box">
                <div class="icon">
                    <img class="icon-img" src="./images/validcode.png">
                </div>
                <div class="line"></div>
                <div class="input">
                    <input id="valid" type="number" placeholder="请输入验证码"/>
                    <input type="hidden" id="code_verify">
                </div>
                <div class="btn-code" id="btn-code">获取验证码</div>

            </div>
        </div>
        <!-- 密码 -->
        <div class="out-box password">
            <div class="inner-box">
                <div class="icon">
                    <img class="icon-img" src="./images/password.png">
                </div>
                <div class="line"></div>
                <div class="input">
                    <input id="password" type="password" placeholder="请输入密码"/>
                </div>
                <div class="btn-password" id="btn-password">
                    <img class="btn-password-img" src="./images/biyan.png" alt="">
                </div>
            </div>
        </div>
        <!-- 邀请码 -->
        <div class="out-box yaoqingma">
            <div class="inner-box">
                <div class="icon">
                    <img class="icon-img" src="./images/email.png">
                </div>
                <div class="line"></div>
                <div class="input">
                    <input id="ycode" type="text" placeholder="请输入邀请码"/>
                </div>
            </div>
        </div>
        <!-- 协议 -->
        <div class="protocol">
            <label class="checkbox">
                <span id="check1" class="chk" style="width: 0.56rem;
    height: 0.56rem;
    background-color: transparent;
    -webkit-appearance: none;
    border: 2px solid #979797;
    border-radius: 12px;
    outline: none;"></span>
                <img id="check2" class="icon-img" src="./images/check.png" style="width: 0.56rem;    height: 0.56rem; display: none">
            </label>
            <p class="txt xiey">登录即表示同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私协议》</a></p>
        </div>
        <!-- 提交 -->
        <input id="submit" type="submit" value="注册"/>
<!--    </form>-->


</div>

<div class="Mask" style="display: none;">
    <div id="content">
        <p class="name">用户协议</p>
        <p class="neir"></p>
        <p class="btn">确定</p>
    </div>
</div>
<script type="text/javascript" charset="utf-8">
    mui.init();

    var yhxy = "";
    var ysxy = "";
    //协议
    $.ajax({
        url: 'https://t22.9026.com/api/login/xieyi?id=1&cont=1',
        type: 'get',
        data: {},
        dataType: 'json',
        success: function (res) {
            yhxy = res.data.content;
            //$('.neir').append(res.data.content);
        }
    })
    $.ajax({
        url: 'https://t22.9026.com/api/login/xieyi?id=2&cont=1',
        type: 'get',
        data: {},
        dataType: 'json',
        success: function (res) {
            ysxy = res.data.content;
            //$('.neir').append(res.data.content);
        }
    })
    //获取短信验证码
    var codeBtn = true, time = 120, timer;
    $("#btn-code").on("click", function () {
        if (codeBtn) {
            var tel = $("#phone").val();
            <!-- var pic=$("#pic").val(); -->
            if (tel.length != 11) {
                return mui.toast('手机号码格式不对！',{ duration:'long', type:'div' });
            }
            <!-- if(pic.length!=4){ -->
            <!-- return mui.toast('图片验证码错误！'); -->
            <!-- } -->
            codeBtn = false;
            $.ajax({
                type: "get",
                url: "https://t22.9026.com/api/sms/send",
                dataType: "JSON",
                data: {
                    mobile: tel,
                    event: 'login',
                },
                success: function (data) {
                    if (data.verifyKey) {
                        $('#code_verify').val(data.verifyKey)
                        mui.toast('短信发送成功');

                        $(".codeBtn").html(time + 's');
                        timer = setInterval(function () {
                            if (time > 0) {
                                time--;
                                $("#btn-code").html(time + 's');
                            } else {
                                clearInterval(timer);
                                time = 120;
                                codeBtn = true;
                                $("#btn-code").html('重新获取');
                            }
                        }, 1000)
                    } else {
                       // $(".img").click();
                        codeBtn = true;
                    }
                }
            });
        }
    })

    //
    $('.checkbox').on("click",function (){


    })


    //注册
    var regBtn = true, xieyBtn = true;
    $("#submit").on("click", function () {
        if (regBtn) {
            var tel = $("#phone").val();
            var msg = $("#valid").val();
            var pwd = $("#password").val();
            var ycode = $("#ycode").val();
            var verifyKey = $("#code_verify").val();
            if (tel.length != 11) {
                return mui.toast('手机号码格式不对！');
            }
            if (msg.length != 4) {
                return mui.toast('短信验证码错误！');
            }
            if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(pwd))) {
                return mui.toast('密码格式错误！');
            }

            if (xieyBtn) {
                return mui.toast('请先勾选隐私协议');
            }
            regBtn = false;
            $.ajax({
                type: "POST",
                url: "https://t22.9026.com/api/login/reg_h5",
                dataType: "JSON",
                data: {
                    mobile: tel,
                    password: pwd,
                    smsCode: msg,
                    ycode: ycode,
                    verifyKey: verifyKey
                },
                success: function (data) {
                    mui.toast(data.message);
                    if (data.code == 1) {
                        setTimeout(function () {
                            window.location.href = './download.html'
                        }, 1000)
                    } else {
                        regBtn = true;
                    }
                    regBtn = true;
                }
            });
        }
    })
    //
    $(".xiey").on("click", function () {
        if (xieyBtn) {
            xieyBtn = false;
            $('#check1').show();
            $('#check2').hide();
        } else {
            xieyBtn = true;
            $('#check1').hide();
            $('#check2').show();
        }
    })

    //
    $(".checkbox").on("click", function () {
        if (xieyBtn) {
            xieyBtn = false;
            $('#check1').show();
            $('#check2').hide();
        } else {
            xieyBtn = true;
            $('#check1').hide();
            $('#check2').show();
        }
    })
    //打开协议
    $(".xiey a:first").on("click", function () {
        $('.neir').append(yhxy);
        $('.name').html("用户协议");
        $(".Mask").fadeIn(300);
    })
    $(".xiey a:last").on("click", function () {
        $('.neir').append(ysxy);
        $('.name').html("隐私协议");
        $(".Mask").fadeIn(300);
    })
    //关闭协议
    $(".btn").on("click", function () {
        $(".Mask").fadeOut(300);
    })

    //眼睛
    $("#btn-password").on("click", function () {
        if ($('#password').attr('type') == 'password') {
            $(this).children('img').attr('src', 'images/eye.png')
            $('#password').attr('type', 'text');
        } else {
            $(this).children('img').attr('src', 'images/biyan.png')
            $('#password').attr('type', 'password');
        }
    })
</script>
</body>
</html>

<script type="text/javascript">
    $(function () {
        $('#ycode').val(getUrlParam('invoce'));
    });

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);//匹配目标参数
        if (r != null) return unescape(r[2]);
        return null;//返回参数值
    }
</script>
</body>
</html>