register.html 27.5 KB

Edit Raw Blame History Permalink

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>注册页 - 美得得.万信达手店</title>
    <include file="public/topmeta"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css" media="screen"/>

    <link rel="stylesheet" type="text/css" href="__STATIC__/css/sigup.css" media="screen"/>
    <script type="text/javascript" src="__STATIC__/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/font/css/font-awesome.min.css" media="screen"/>
    <script src="__PUBLIC__/js/global.js"></script>
    <script src="__PUBLIC__/js/ajaxfileupload.js"></script>


    <!--必要样式-->

    <link href="__STATIC__/css/city-picker.css" rel="stylesheet" type="text/css" />

    <script src="__STATIC__/js/bootstrap.js"></script>
    <script src="__STATIC__/js/city-picker.data.js"></script>
    <script src="__STATIC__/js/city-picker.js"></script>

    <script type="text/javascript" src="__STATIC__/js/com.js"></script>


</head>
<body style="background-color: #efefef">


<div style="background-color: #f7f7f7">
    <Div style="background-color: white;border-bottom: 1px solid #e5e5e5;">
    <div class="container">
    <div id="header">
        <div>
            <a href="/" class="js-route">
                <div class="header-logo"></div> </a>
            <div class="header-title">
                用户注册
            </div>
        </div>
    </div>
    </div>
    </Div>

    <div class="container" style="padding: 30px 0 0px 0" >
        <div  class="stepsbg1" id="stepsbg">
            <ul class="steps">
                <li class="active">填写基本信息</li>
                <li id="steps2">完善资料</li>
                <li id="steps3">完成注册</li>
            </ul>
        </div>

    </div>
    <div class="container" style="padding: 30px 0 30px 0" >
    <div id="main">

        <div class="clearfix"  style="" id="input_show">

            <div style="float: left;margin-left: 5%">
                <img src="__STATIC__/images/index/loginimg.jpg">
            </div>
            <div style="float: left; margin-left: 10%">
                <div class="content js-content">

                    <!--第一步-->
                 <form novalidate="" class="form-horizontal" id="regform" onkeydown="strdown1(event,this,'btnreg1')"  style="">
                    <!-- 禁止chrome自动填写 -->
                    <input style="display:none" type="text" name="fakeusernameremembered" />
                    <input style="display:none" type="password" name="fakepasswordremembered" />
                    <div class="control-group-container">
                        <div class="control-group ">
                            <label class="control-label">手机号码</label>
                            <div class="controls user-id multi">

                                <input type="text" class="js-mobile css-mobile" name="mobile" id="mobile" tabindex="1" placeholder="今后使用手机号登录" maxlength="11" autocomplete="off" />
                            </div>
                        </div>
                        <div class="err-msg"></div>
                    </div>
                     <div class="control-group-container">
                         <div class="control-group">
                             <label class="control-label">设置密码</label>
                             <div class="controls" style="position: relative;">
                                 <input class="js-password-focus" tabindex="2" type="password" name="password" id="password" placeholder="8~20个字，包含字母和数字" maxlength="20" autocomplete="off" />
                                 <span class="icon-switch-password icon-password-hide js-switch-password-display hide"></span>

                             </div>
                         </div>
                         <div class="err-msg"></div>
                     </div>

                     <div class="control-group-container">
                         <div class="control-group">
                             <label class="control-label">图片验证码</label>
                             <div class="controls">
                                 <div class="input-append" id="div_verify">
                                     <input type="text" tabindex="3"  name="vertify" id="vertify"   value="" placeholder="图片验证验证码" class="vertify_input" maxlength="4"  onpropertychange="getyzcode()" style="width: 130px;"  />
                                     <img src='/Home/Api/regvertify' class="chicuele" id="imgVerify" alt="" onclick="fleshVerify()" width="110">
                                 </div>
                             </div>
                         </div>
                         <div class="err-msg"></div>
                     </div>

                    <div class="control-group-container">
                        <div class="control-group">
                            <label class="control-label">短信验证码</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input class="input-half" tabindex="4" type="text" maxlength="6" name="sms_captcha" id="sms_captcha" placeholder="填写6位短信验证码" style="width: 120px;" />
                                    <button type="button" class="btn js-fetch-sms btn-operation">获取验证码</button>
                                </div>
                            </div>
                        </div>
                        <div class="err-msg"></div>
                    </div>


                    <div class="control-group">
                        <button type="button" tabindex="5" class="btn btn-block btn-large btn-primary btn-signup js-btn-signup" data-loading-text="下一步..." id="btnreg1">下一步</button>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <a class="login-link" href="/home/index/login.html" >已有帐号, 立即登录</a>
                        </div>
                    </div>
                </form>


                    <!--第二步-->
                      <form novalidate="" class="form-horizontal" id="regform1" onkeydown="strdown1(event,this,'btnsumbit')" style="display: none">

                        <div class="control-group-container">
                            <div class="control-group1 ">
                                <label class="control-label">个人/公司名称</label>
                                <div class="controls user-id multi" style="position: relative;">

                                    <input type="text" class="js-mobile css-mobile" name="store_company" id="store_company" tabindex="6" placeholder="个人/公司名称"  />
                                </div>
                            </div>
                            <div class="err-msg"></div>
                        </div>
                        <div class="control-group-container">
                            <div class="control-group1">
                                <label class="control-label">公司地址</label>
                                <div class="controls">
                                    <div class="input-append"  style="position: relative">
                                        <input class="input-half" tabindex="7" type="text" name="store_city" id="store_city" placeholder="公司地址"  data-toggle="city-picker"/>

                                    </div>
                                </div>
                            </div>
                            <div class="err-msg"></div>
                        </div>
                    <div class="control-group-container">
                        <div class="control-group1">
                            <label class="control-label">详细地址</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input class="input-half" tabindex="8" type="text" name="store_address" id="store_address" placeholder="详细地址" />

                                </div>
                            </div>
                        </div>
                        <div class="err-msg"></div>
                    </div>
                    <div class="control-group-container">
                        <div class="control-group1">
                            <label class="control-label">所属行业</label>
                            <div class="controls">
                                <div class="input-append"   style="position: relative">
                                    <input class="input-half" tabindex="9" type="text" name="store_industry_id" id="store_industry_id" placeholder="所属行业"  value="" />
                                    <span class="city-picker-span focus" style="width:250px;height:30px;line-height:29px;top:-30px;" id="sel_xydisp"><span class="placeholder" id="store_industry_name">所属行业</span><span class="title" style="display: none;"></span><div class="arrow"></div></span>

                                    <ul id="xylist" class="dropdown-menu" style="position: absolute;z-index: 9999; min-height:200px;height:auto;left: 0px; top: 34px; width: 240px; display: none;">
                                        <foreach name="xylist" item="vo" key="k" >
                                        <li><a href="javascript:" onclick="sel_xy('{$vo.title}',{$vo.id})">{$vo.title}</a></li>
                                        </foreach>
                                    </ul>

                                </div>
                            </div>
                        </div>
                        <div class="err-msg"></div>
                    </div>
                    <div class="control-group-container">
                        <div class="control-group1">
                            <label class="control-label">联系人</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input class="input-half" tabindex="10" type="text" name="store_contact" id="store_contact" placeholder="联系人" />

                                </div>
                            </div>
                        </div>
                        <div class="err-msg"></div>
                    </div>
                          <div class="control-group-container">
                              <div class="control-group1">
                                  <label class="control-label">营业执照号</label>
                                  <div class="controls">
                                      <div class="input-append">
                                          <input class="input-half" tabindex="10" type="text" name="business_license" id="business_license" placeholder="营业执照号" />

                                      </div>
                                  </div>
                              </div>
                              <div class="err-msg"></div>
                          </div>
                          <div class="control-group-container">
                              <div class="control-group1" style="height: 160px;">
                                  <label class="control-label">营业执照</label>
                                  <div class="controls">
                                      <div class="input-append">
                                          <div class="yo-upload"  onclick="uploadGoodsImg()" style="width: 100%;">
                                              <div class="box"><span><i class="fa fa-plus"></i></span>
                                                <img src="" id="showimg" style="display: none" class="uploadimgmax">

                                              <input type="file" accept="image/*"  style="display: none" id="uploadImage" name="uploadImage" onchange="ajaxFileUpload()">
                                                  <input type="hidden" name="business_licenseimg" id="business_licenseimg" value="">
                                              </div>
                                          </div>

                                      </div>
                                  </div>
                              </div>
                              <div class="err-msg"></div>
                          </div>
                    <div class="control-group-container">
                        <div class="">
                            <label class="control-label1">请选择你的经营模式</label>
                            <ul class="storetype">

                                <foreach name="bussinessmodel" item="vo" key="k" >
                                <li  <if condition="$vo.ordid eq 1">class="active"</if> sid="{$vo.id}">{$vo.title}</li>
                                </foreach>
                            </ul>
                        </div>
                        <div class="err-msg"></div>
                    </div>
                   <input type="hidden" id="business_model_id" name="business_model_id" value="3">
                        <div class="control-group">
                            <button type="button" tabindex="11" class="btn btn-block btn-large btn-primary btn-signup js-btn-signup" data-loading-text="完成注册" id="btnsumbit">完成注册</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--第三步-->
        <div class="reg_success" style="display: none;">
            <div class="success_head">
            <h3>恭喜您，您的注册资料已成功提交，完成注册！</h3>
            <p>您提交的注册资料申请正在审核中，我们会在2个工作日内处理完毕，请耐心等待！</p>
                <div class="control-group" style="width: 200px; padding-left: 30px;">
                    <button type="button" tabindex="12" class="btn btn-block btn-large btn-primary btn-signup js-btn-signup" data-loading-text="立即登录" id="btngo">立即登录</button>
                </div>
            </div>
            <div class="success_head1">

                <h3>温馨提示：</h3>
                <p>
                请保管好账号所有的资料，切勿忘记或透露他人。<br>
                如有疑问，可咨询客服或者拨打400-087-9077全国服务电话。<br>
                您现在可能需要：<a href="/"> 网站首页</a> | <a href="/admin/index/index.html"> 个人中心</a>
                </p>
            </div>
        </div>

    </div>

    </div>
