modimobile2.html 17.8 KB

Edit Raw Blame History Permalink

<script type="text/javascript" src="__PUBLIC__/js/rem_new.js"></script>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>更换手机号-{$tpshop_config['shop_info_store_title']}</title>
    <meta http-equiv="keywords" content="{$tpshop_config['shop_info_store_keyword']}"/>
    <meta name="description" content="{$tpshop_config['shop_info_store_desc']}"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/jquery.scroller-1.0.2.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/login.css?v=20180716002"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/layer.css"/>
    <link rel="stylesheet" href="__STATIC__/css/modify_handset.css?v=__CSSVERSION__">
    <script type="text/javascript" src="__STATIC__/js/jquery-1.7.2.min.js"></script>
    <script src="__PUBLIC__/js/global.js?v=__CSSVERSION__"></script>
    <script src="__PUBLIC__/js/mobile_common.js?v=__CSSVERSION__"></script>
    <script type="text/javascript" src="__STATIC__/js/layer.js"></script>
    <script type="text/javascript" src="__STATIC__/js/jquery.scroller-1.0.2.min.js"></script>


    <script type="text/javascript" src="__PUBLIC__/static/js/layer/laydate/laydate.js"></script>
    <style type="text/css">
        .landsec {margin-left: 20px;line-height: 40px}
        .landsec label{ padding-left: 22px; display: block; height:40px; line-height:40px; background: url(__STATIC__/images/category/select2.png) 0 13px no-repeat; background-size: 15px 87px; color: #989da2; font-size:14px;}
        .landsec.on label { background-position: 0 -30px;}
        .landsec label input{display: none}
        .namePic1 {position: absolute;left: 8px; top: 15px;width: 20px;height:19px;}
        .layermbox0_1 .layermchild{position: fixed;z-index: 100;}

        .phonePic{
            top:9px
        }
        .c-form-txt-normal{
            height: 30px;
            line-height: 30px;
            padding-left: 28px;
        }
        .yzmPic{
            width: 20px;
        }
        .phonePic{
            width: 20px;
        }
        .btn_big1{
            width: 60%;
            height: 0.5rem;
            line-height: 0.5rem;
            border-radius: 0.25rem;
        }

    </style>
</head>
<body>
<div class="handset-img-frame flex jc_center ai_center">
    <img class="handset-img" src="__STATIC__/images/user_card/handset.png">
</div>

<div id="tbh5v0">
    <div class="log_reg_box">
        <!--注册页面 新增   20170322-->
        <div id="logRegTabCon">
            <div class="log_reg_item" id="phonearea">

                <form id="mobileForm" name="mobileForm">
                    <div class="field phone">
                        <img class="phonePic" src="__STATIC__/images/user_card/handset-tt.png"/>
                        <input type="tel" id="username" maxlength="11" name="username" placeholder="新手机号"
                               class="c-form-txt-normal" onBlur="checkMobilePhone(this.value);"  value=""/>
                       <!-- <div class="tips">
                            <span id="mobile_phone_notice"></span>
                        </div>-->
                    </div>
                    <div class="yanzheng" style=" margin-top:0px;">
                        <div class="codeTxt">
                            <img class="yzmPic" src="__STATIC__/images/user_card/verification_card.png"/>
                            <input type="tel" id="mobile_code" maxlength="4" name="mobile_code" placeholder="验证码"/>
                        </div>
                        <div class="codePhoto flex ai_center jc_fe">
<!--                            <input id="zphone" type="button" rel="mobile" value="发送验证码" onClick="yzmobile()"-->
<!--                                   class="zphone" style=" color:#FFF;padding: 5px 5px;">-->
                            <div class="verification_code flex ai_center jc_center" onClick="yzmobile()">获取验证码</div>
                        </div>
                    </div>

                    <!-- 温馨提示说明-->
                    <div class="tips">
                        <div class="fs018">温馨提示：
                            <br/>1.更换手机号下次可使用新手机
                            <br/>2.为保障数据安全,如遇旧手机可联系客服进行解绑
                            <br/>3.收到验证码而非本人操作请及时更改密码
                        </div>

                    </div>

                    <p class="tips1 dn">手机验证已发送，{$s_time_out} 秒未收到点击“重新发送”！</p>
                    <input type="hidden" id="stoid" name="stoid" value="{$Think.request.stoid}">
                    <input type="button" id="btn_submit" name="Submit" readonly="readonly" class="btn_big1 tac"
                           onclick="form_submit()" value="确认更换"/>

                </form>
            </div>

        </div>
    </div>


    <input name="stoid" value="{$Think.request.stoid}" type="hidden">
    <input type="hidden" value="{$user_openid}" id="hidopenid" name="hidopenid" />
    <input type="hidden" value="{$user_openidkey}" id="hidopenidkey" name="hidopenidkey" />
    <input type="hidden" value="" id="hidecodekey" name="hidecodekey" />

</div>

<div class="layer_verify " style="display: none;">
    <div class="layer_verify1">
        <Div class="close"><img src="__STATIC__/images/flow/close.png"></Div>
        <div class="title">请输入图片验证</div>
            <div><img src='/Home/Api/vertify' class="chicuele" id="imgVerify" alt="" onclick="fleshVerify()"></div>
               <div class="yz_msg"></div>
        <div class="input_class">

            <div style="position: absolute">
             <input type="number" name="vertify" id="vertify"   value="" placeholder="" class="vertify_input" maxlength="4"  onpropertychange="getyzcode()" />
            </div>
            <ul class="input_class2">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">

    var flag = true;

    //验证手机
    function checkMobilePhone(mobile) {
        $("#mobile_phone_notice").text("");
        flag = true;
        if (mobile == '') {
            $('#mobile_phone_notice').css('color', '#c4182e');
            $('#mobile_phone_notice').html('* 手机号码不能为空');
            flag = false;
        } else if (checkMobile(mobile)) {

        } else {
            $('#mobile_phone_notice').css('color', '#c4182e');
            $('#mobile_phone_notice').html('* 手机号码格式不正确');
            flag = false;
        }
    }
    //验证输入是否为空
    function check(obj) {
        return;
        var span = $(obj).parent().find("span");
        $(span).text("");
        var name = $(obj).attr('placeholder');
        flag = true;
        if ($(obj).val() == '') {
            $(span).css('color', '#c4182e');
            $(span).html('* ' + name + '不能为空');
            flag = false;
        }
    }

    var date = new Date;
    //日期差
    function CompareDate(d) {
        return ((new Date(d.replace(/-/g, "\/"))) >= new Date(date.toDateString()));
    }

    //表单提交
    function form_submit() {
        //手机号码
        var username = $('#username').val();
        //验证码
        var mobile_code = $('#mobile_code').val();
        var usercode="{$usercode}";

        if (username.length == 0) {
            layer.closeAll();
            layer.open({content: "手机号码不能为空", time: 1});
            return false;
        }
        if (!checkMobile(username)) {
            layer.closeAll();
            layer.open({content: '手机号码格式不正确', time: 1});
            return false;
        }
        if (mobile_code.length == 0 || mobile_code.length != 4) {
            layer.closeAll();
            layer.open({content: '短信验证码不能为空或位数不正确', time: 1});
            return false;
        }

        if (username.length > 0 && flag) {
            var getstoid = {$Request.param.stoid};
            var t = layer.open({shadeClose: false, type: 2, content: '提交中'});
            $.ajax({
                url: '/index.php?m=mobile&c=User&a=modimobile2&stoid=' + getstoid + '&usercode='+usercode+'&is_ajax=1',
                type: 'post',
                dataType: 'json',
                data: $('#mobileForm').serialize(),
                success: function (res) {
                    layer.close(t);
                    if (res.status == 1) {

                        layer.open({content: '更换成功', time: 4});
                        setTimeout(function () {
                            location.href = "/index.php/Mobile/User/userinfo/stoid/" + getstoid;
                        },2000)


                    }
                    else {
                        layer.open({content: res.msg, time: 1});
                        layer.close(t);
                    }
                }
            })

        } else {
            layer.close(t);
            return false;
        }

    }


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


    var is_verifycode="{$is_verifycode}";

    //验证码
    function showVerify() {

        var username = $('#username').val();
        var mobile_code = $('#mobile_code').val();
        if (username.length == 0) {
            layer.open({
                content: '手机号码不能为空'
                , skin: 'msg'
                , time: 1 //2秒后自动关闭
            });
            return false;
        }
        if (username.length !=11) {
            layer.open({
                content: '手机号码位数有误 '
                , skin: 'msg'
                , time: 1 //2秒后自动关闭
            });
            return false;
        }
        if (!checkMobile(username)) {
            layer.closeAll();
            layer.open({content: '手机号码格式不正确', time: 1});
            return false;
        }

        if (is_verifycode=="1") {

            fleshVerify();
            $("#vertify").val('');
            $(".layer_verify").show();
            $("#vertify").focus();
            $(".yz_msg").html("");
        }else
        {
            sendcode();
            flag=true;
        }

    }

    $(".input_class2 li").click(function () {
        $(".input_class2 li").each(function(){
            $(this).removeClass('active');
        });
        $(this).toggleClass('active');
        $("#vertify").focus();
    })

    $(".input_class2 li").mouseover(function () {
        $(".input_class2 li").each(function(){
            $(this).removeClass('active');
        });
        $(this).toggleClass('active');
        $("#vertify").focus();
    })
    $(".input_class2 li").mouseout(function () {
        $(".input_class2 li").each(function(){
            $(this).removeClass('active');
        });

    })
    $(".layer_verify").bind("input propertychange",function(){
        if ($("#vertify").val().length==4)
        {
            var getvertify=$("#vertify").val();
            var getvertify = getvertify.substr(0, 4);
            $.ajax({
                url: '/index.php?m=Home&c=Api&a=smsm_verify&vertifycode=' + getvertify + '',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.status == 1) {
                        $(".yz_msg").html("");
                        $(".layer_verify").hide();
                        $("#hidecodekey").val(res.codekey);
                        sendcode();
                        flag=true;

                    }
                    else {
                        fleshVerify();
                        $("#vertify").val('');
                        $(".yz_msg").html(res.msg);
                    }
                }
            })
        }
    });

    $(".layer_verify .close").click(function () {
        $(".layer_verify").hide();
    })

    var wait = "{$s_time_out}";
    //短信+电话语音=0，电话语音=1
    var s_type = "{$s_type}";
    var s_flag = true;
    var s_verifyCode = 0;   //语音验证码
    var s_verifyTime = 0;   //超时时间
    //发送验证码
    function sendcode() {
        var username = $('#username').val();
        var mobile_code = $('#mobile_code').val();
        if (username.length !=11) {
            layer.open({
                content: '手机号码位数有误 '
                , skin: 'msg'
                , time: 1 //2秒后自动关闭
            });
            return false;
        }
        if (!checkMobile(username)) {
            layer.closeAll();
            layer.open({content: '手机号码格式不正确', time: 1});
            return false;
        }
        var getopenid=$("#hidopenid").val();
        var getopenidkey=$("#hidopenidkey").val();
        if (is_verifycode=="1") {
            var getvertify = $("#vertify").val();
            var getcodekey = $("#hidecodekey").val();
        }
        if (is_verifycode=="1") {
            if (getopenid=="" || getopenidkey=="" || getvertify=="" || getcodekey=="")
            {
                layer.closeAll();
                layer.open({content: '参数不完整，无法操作', time: 1});
                return false;
            }
        }
        else {
            if (getopenid=="" || getopenidkey=="")
            {
                layer.closeAll();
                layer.open({content: '参数不完整，无法操作', time: 1});
                return false;
            }
        }


        var o="#zphone";

        var t1 = layer.open({shadeClose: false, type: 2, content: '加载中'});
            console.log(t1,"是什么东西111");
        if (flag) {
            var url = '/index.php?m=Home&c=Api&a=send_validate_code&t=' + Math.random();
            var data = {
                stoid: '{$Request.param.stoid}',
                s_time_out: wait,
                type: $(o).attr('rel'),
                send: $('#username').val(),
                scene: 1,
                vertifycode: getvertify,
                codekey: getcodekey,
                openid: getopenid,
                openidkey: getopenidkey
            };

            //仅语音验证 或 短信验证第二次开始使用语音验证
            if (s_type== 1 || !s_flag){
                var data = {
                    stoid: '{$Request.param.stoid}',
                    s_time_out: wait,
                    type: $(o).attr('rel'),
                    send: $('#username').val(),
                    scene: 2,
                    vertifycode: getvertify,
                    codekey: getcodekey,
                    openid: getopenid,
                    openidkey: getopenidkey
                };
            }

            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (res) {
                    s_flag = false; //第一次短信验证以后，第二次开始均用电话语音
                    layer.close(t1);
                    console.log(t1,"是什么东西222222");
                    if (res.status == 1) {

                        $(".tips1").removeClass('dn');
                        layer.open({content: res.msg, time: 1});
                        countdown(o);
                    } else {
                        console.log(t1,"是什么东西33333");
                        layer.open({content: res.msg, time: 2});
                        layer.close(t1);

                    }
                }, error: function () {
                    layer.close(t1);
                }
            })
        }
    }


    function countdown(obj, msg) {
        obj = $(obj);
        if (wait == 0) {
            obj.removeAttr("disabled");
            obj.val(msg);
            wait = "{$s_time_out}";
        } else {
            if (msg == undefined || msg == null) {
                msg = obj.val();
            }
            obj.attr("disabled", "disabled");
            obj.val(wait + "秒后重新获取");
            wait--;
            setTimeout(function () {
                countdown(obj, msg)
            }, 1000)
        }
    }

    function backarea() {
        $("#layeraddrshow").removeClass("dn");
        $("#layerpickshow").addClass('dn');
    }

    //验让手机号
    function yzmobile() {
        var t1 = layer.open({shadeClose: false, type: 2, content: '加载中'});
        var username = $('#username').val();
        var mobile_code = $('#mobile_code').val();
        if (username.length==0) {
            layer.open({
                content: '请输入要换的手机号码'
                , skin: 'msg'
                , time: 1 //2秒后自动关闭
            });
            return false;
        }
        if (username.length !=11) {
            layer.open({
                content: '手机号码位数有误'
                , skin: 'msg'
                , time: 1 //2秒后自动关闭
            });
            return false;
        }
        if (!checkMobile(username)) {
            layer.closeAll();
            layer.open({content: '手机号码格式不正确', time: 1});
            return false;
        }
        var getstoid={$Request.param.stoid};
        $.ajax({
            url: '/index.php?m=Mobile&c=User&a=yzmobile&stoid='+getstoid+'&username='+username,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    showVerify();
                }
                else {
                    layer.open({content: res.msg, time:3});
                    layer.close(t1);
                }
            }
        })
    }


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