static/updateuserInfo.html

<!--#include file="inc/header.html"-->

	 <style type="text/css">
        .window{
                background-color: #0F6136;

        }
        .window, .window .window-body {
            border-color: #165634;
        }
        .combo-arrow {
            background-color: #A3CEB7;
        }
        .window .window-header .panel-tool {
            right: 1px;
            background: #B8D8A5;
        }

        .hide{
            display: none;
        }
        .form-left{
        width: 500px;
        float: left;
        }
        .form-right{
            width: 200px;
            min-height: 150px;
            float:left;
        }
        .form-right .pic{
            border: 1px solid #CCC;
            float: left;
            width: 100%;
            min-height: 150px;
            background: #CCC;
        }
        #changeInfo{
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            margin-top: 10px;
            border: 1px solid rgba(56, 128, 90, 0.14);
            min-height: 400px;
        }

        #changeInfo .item-line{
            width: 650px;
            display: inline-block;
            margin-bottom: 5px;
        }
        #changeInfo .item-line-t{
            width: 100px;
            display: inline-block;
            margin-bottom: 5px;
        }

        #changeInfo .item-line-v{
            width: 250px;
            display: inline-block;
            margin-bottom: 5px;
        }

         #changeInfo input{
            width: 200px;
         }
        div.upload-btn {
            width: 100px;
            height: 40px;
            background: url("/img/upload2.png");
            overflow: hidden;
        }

        div.upload-btn input {
            display: block !important;
            width: 100px !important;
            height: 40px !important;
            opacity: 0 !important;
            overflow: hidden !important;
        }
        #upload-info{
            color:red;
            min-height: 100px;
            font-size:16px;
        }

    </style>
    <div class="con-wrap">
        <div class="tree-breadcrumb">
            <span class="nav-prov">首页</span>&gt;
            <span class="nav-prov">个人设置</span>&gt;
            <span class="nav-city">修改资料</span>
        </div>
        <div id="changeInfo"  style="padding: 20px;"  class="form-left">
        <h2>修改资料</h2>
        <form class="change-info-form">
            <div class="form-left">
                <span class="item-line ">
                    <span class="item-line-t">用户名:</span>
                    <span class="item-line-v">
                    <input class="readonly" readonly="true" data-options="required:true" name="name" style="
    background-color: #ccc;">
                    </span>
                </span>
                <br />
                <span class="item-line">
                    <span class="item-line-t">真实姓名:</span>
                    <span class="item-line-v"><input class="easyui-textbox"  data-options="required:true" name="realname"></span>
                </span>
                <br />
                <span class="item-line">
                    <span class="item-line-t">生日:</span>
                    <span class="item-line-v"><input class="easyui-datebox" data-options="required:true" editable="false" name="birthday"></span>
                </span>
                <br />
                <span class="item-line">
                    <span class="item-line-t">联系电话:</span>
                    <span class="item-line-v"><input class="easyui-textbox easyui-validatebox" data-options="validType:'length[11,11]',required:true" name="phone">
                    </span>
                </span>
                <br />
                <span class="item-line">
                    <span class="item-line-t">地址:</span>
                    <span class="item-line-v"><input class="easyui-textbox" name="address">
                    </span>
                </span>
                <br />
                <span class="pf-pitem-li">
                    <span class="item-line-t">邮箱:</span>
                    <span class="item-line-v"><input class="easyui-textbox easyui-validatebox" name="email" validType="email" ></span>
                </span>
                <br />
                <a class="easyui-linkbutton bd-add-s userinfo-update-btn" plain="true" style="margin-top: 20px;">确定</a>
            </div>
            <div class="form-right">
                <!--upload start-->
                <div class="pic user_pic" id="pic"></div>
                <div class="upload-btn">
                    <input  id="upload-file" class="upload" name="file" type="file" >
                    <input  name="avator" id="avator" type="hidden" />
                    <span class="uploading-bar" id="uploading-bar" ></span>
                </div>
                <div class="upload-info" id="upload-info"></div>
                <!--upload end-->
            </div>

    </form>
</div>
<div class="bottom-wrap">&copy; 2018 中储粮-单仓档案管理系统 版权所有</div>
    <script type="text/javascript">
        $(function(){
             base.ajaxFunc('get', config.userManage.getCurrentUserInfo, null, function(e){
                $('.change-info-form').form('load',e.data);
                upload.ajaxFileUpload("#upload-file",".change-info-form","user");
                upload.initUploadInfo(".change-info-form",e.data.avator);
                // $('#pic').html($("<img />").attr("src", e.data.avator).attr("width", '100%'));
            });
            $(".userinfo-update-btn").off().on("click",function(e){
                e.preventDefault();
                var validate = $(".change-info-form").form("validate");
                if(!validate){
                    $.messager.alert('提示', base.tooltip, 'info');
                    return false;
                }
                var data = base.filterObjNull($('.change-info-form').serializeArray(), 1);
                document.getElementById('avator-img').src = data.avator;
                document.getElementById('username').innerText = data.realname;
                base.ajaxFunc('post', config.userManage.updateuserinfo, data, function(e) {
                    //请求成功后的提示
                    // $(".change-info-form").form('reload');
                    base.requestTip(e, '#changeInfo', '', 0);
                });
            });
        });
    </script>
</body>
</html>