</div>

<input type="hidden" value="" id="hidecodekey" name="hidecodekey" />


    <include file="public/footer"/>
</body>
</html>
<script>


    function fleshVerify(){
        $('#imgVerify').attr('src','/index.php?m=Home&c=Api&a=regvertify&r='+Math.floor(Math.random()*100));//重载验证码
    }


    $(".storetype li").click(function(){
        $(".storetype li").each(function(){
            $(this).removeClass('active');
        });
        $(this).addClass('active');

        $("#business_model_id").val( $(this).attr('sid'));
    });


    $(function () {
        var $citypicker1 = $('#city-picker1');

        $citypicker1.citypicker();

        var $citypicker2 = $('#city-picker2');

        $citypicker2.citypicker({
            province: '江苏省',
            city: '常州市',
            district: '溧阳市'
        });

    })

    var getact="{$act}";
    switch  (getact)
    {
        case "1":
            $("#regform").hide();
            break;
        case "2":
            $("#regform").hide();
            $("#regform1").hide();
            break;
    }
    //第一步
    $("#btnreg1").click(function () {

        if ($("#mobile").val()=="")
        {
            layer.msg('手机号码不能为空', {icon: 0, time: 1000});
            $("#mobile").focus();
            return false;
        }
        if ($("#password").val()=="")
        {
            layer.msg('请输入密码', {icon: 0, time: 1000});
            $("#password").focus();
            return false;
        }
        if ($("#password").val().length<8 || $("#password").val().length>20)
        {
            layer.msg('密码限制8至20个字符 ', {icon: 0, time: 1000});
            $("#password").focus();
            return false;
        }
        if ($("#vertify").val()=="" || $("#vertify").val().length!=4)
        {
            layer.msg('图片验证码不为空或位数不足4位', {icon: 0, time: 1000});
            $("#vertify").focus();
            return false;
        }
        if ($("#sms_captcha").val()=="")
        {
            layer.msg('请输入短信验证码', {icon: 0, time: 1000});
            $("#sms_captcha").focus();
            return false;
        }
        if ($("#sms_captcha").val().length!=6)
        {
            layer.msg('短信验证码位数不对，请输入六位短信验证码', {icon: 0, time: 1000});
            $("#sms_captcha").focus();
            return false;
        }


        var ai = layer.msg('提交中...', {icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: '200px', time: 0});

        $.ajax({
            type: "POST",
            url: "{:U('Index/first_reg')}",
            data: $('#regform').serialize(),// 你的formid
            error: function () {
                layer.close(ai);
                layer.msg('服务器繁忙, 请联系管理员', {icon: 0, time: 1000});

            },
            success: function (data) {
                layer.close(ai);
                if (data.code == 1) {
                    $("#regform").hide();
                    $("#regform1").show();
                    $("#steps2").addClass('active');
                    $("#stepsbg").toggleClass('stepsbg2');
                }
                else {
                    layer.msg(data.msg, {icon: 0, time: 1000});
                }
            }
        });

    })


    //完成注册
    $("#btnsumbit").click(function () {

        if ($("#mobile").val()=="")
        {
            layer.msg('手机号码不能为空', {icon: 0, time: 1000});
            $("#mobile").focus();
            return false;
        }
        if (!checkMobile($("#mobile").val()))
        {
            layer.msg('手机号码格式有误，请核对', {icon: 0, time: 1000});
            $("#mobile").focus();
            return false;
        }
        if ($("#password").val()=="")
        {
            layer.msg('请输入密码', {icon: 0, time: 1000});
            $("#password").focus();
            return false;
        }
        if ($("#password").val().length<8 || $("#password").val().length>20)
        {
            layer.msg('密码限制8至20个字符 ', {icon: 0, time: 1000});
            $("#password").focus();
            return false;
        }
        if ($("#store_company").val()=="")
        {
            layer.msg('个人/公司名称不能为空', {icon: 0, time: 1000});
            $("#store_company").focus();
            return false;
        }

        if ($("#store_city").val()=="")
        {
            layer.msg('公司地址不能为空', {icon: 0, time: 1000});
            $("#store_city").focus();
            return false;
        }
        if ($("#store_address").val()=="")
        {
            layer.msg('详细地址不能为空', {icon: 0, time: 1000});
            $("#store_address").focus();
            return false;
        }

        var yu=$("#store_industry_id").val();
        if (yu=="")
        {
            layer.msg('请选择所属行业', {icon: 0, time: 1000});
            $("#store_industry_id").focus();
            return false;
        }


        if ($("#store_contact").val()=="")
        {
            layer.msg('联系人不能为空', {icon: 0, time: 1000});
            $("#store_contact").focus();
            return false;
        }

        if ($("#business_license").val()=="")
        {
            layer.msg('营业执照号不能为空', {icon: 0, time: 1000});
            $("#business_license").focus();
            return false;
        }

        if ($("#business_licenseimg").val()=="")
        {
            layer.msg('请上传营业执照', {icon: 0, time: 1000});
            $("#business_licenseimg").focus();
            return false;
        }
        if ($("#hidecodekey").val()=="") {
            layer.msg('图片验证码有误!', {icon: 0, time: 1000});
            return false;
        }
        var param=$('#regform1').serialize();
        param+="&mobile="+$("#mobile").val()+"&password="+$("#password").val()+"&vertify="+$("#vertify").val()+"&codekey="+$("#hidecodekey").val();
        var ai = layer.msg('提交中...', {icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: '200px', time: 0});

        $.ajax({
            type: "POST",
            url: "{:U('Index/sumbit_reg')}",
            data: param,// 你的formid
            error: function () {
                layer.close(ai);
                layer.msg('服务器繁忙, 请联系管理员', {icon: 0, time: 1000});

            },
            success: function (data) {
                layer.close(ai);
                if (data.code == 1) {
                    $("#regform").hide();
                    $("#regform1").hide();
                    $("#steps3").addClass('active');
                    $("#stepsbg").toggleClass('stepsbg3');

                    $("#input_show").hide();
                    $(".reg_success").show();


                }
                else {
                    layer.msg(data.msg, {icon: 0, time: 1000});
                }
            }
        });

    })

    function  twoshow() {
        $("#regform").hide();
        $("#regform1").show();

    }


    $("#vertify").bind("input propertychange change",function(event){

        if ($("#mobile").val()=="")
        {
            layer.msg('手机号码不能为空', {icon: 0, time: 1000});
            $("#mobile").focus();
            $("#vertify").val("");
            return false;
        }
        if (!checkMobile($("#mobile").val()))
        {
            layer.msg('手机号码格式有误，请核对', {icon: 0, time: 1000});
            $("#mobile").focus();
            $("#vertify").val("");
            return false;
        }
        if ($("#vertify").val().length==4 && $("#hidecodekey").val()=="")
        {
            var getvertify=$("#vertify").val();
            var getvertify = getvertify.substr(0, 4);
            $.ajax({
                url: '/index.php?m=Home&c=Api&a=reg_smsm_verify&mobile=' + $("#mobile").val() + '&vertifycode=' + getvertify + '',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.status == 1) {
                        $("#hidecodekey").val(res.codekey);
                    }
                    else {
                        fleshVerify();
                        $("#vertify").val('');
                        $("#hidecodekey").val('');
                    }
                }
            })
        }
    });
    //发送验证码
    $('.btn-operation').click(function () {

        if ($("#mobile").val()=="")
        {
            layer.msg('手机号码不能为空', {icon: 0, time: 1000});
            $("#mobile").focus();
            return false;
        }
        if ($("#mobile").val().length!=11)
        {
            layer.msg('请输入11位手机号码', {icon: 0, time: 1000});
            $("#sms_captcha").focus();
            return false;
        }
        if ($("#vertify").val()=="" || $("#vertify").val().length!=4)
        {
            layer.msg('图片验证码不为空或位数不足4位', {icon: 0, time: 1000});
            $("#vertify").focus();
            return false;
        }
        if ($("#hidecodekey").val()=="") {
            layer.msg('图片验证码有误!', {icon: 0, time: 1000});
            return false;
        }
        var ai = layer.msg('发送中...', {icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: '200px', time: 0});

        $.ajax({
            type: "POST",
            url: "{:U('Index/reg_sms')}",
            data:'mobile='+$("#mobile").val()+"&vertify="+$("#vertify").val()+"&codekey="+$("#hidecodekey").val(),
            error: function () {
                layer.close(ai);
                layer.msg('服务器繁忙, 请联系管理员', {icon: 0, time: 1000});

            },
            success: function (data) {
                layer.close(ai);
                if (data.code == 1) {
                    countdown();
                }
                else {
                    fleshVerify();
                    $("#vertify").val('');
                    $("#hidecodekey").val('');

                    layer.msg(data.msg, {icon: 0, time: 1000});
                }
            }
        });

    })
    var wait=60;
    function countdown() {

        var obj = $(".btn-operation");
       var msg="获取验证码";

        if (wait == 0) {
            obj.removeAttr("disabled");
            obj.text(msg);
            wait = "60";
        } else {
            obj.attr("disabled", "disabled");
            obj.text(wait + "秒后重新获取");
            wait--;
            setTimeout(function () {
                countdown()
            }, 1000)
        }
    }

    $("#btngo").click(function () {
        window.location.href='/Home/index/login.html';
    })

    //sel_xy
    function  sel_xy(title,sid) {
        $("#store_industry_name").text(title);
        $("#store_industry_id").val(sid);
        $("#store_industry_name").removeClass('placeholder');
        $("#xylist").hide();
    }
    $("#sel_xydisp").click(function () {
        $("#xylist").show();
    })


    //上传图片
    function ajaxFileUpload()
    {
    var getQCLOUD_IMGURL="{$QCLOUD_IMGURL}";
        //图片格式验证
        var x = document.getElementById("uploadImage");
        if (!x || !x.value) return;
        var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
        if (!patn.test(x.value)) {
            layer.msg('您选择的似乎不是图像文件 ', {icon: 0, time: 1000});
            x.value = "";
            return;
        }
        var getoldimg= $("#business_licenseimg").val();
        var elementIds = ["uploadImage"]; //flag为id、name属性名
        $.ajaxFileUpload({
            url: '/index.php?m=Home&c=Uploadify&a=upload_pic&oldimg='+getoldimg,//上传的url，根据自己设置
            type: 'post',
            secureuri: false, //一般设置为false
            fileElementId: 'uploadImage', // 上传文件的id、name属性名
            dataType: 'text', //返回值类型，一般设置为json、application/json
            elementIds: elementIds, //传递参数到服务器
            success: function (data, status) {

                if (data == "Error1") {
                    layer.msg('文件太大，请上传不大于5M的文件！ ', {icon: 0, time: 1000});
                    return;
                } else if (data == "Error2") {
                    layer.msg('上传失败，请重试！ ', {icon: 0, time: 1000});
                    return;
                } else {
                    //这里为上传并做一下请求显示处理，返回的data是对应上传的文件名
                    $("#showimg").show();
                    $("#showimg").attr("src", getQCLOUD_IMGURL+data);
                    $("#business_licenseimg").val(data);

                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        });
        //return false;
    }
    function  uploadGoodsImg() {

        var fileElem = document.getElementById("uploadImage");
        fileElem.click();
    }
</script>