register.html 10.5 KB
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <include file="public@head_common"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/myweui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/register_login/register.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/augly.css" />
    <title>注册</title>
</head>
<body>
<!--<div class="header">
        <div class="return"><i class="iconfont icon-jiantou-copy"></i>返回</div>
        巧虎
    </div>-->
<!--banner-->
<div class="test_num"></div>
<div class="banner" style="background: url({:cmf_get_asset_url($slide['image'])}) center no-repeat;background-size: 100% 4.36rem;"></div>
<!--register-->
<div class="register_item baby_name">
    <div class="text_item fitst_text">
        <p class="text_tit">宝宝姓名</p>
        <input type="text" name="baby_name" id="baby_name" value="" class="baby_input" placeholder="请输入宝宝的姓名" />
    </div>
    <div class="text_item" id="birthday">
        <p class="text_tit">宝宝生日</p>
        <input type="text" name="baby_birth" readonly="readonly" value="" id="birthday_input" class="baby_input" placeholder="请选择宝宝生日" />
        <img src="__TMPL__/public/mobile/images/youjiantou.png" class="jiantou" />
    </div>
</div>

<div class="register_item parent_name">
    <div class="text_item fitst_text">
        <p class="text_tit">家长姓名</p>
        <input type="text" name="parent_name" id="parent_name" value="" class="baby_input" placeholder="请输入家长的姓名" />
    </div>

    <div class="parent_tit">家长身份</div>
    <div class="input_wrap parent_status">
        <p class="parent_input input_item" data-name="母亲">
            母亲
        </p>
        <p class="parent_input input_item active" data-name="父亲">
            父亲
        </p>
        <p class="parents_input input_item" data-name="祖父母/外祖父母">
            祖父母/外祖父母
        </p>
        <p class="parent_input input_item" data-name="其他">
            其他
        </p>
    </div>

    <div class="parent_tit">是否为<span class="tiger_vip">巧虎会员&gt;</span></div>
    <div class="vip_text">当前在订购《乐智小天地·巧虎》商品的用户。</div>
    <div class="input_wrap is_member">
        <p class="parent_input choose_vip" data-type="1">

        </p>
        <p class="parent_input choose_vip active" data-type="0">

        </p>
    </div>
</div>

<div class="register_item parent_name">
    <div class="text_item fitst_text">
        <p class="text_tit">手机号</p>
        <input type="text" name="mobile" id="mobile" value="" class="baby_input" placeholder="请输入您的手机号" />
    </div>
    <div class="text_item">
        <p class="text_tit">验证码</p>
        <input type="number" name="code" id="code" maxlength="6" value="" class="baby_input" placeholder="请输入验证码" />
        <p class="get_num">获取</p>
    </div>
</div>

<div class="register_item parent_name agreement">
    <img src="__TMPL__/public/mobile/images/register.png" class="agreement_icon" />
    <p class="agreement_text">《{$info.post_title}》</p>
    <p class="text_detail">{$info.post_excerpt}</p>
</div>

<div class="agree">
    <input type="checkbox" name="" id="" value="" class="agree_agreement" checked />
    <p>已阅读并同意<span>《{$info.post_title}》</span></p>
</div>

<div class="btn">
    注册
</div>

<div class="bottom_icon">
    <img src="__TMPL__/public/mobile/images/biglogo@2x.png" class="bottom_img" />
    <p class="bottom_text">{$site_info.site_name}</p>
</div>

<!--选择支付方式-->
<div class="mask" style="">
    <!--订单修改-->
    <div class="order_lose" style="display: block;">
        <div class="order_lose_pic">
            <img src="__TMPL__/public/mobile/images/tucengs.png" />
        </div>
        <div class="lose_text" style="height: 2.34rem;">
            <img src="__TMPL__/public/mobile/images/closeimg.png" class="change_close close" />
            <p class="change_text_o">对不起,当前功能已暂停</p>
            <p class="change_btnt">确认</p>
        </div>
    </div>
</div>

