register.html 16.0 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>注册</title>
    <script src="__TMPL__/public/assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="__TMPL__/public/assets/css//init.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css//swiper-3.4.2.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_793738_tlxymah92x.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css//weui.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css//myweui.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css//comment.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css//register.css">
</head>
<body>
<div class="container">
    <div class="banner_box"><img src="__TMPL__/public/assets/images/abg01@2x.png" alt=""></div>
    <div class="content_box">
        <div class="content_item sub_item">
            <div class="item_list">
                <div class="list_title">真实姓名</div>
                <div class="list_input"><input type="text" placeholder="请输入真实姓名" id="user_name"></div>
            </div>
            <div class="item_list">
                <div class="list_title">手机号</div>
                <div class="list_input"><input type="number" placeholder="请输入手机号" id="phone_num"></div>
            </div>
            <div class="item_list">
                <div class="list_title">验证码</div>
                <div class="list_input list_button"><input type="number" placeholder="请输入验证码" id="verify_code">
                    <button class="getCode">获取验证码</button>
                </div>
            </div>
        </div>
        <div class="content_item">
            <div class="item_list platform_item">
                <div class="list_title">平台</div>
                <div class="list_input"><input type="text" placeholder="请选择平台" id="platform" readonly onfocus="this.focus()">
                    <text class="iconfont icon-xiala"></text>
                </div>
            </div>
            <div class="item_list hospital_item">
                <div class="list_title">医院</div>
                <div class="list_input"><input type="text" placeholder="请选择医院" id="hospital"  readonly onfocus="this.focus()">
                    <text class="iconfont icon-xiala"></text>
                </div>
            </div>
            <div class="item_list department_item">
                <div class="list_title">科室</div>
                <div class="list_input"><input type="text" placeholder="请选择科室" id="department"  readonly onfocus="this.focus()">
                    <text class="iconfont icon-xiala"></text>
                </div>
            </div>
            <div class="item_list position_item">
                <div class="list_title">职务</div>
                <div class="list_input"><input type="text" placeholder="请选择职务" id="position"  readonly onfocus="this.focus()">
                    <text class="iconfont icon-xiala"></text>
                </div>
            </div>
            <div class="item_list">
                <div class="list_title">所在地区</div>
                <div class="list_select">
                    <div class="select_item">
                        <select name="province" id="province" >
                            <option value="请选择"><text class="area">省份</text></option>
                        </select>
                        <div class="iconfont  icon-daosanjiao"></div>
                    </div>
                    <div  class="select_item">
                        <select name="city" id="city" >
                            <option value="请选择">城市</option>
                        </select>
                        <div class="iconfont  icon-daosanjiao"></div>
                    </div>
                    <div  class="select_item">
                        <select name="town" id="town">
                            <option value="请选择">区县</option>
                        </select>
                        <div class="iconfont  icon-daosanjiao"></div>
                    </div>
                </div>
            </div>
            <div class="item_list">
              <div class="register_btn">完成注册</div>
            </div>
        </div>
    </div>
</div>
<!--表单判断弹窗-->
<div class="form_popup_box">
    <text></text>
</div>
<!--成功第一步-->
<div class="mask_box first">
    <div class="popup_box">
        <div>恭喜您已注册成功!</div>
        <div>您已获得100积分,快去使用吧!</div>
    </div>
</div>
<!--成功第二步-->
<div class="mask_box success">
    <div class="success_box">
        <div>注册成功,请耐心等待</div>
        <div>平台会在两个工作日以内完成审核!!</div>
        <div class="success_info">如有疑问请联系客服:400-56183264</div>
    </div>
</div>
<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
<script src="__TMPL__/public/assets/js/myweui.js"></script>
<script src="__TMPL__/public/assets/js/weui.js"></script>
<script src="__TMPL__/public/assets/js/area.js"></script>
<script src="__TMPL__/public/assets/js/select.js"></script>
<script src="__TMPL__/public/assets/js/register.js"></script>
<style>
.success {
    background:url("__TMPL__/public/assets/images/abg02@2x.png") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}
</style>

<script type="application/javascript">


