perinfo_stu.html 5.1 KB
<!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/style.css">
    <style>
        .btn_keep {
            outline: none;
            display: block;
            border: 0;
            background-color: transparent;
        }
    </style>
</head>
<body style="background-color: #f6f6f6">
<div class="box">
    <form id="form" enctype="multipart/form-data">
        <div class="perInfo">
            <div class="headImg">
                <b>头像</b>
                <i></i>
                <div class="genggai_head">
                    <input type="file" name="headimgurl" class="shangchuan_head" id='file' onchange="c()">
                    <img src="{$data.headimgurl}" id="show"/>
                </div>
            </div>
        </div>
        <div class="perInfo">
            <div class="headImg">
                <b>真实姓名:</b>
                <input type="text" name="user_nickname" value="{$data.user_nickname}" class="xiugaiName perName">
            </div>
        </div>
        <div class="perInfo">
            <div class="headImg">
                <b>手机号码:</b>
                <input type="tel" name="mobile" value="{$data.mobile}" class="xiugaiName perPhone">
            </div>
        </div>
        <div class="perInfo">
            <div class="headImg">
                <b>验证码:</b>
                <input type="number" name="sms_code" value="" class="user_code">
                <u class="get_code">获取验证码</u>
            </div>
        </div>
    </form>
    <button class="btn_keep">
        <img src="/static/image/keep.png"/>
    </button>
</div>
<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/static/js/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    function c() {
        var r= new FileReader();
        f=document.getElementById('file').files[0];
        r.onload = function (e) {
            document.getElementById('show').src = this.result;
        };
        if (f) {
            r.readAsDataURL(f);
        } else {
            r.onload = function (e) {
                document.getElementById('show').src = "";
            };
        }

        return f;

    };
    //获取短信验证码
    var validCode = true;
    $(".get_code").click(function () {
        if (validCode) {
            validCode = false;
            var user_phone=$(".perPhone").val();
            console.log(user_phone);
            if(!user_phone){
                alert("手机号码格式不正确")
            }else {
                $.ajax({
                    type: "post",
                    url: "{:url('portal/tool/get_sms_code')}",
                    data: {
                        mobile: user_phone
                    },
                    success: function () {
                        var time = 60;
                        var elem_code = $('.get_code');
                        var t = setInterval(function () {
                            if (time >= 0) {
                                time--;
                                elem_code.text(time + 's');
                            } else {
                                clearInterval(t);
                                elem_code.text('重新获取');
                                validCode = true;
                            }
                        }, 1000);

                    }
                });
            }
        }
    });
    $('.btn_keep').click(function () {
        var formdata = new FormData();
        var flie = c();
        var perName=$('.perName').val();
        var perPhone=$('.perPhone').val();
        var user_code=$('.user_code').val();
        formdata.append("headimgurl",flie);
        formdata.append("user_nickname",perName);
        formdata.append("mobile",perPhone);
        formdata.append("sms_code",user_code);
        $.ajax({
            type: "post",
            url: "{:url('perinfo_ins')}",
            data: formdata,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
                if(res.code==1){
                    layer.msg("保存成功");
                    window.location.href="/user/profile/percenter";
                }else if(res.code==0){
                    layer.msg(res.msg);
                }

            }
        });
    });
</script>
</body>
</html>