write_info.html 9.6 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>填写信息</title>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/Mdate.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/date/iScroll.js"></script>
    <script src="/static/js/date/Mdate.js"></script>
    <style>
        /*.box{overflow: hidden;  }*/
        .btn_agree {
            margin-bottom: 2rem;
        }

        .hetong_box {
            overflow: auto;
        }
    </style>
</head>
<body style="background-color: #f6f6f6;">
<div class="box">
    <div class="write_info_box">
        <ul class="write_list_box">
            <li class="write_list">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>姓名:</i>
                    <input type="text" class="user_name"/>
                </div>
            </li>
            <li class="write_list">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>性别:</i>
                    <input type="hidden" value="1" class="user_sex"/>
                    <label class="choose_sex" data-sex="2">
                        <b></b>
                        <img src="/static/image/women_off.png">
                    </label>
                    <label class="choose_sex sex_active" data-sex="1">
                        <b></b>
                        <img src="/static/image/men_on.png">
                    </label>
                </div>
            </li>
            <li class="write_list" id="dateShowBtn">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>出生日期:</i>
                    <input type="text" class="user_birth" id="dateSelectorTwo" placeholder="" value="" data-year="1990"
                           data-month="1" data-day="1" readonly="readonly"/>
                    <em></em>
                </div>
            </li>
            <li class="write_list">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>身份证:</i>
                    <input type="text" class="user_shenfen"/>
                </div>
            </li>
            <li class="write_list">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>手机号:</i>
                    <input type="tel" class="user_phone"/>
                </div>
            </li>
            <li class="write_list">
                <b class="icon_tory">*</b>
                <div class="info_content">
                    <i>验证码:</i>
                    <input type="number" class="user_code"/>
                    <u class="get_code">获取验证码</u>
                </div>
            </li>
        </ul>
        <div class="is_agree">
            <i class="btn_dui"></i>
            <b>我已阅读并同意<span class="show_ht">《驾考合同》</span></b>
        </div>
        <div class="btn_next"></div>
    </div>
    <!--合同-->
    <div class="hetong_box">
        <h1>驾考合同</h1>
        <p>
            {$page}
        </p>
        <!--<div class="agree_none"></div>-->
        <div class="btn_agree"></div>
    </div>

</div>


<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/layer/layer.js"></script>
<script>
    $('.user_name').focus();
    $('.choose_sex').click(function () {
        var data_sex = $(this).attr('data-sex');
        if (data_sex == 1) {
            $(this).children('img').attr('src', '/static/image/men_on.png')
                .parent().siblings().children('img').attr('src', '/static/image/women_off.png');
        } else {
            $(this).children('img').attr('src', '/static/image/women_on.png')
                .parent().siblings().children('img').attr('src', '/static/image/men_off.png');
        }
        $(this).addClass('sex_active').siblings().removeClass('sex_active');
        $(".user_sex").val($(this).attr("data-sex"));
    });
    new Mdate("dateShowBtn", {
        acceptId: "dateSelectorTwo",
        beginYear: "1930",
        format: "-"
    });
    $(".user_shenfen").blur(function () {
        var shenfen = (/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|[x|X])$/).test($(".user_shenfen").val())
        console.log(shenfen);
        if ($(".user_shenfen").val() == "") {
            layer.msg("身份证为空")
        } else if (!shenfen) {
            layer.msg("身份证格式不正确")
        }
    });
    $(function () {
        //获取短信验证码
        var times = 1;
        var validCode = true;
        $(".get_code").click(function () {
            var phone = $(".user_phone").val();
            var user_phone = (/^1[345789]\d{9}$/).test($(".user_phone").val());
            console.log(user_phone);
            if (!user_phone) {
                layer.msg("手机号码格式不正确")
            } else {
                if (times == 1) {
                    times++;
                    $.ajax({
                        type: "post",
                        url: "{:url('portal/tool/get_sms_code')}",
                        data: {
                            mobile: phone
                        },
                        success: function () {
                            var time = 60;
                            var code = $(".get_code");
                            code.html("60秒");
                            if (validCode) {
                                validCode = false;
                                code.addClass("msgs1");
                                var t = setInterval(function () {
                                    if (time >= 0) {
                                        time--;
                                        code.html(time + "秒");
                                        validCode = false;
                                    } else {
                                        validCode = true;
                                        times = 1;
                                        code.html("重新获取");
                                        clearInterval(t);
                                    }
                                }, 1000)
                            }
                        }
                    })
                }
            }

        })
        //显示合同
        $('.btn_dui').click(function () {
            $('.btn_agree').show();
            $('.hetong_box').css("top", "0");
            $("title").html("驾考合同");
        });
        //显示合同
        $('.show_ht').click(function () {
            $('.btn_agree').show();
            $('.hetong_box').css("top", "0");
            $("title").html("驾考合同");
        });
        $('.btn_agree').click(function () {
            $('.btn_agree').hide();
            $('.hetong_box').css("top", "-1000%");
            $('.btn_dui').addClass('dui_active');
            $('.btn_next').addClass('next_active');
            $("title").html("同意签署");
        });

        function checkNum(num) {
            if (num < 10) {
                return "0" + num;
            } else {
                return num;
            }
        }

        $('.write_info_box').on("click", ".next_active", function () {
            var idreg = /\d{18}|\d{17}[x|X]/;
            var user_name = $('.user_name').val();
            var user_sex = $('.user_sex').val();
            var user_birth = $('.user_birth').val();
            var user_shenfen = $('.user_shenfen').val();
            var user_phone = (/^1[345789]\d{9}$/).test($(".user_phone").val());
            var user_code = $('.user_code').val();
            if (!user_name) {
                layer.msg("姓名为空");
            } else if (!user_birth) {
                layer.msg("出生日期为空")
            } else if (!user_shenfen) {
                layer.msg("身份证为空")
            } else if (!idreg.test(user_shenfen)) {
                layer.msg("身份证号不正确");
            } else if (!user_phone) {
                layer.msg("手机号码格式不正确")
            } else if (!user_code) {
                layer.msg("验证码不能为空")
            } else {
                var str = $('.user_birth').val().split('-');
                var birth = "";
                for (var value of str) {
                    birth += checkNum(parseInt(value));
                }
                $.ajax({
                    type: "post",
                    url: "{:url('portal/index/baoming_do')}",
                    data: {
                        name: user_name,
                        sex: user_sex,
                        birthday: birth,
                        idnumber: user_shenfen,
                        mobile: $(".user_phone").val(),
                        sms_code: user_code
                    },
                    success: function (data) {
                        if (data.code == '1') {
                            window.location.href = "{:url('portal/index/confirm_order',['gid'=>$gid])}";
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                })
            }
        });
    });

</script>
</body>
</html>