$(document).ready(function () {
    $('.mask_box').hide()
    $('.form_popup_box').hide()

    $(function () {
        //获取短信验证码
        var validCode = true;
        $(".getCode").click(function () {
            /*验证信息*/
               var phone_num = $('#phone_num').val();
                if (phone_num == '') {
                               $('.form_popup_box').show()
                               $('.form_popup_box').text('手机号不能为空')
                               $('.form_popup_box').delay(1000).hide(0);
                               return;
                }


            $.ajax({
            url:'{:url('sendVerifyCode')}',
            type:'POST',
            data:{
                tel:phone_num
            },
            success:function(res) {
              console.log(res)
              if (res.code==1){
                    $('.form_popup_box').show()
                      $('.form_popup_box').text('验证码发送成功')
                      $('.form_popup_box').delay(1000).hide(0);
              } else {
                  $('.form_popup_box').show()
                   $('.form_popup_box').text(res.msg)
                   $('.form_popup_box').delay(1000).hide(0);
              }
            }
            })

            var time = 60;
            var $code = $(this);
            if (validCode) {
                validCode = false;
                var t = setInterval(function () {
                    time--;
                    $code.html(time + "秒");
                    if (time == 0) {
                        clearInterval(t);
                        $code.html("重新获取");
                        validCode = true;
                    }
                }, 1000)
            }
        })
    })
    $('.platform_item').click(function () {
        weui.picker([
                <volist name='platform' id='vo'>
                {label: '{$vo.name}',value:{$vo.id}},
                </volist>
            ], {
                onChange: function (res) {
                     $('#hospital').val('')
                     $('#department').val('')
                },
                onConfirm: function (res) {
              var platform=$('#platform').val(res[0].label)
              $('#platform').data('data-id',res[0].value)
                 var  platform=res[0].value;
                $.ajax({
                  url:'{:url('getHospital','','',true)}',
                  type:'POST',
                  data:{
                      'platform':platform,
                  },
                  success:function(res){
                    $('.hospital_item').click(function () {

                        var hospital=new Array();
                               for(var i=0;i<res.data.length;i++){
                                         var one=new Object();
                                  one.value=res.data[i].hospital_id;
                                  one.label=res.data[i].hospital_name;
                                  hospital.push(one)
                               }
                           weui.picker(
                               hospital
                               , {
                                   onChange: function (res) {
                                        $('#department').val('')
                                   },
                                   onConfirm: function (res) {
                                         $('#hospital').val(res[0].label)
                                        $('#hospital').data('data-id',res[0].value)
                                       console.log(res)
                                       var hospital_id=res[0].value;
                                       $.ajax({
                                       url:'{:url('getOffice','','',true)}',
                                                      type:'POST',
                                                      data:{
                                                          'platform_id':platform,
                                                         'hospital_id':hospital_id,
                                                      },
                                                        success:function(res){
                                                            $('.department_item').click(function () {

                                                                   var office=new Array();
                                                                        for(var i=0;i<res.data.length;i++){
                                                                              var one=new Object();
                                                                              one.value=res.data[i].office_id;
                                                                              one.label=res.data[i].office_name;
                                                                              office.push(one)
                                                                       }

                                                                   weui.picker(office, {
                                                                           onChange: function (res) {

                                                                           },
                                                                           onConfirm: function (res) {
                                                                               $('#department').val(res[0].label)
                                                                               $('#department').data('data-id',res[0].value)
                                                                           }
                                                                       }
                                                                   )
                                                               })

                                                        }

                                       })
                                   }
                               }
                           )
                       })
                  }
                });

                }
            }
        )
    })


    $('.position_item').click(function () {
        weui.picker([
            <volist name='jobs' id='vo'>
                {label: '{$vo.name}', value: {$vo.id}},
            </volist>
            ], {
                onChange: function (res) {
                    console.log(res)
                },
                onConfirm: function (res) {
                    $('#position').val(res[0].label)
                    $('#position').data('data-id',res[0].value)
                }
            }
        )
    })

    $('.register_btn').click(function () {
      var platform=$('#platform').data('data-id')
      var hospital=$('#hospital').data('data-id')
      var office=$('#department').data('data-id')
      var position=$('#position').data('data-id')


            var user_name = $('#user_name').val()
            var phone_num = $('#phone_num').val()
            var verify_code = $('#verify_code').val()
            // var platform = $('#platform').val()
            // var hospital = $('#hospital').val()
            // var department = $('#department').val()
            // var position = $('#position').val()
            var province = $('#province').val()
            var city = $('#city').val()
            var town = $('#town').val()
            if (user_name == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('用户名不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (phone_num == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('手机号不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (verify_code == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('验证码码不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (platform == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('平台不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (hospital == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('医院不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (department == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('科室不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (position == '') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('职务不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (province == '请选择') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('省份不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (city == '请选择') {

                $('.form_popup_box').text('城市不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else if (town == '请选择') {
                $('.form_popup_box').show()
                $('.form_popup_box').text('区县不能为空')
                $('.form_popup_box').delay(1000).hide(0);
            } else {
                $.ajax({
                url:'{:url('registerPost')}',
                type:'POST',
                data:{
                    platform:platform,
                    hospital:hospital,
                    office:office,
                    user_name:user_name,
                    tel:phone_num,
                    verify_code:verify_code,
                    job:position,
                    province:province,
                    city:city,
                    town:town,
                },
                    success:function(res) {
                    console.log(res)
                      if (res.code==1){
                            $('.success').show().delay(2000).hide(2);
                            window.location.href='{:url('/')}'
                      }else {
                             $('.form_popup_box').show()
                             $('.form_popup_box').text(res.msg)
                             $('.form_popup_box').delay(1000).hide(0);
                      }
                    }
                })



            }
        }
    )
})
</script>

</body>
</html>