<script src="__TMPL__/public/mobile/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/weui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/myweui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {

    })
    $('#birthday').click(function() {
        weui.datePicker({
            start: 2000,
            end: 2030,
            defaultValue: [2015, 6, 9],
            onChange: function(result) {
                console.log(result);
                //					$('.#birthday_input').val(result)
            },
            onConfirm: function(result) {
                var birthday = result[0].label + result[1].label + result[2].label
                console.log(birthday)
                $('#birthday_input').val(birthday)
            },
            id: 'datePicker'
        });
    })

    $('.input_item').click(function() {
        $(this).addClass('active').siblings().removeClass('active')
    });
    $('.choose_vip').click(function() {
        $(this).addClass('active').siblings().removeClass('active')
    });
    $('.tiger_vip').click(function() {
        $('.vip_text').toggle()
    });
    // 关闭成功弹出框
    $('.change_close').click(function() {
        location.href = "{:url('portal/index/index')}";
    });
    $('.change_btnt').click(function() {
        location.href = "{:url('portal/index/index')}";
    });
    var popup_switch = true;
    $('.btn').click(function() {
        var baby_name = $('input[name=baby_name]').val();
        var baby_birth = $('input[name=baby_birth]').val();
        var parent_name = $('input[name=parent_name]').val();
        var parent_status = $('.parent_status').find('.active').data('name');
        var is_member = $('.is_member').find('.active').data('type');
        var mobile = $('input[name=mobile]').val();
        var reg = /^1(3|4|5|7|8|9)\d{9}$/;
        var code = $('input[name=code]').val();
        if(baby_name.length == 0){
            _error("请输入宝宝姓名");
            return false;
        } else if(baby_birth.length == 0){
            _error("请选择宝宝生日");
            return false;
        } else if(parent_name.length == 0){
            _error("请输入家长姓名");
            return false;
        } else if(!(reg.test(mobile))){
            _error("手机号码错误");
            return false;
        } else if(code.length != 6){
            _error("验证码错误");
            return false;
        } else {
            var data = {
                baby_name: baby_name,
                baby_birth: baby_birth,
                parent_name: parent_name,
                parent_status: parent_status,
                is_member: is_member,
                mobile: mobile,
                code: code
            };
            $.ajax({
                url: "{:url('user/Register/doRegister')}",
                type: "POST",
                data: data,
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        _error(res.msg);
                        setTimeout(function() {
                            window.location.href = res.url;
                        },1000);
                    } else {
                        _error(res.msg);
                    }
                }
            });
        }
    });


    var get_switch = true;
    $('.get_num').click(function() {
        var baby_name = $('input[name=baby_name]').val();
        var baby_birth = $('input[name=baby_birth]').val();
        var parent_name = $('input[name=parent_name]').val();
        var mobile = $('input[name=mobile]').val();
        var reg = /^1(3|4|5|7|8|9)\d{9}$/;
        if(baby_name.length == 0){
            _error("请输入宝宝姓名");
            return false;
        } else if(baby_birth.length == 0){
            _error("请选择宝宝生日");
            return false;
        } else if(parent_name.length == 0){
            _error("请输入家长姓名");
            return false;
        } else if(!(reg.test(mobile))){
            _error("手机号码错误");
            return false;
        } else {
            if(get_switch) {
                var data = {
                    mobile: mobile
                };
                $.ajax({
                    url: "{:url('user/Common/sendCode')}",
                    type: "POST",
                    data: data,
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            _error(res.msg);
                            get_switchs();
                        } else {
                            _error(res.msg);
                        }
                    }
                });
            }
        }
    });

    // 弹窗提示
    function _error(test) {
        if(popup_switch) {
            popup_switch = false;
            $('.test_num').html(test);
            $('.test_num').removeClass('Augly-fadeout');
            $('.test_num').addClass('Augly-fadein');
            $('.test_num').show();
            setTimeout(function() {
                $('.test_num').removeClass('Augly-fadein');
                $('.test_num').addClass('Augly-fadeout');
                popup_switch = true
            }, 1500)
        } else {
            popup_switch = true
        }
    }

    // 倒计时
    function get_switchs() {
        console.log(get_switch);
        if(get_switch) {
            get_switch = false;
            $('.get_num').html('60' + 's')
            var num = parseInt(60);
            var timer = setInterval(function() {
                if(parseInt($('.get_num').html()) > 1) {
                    num--
                    $('.get_num').html(num + 's')
                } else {
                    get_switch = true;
                    $('.get_num').html('获取')
                    clearInterval(timer)
                }
            }, 1000)
        }
    }
</script>
</body>

</html>