zc100/public/static/template/users/users_centre_field_mobile_m...

<div class="row">
    <div class="col-xs-3">{$vo.title}</div>
    <div class="col-xs-9">
        {eyou:if condition="1 == $vo.is_required"}
            <span class="redx">*</span>
        {eyou:else/}
            <span class="redx">&nbsp;</span>
        {/eyou:if}
        {$vo.dfvalue|default=''}
        {eyou:eq name='is_mobile' value='1'}
            <!-- 手机端 -->
            {eyou:eq name='$users.is_mobile' value='1'}
                <span class="err"><a href="JavaScript:void(0);" onclick="BindUpdateMobile('更改手机');">（更改手机）</a></span>
            {eyou:else/}
                <span class="err"><a href="JavaScript:void(0);" onclick="BindUpdateMobile('绑定手机');">（绑定手机）</a></span>
            {/eyou:eq}
            <div id="users_bind_mobile_html" style="display: none;">
                <div class="changepass">
                    <eyoucms_form_2020 name='theForm_mobile_form' id="theForm_mobile_form" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" id="bind_mobile_old" name="mobile" {eq name='$users.is_mobile' value='0'} value="{$users.mobile}" {/eq} required class="form-control" placeholder="新的手机号码">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group" style="position: relative;">
                                    <input type="text" class="form-control" id="bind_mobile_code" name="mobile_code" placeholder="手机验证码">
                                    <input type="button" id="bind_mobile_button" onclick="GetMobileCodeMobile();" class="btn btn-primary" value="获取验证码" />
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" style="width:88%;" onclick="SubmitUpdateMobile();">确定</button>
                        </div>
                    </eyoucms_form_2020>
                </div>
            </div>
            <script type="text/javascript">
                // 绑定、更换手机号码
                function BindUpdateMobile(title) {
                    var content = $('#users_bind_mobile_html').html();
                    content = content.replace(/eyoucms_form_2020/g, 'form');
                    content = content.replace(/theForm_mobile_form/g, 'bind_mobile_form_2020');
                    content = content.replace(/bind_mobile_old/, 'bind_mobile_new_2020');
                    content = content.replace(/bind_mobile_code/, 'bind_mobile_code_2020');
                    content = content.replace(/bind_mobile_button/, 'bind_mobile_button_2020');
                    layer.open({
                        type: 1,
                        title: title,
                        style:'position:fixed; bottom:0; left:0; width: 100%; padding:10px 0; border:none;max-width: 100%;',
                        anim:'up',
                        content: content,
                    });
                }

                // 获取手机验证码
                function GetMobileCodeMobile() {
                    // 正在处理提示动画
                    var loading = loa_ding();
                    // 标题
                    var title = $('h3').html();
                    // 手机号码
                    var mobile = $("#bind_mobile_new_2020").val();
                    // 手机号是否为空
                    if (!mobile) {
                        layer.close(loading);
                        $("#bind_mobile_new_2020").focus();
                        msg_open('请输入新的手机号码！');
                        return false;
                    }
                    
                    // 手机格式不正确
                    var mobile_format = /^1[0-9]{10}$/i;
                    if (!mobile_format.test(mobile)) {
                        layer.close(loading);
                        $("#bind_mobile_new_2020").focus();
                        msg_open('请输入正确的新的手机号码！');
                        return false;
                    }

                    // 发送验证码
                    $("#bind_mobile_button_2020").val('发送中…');
                    $.ajax({
                        url: '{$RootDir}/index.php?m=api&c=Ajax&a=SendMobileCode&_ajax=1',
                        data: {mobile: mobile, is_mobile: true, source: 1},
                        type:'post',
                        dataType:'json',
                        success:function(res) {
                            layer.close(loading);
                            if (res.code == 1) {
                                MobileCountDown();
                                msg_open(res.msg);
                            } else {
                                $("#bind_mobile_button_2020").val('获取验证码').removeAttr("disabled");
                                msg_open(res.msg);
                            }
                        },
                        error : function() {
                            $("#bind_mobile_button_2020").val('获取验证码').removeAttr("disabled");
                            layer.close('发送失败，请尝试重新发送！');
                            msg_open(res.msg);
                        }
                    });
                }

                // 倒计时
                function MobileCountDown() {
                    var setTime;
                    var time = 120;
                    setTime = setInterval(function(){
                        if(0 >= time){
                            clearInterval(setTime);
                            return;
                        }
                        time--;
                        $("#bind_mobile_button_2020").val(time+'秒');
                        $("#bind_mobile_button_2020").attr('disabled', 'disabled');

                        if(time == 0){
                            $("#bind_mobile_button_2020").val('获取验证码');
                            $("#bind_mobile_button_2020").removeAttr("disabled");
                        }
                    }, 1000);
                }

                // 提交手机及验证码进行绑定
                function SubmitUpdateMobile() {   
                    var loading = loa_ding();// 正在处理提示动画

                    var mobile = $("#bind_mobile_new_2020").val();
                    var reg = /^1[0-9]{10}$/i;
                    // 邮箱格式不正确
                    if(!reg.test(mobile)) {
                        layer.close(loading);
                        $("#bind_mobile_new_2020").focus();
                        msg_open('请正确输入手机号码');
                        return false;
                    }

                    var mobile_code = $("#bind_mobile_code_2020").val();
                    if(!mobile_code) {
                        layer.close(loading);
                        $("#bind_mobile_code_2020").focus();
                        msg_open('请输入手机验证码');
                        return false;
                    }

                    $.ajax({
                        url: '{$RootDir}/index.php?m=user&c=Users&a=bind_mobile&_ajax=1',
                        data: $('#bind_mobile_form_2020').serialize(),
                        type:'post',
                        dataType:'json',
                        success:function(res){
                            if (res.code == 1) {
                                layer.closeAll();
                                msg_open(res.msg);
                                location.reload();
                            } else {
                                layer.close(loading);
                                msg_open(res.msg);
                            }
                        },
                        error : function() {
                            layer.close(loading);
                            footer_open('未知错误，请刷新重试');
                        }
                    });
                };
            </script>
        {eyou:else/}
            <!-- PC端 -->
            {eyou:eq name='$users.is_mobile' value='1'}
                <span class="err"><a href="JavaScript:void(0);" onclick="get_{$vo.fieldArr}{$vo.name|default=''}_mobile_code('更改手机');">（更改手机）</a></span>
            {eyou:else/}
                <span class="err"><a href="JavaScript:void(0);" onclick="get_{$vo.fieldArr}{$vo.name|default=''}_mobile_code('绑定手机');">（绑定手机）</a></span>
            {/eyou:eq}
            <script type="text/javascript">
                function get_{$vo.fieldArr}{$vo.name|default=''}_mobile_code(title) {
                    var url = '{$RootDir}/index.php?m=user&c=Users&a=bind_mobile';
                    if (url.indexOf('?') > -1) {
                        url += '&';
                    } else {
                        url += '?';
                    }
                    url += 'title=' + title;
                    //iframe窗
                    layer.open({
                        type: 2,
                        title: title,
                        shadeClose: false,
                        maxmin: false, //开启最大化最小化按钮
                        area: ['350px', '300px'],
                        content: url
                    });
                }
            </script> 
        {/eyou:eq}
        <p class="notic">{$vo.remark|default=''}</p>
    </div>
</div>