<!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>