swiftadmin/app/index/view/user/profile.html

<layout name="layout:layout"/>
<!-- 内容主体区域 -->
<style>

    .red {
        color: red;
    }
    .mt30 {
        margin-top: 30px;
    }

    .layui-form {
        padding-top: 10px;
    }

    @media screen and (min-width: 1024px) {

        .layui-input-inline {
            min-width: 260px!important;
        }

        .address {
            min-width: 639px!important;
        }
    }

</style>
<div id="content">
    <div class="layui-row">

        <div id="cardInfo" class="layui-card">
            <span>温馨提示：</span>
            <span>1、请务必牢记您所填写的信息</span>
            <span>2、姓名、电话号码、公司名称、微信号等敏感信息，请谨慎填写</span>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">我的资料</div>
            <div class="layui-card-body" >
                <form action="/index/user/center" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label mt30"><span class="red">*</span> 用户头像</label>
                        <div id="imgHead" class="layui-user-avatar">
                            <img src="{$user.avatar}" alt="{$user.nickname}" class="avatar">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span> 用户昵称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="nickname" placeholder="用户昵称" class="layui-input" value="{$user.nickname}">
                        </div>
                        <label class="layui-form-label"><span class="red">*</span> 真实姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="真实姓名" class="layui-input" value="{$user.name}">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label"><span class="red">*</span> 手机号码</label>
                        <div class="layui-input-inline">
                            <input class="layui-input layui-disabled" disabled value="{$user.mobile|default='未绑定'}">
                        </div>
                        <label class="layui-form-label"><span class="red">*</span> 性别</label>
                        <div class="layui-input-inline">
                            <input name="gender" type="radio" value="1" title="男" <eq name="$user['gender']" value="1">checked</eq>>
                            <input name="gender" type="radio" value="0" title="女" <eq name="$user['gender']" value="0">checked</eq>>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span> 身份证号码</label>
                        <div class="layui-input-inline">
                            <input name="idcard" placeholder="请输入身份证号" class="layui-input" value="{$user.idcard}">
                        </div>
                        <label class="layui-form-label"><span class="red">*</span> 邮箱地址</label>
                        <div class="layui-input-inline">
                            <input class="layui-input layui-disabled" disabled value="{$user.email|default='member@domain.com'}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">用户心情</label>
                        <div class="layui-input-inline">
                            <input name="heart" placeholder="请输入用户心情" class="layui-input" value="{$user.heart}">
                        </div>
                        <label class="layui-form-label"><span class="red">*</span> 邮政编码</label>
                        <div class="layui-input-inline">
                            <input name="zipcode" placeholder="请输入邮政编码" class="layui-input" value="{$user.zipcode}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span> 家庭住址</label>
                        <div class="layui-input-inline address">
                            <input name="address" placeholder="请输入家庭住址" class="layui-input" value="{$user.address}">
                        </div>
                    </div>

                    <div class="layui-form-item" style="margin-top: 22px;text-align: center">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit">立即提交</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'upload','form'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;

        // 上传头像
        upload.render({
            elem: '.layui-user-avatar'
            , url: '/index/user/avatar?action=avatar' // 默认的上传地址
            , method: 'post'
            , accept: 'image'
            , before: function (res) {
            }, done: function (res, index, upload) {
                // 上传成功
                if (res.code === 200) {
                    $('.avatar').attr('src', res.url + '?' + parseInt(100 * Math.random()));
                    return layer.msg(res.msg);
                }
                layer.msg(res.msg, 'error');
            }
        })

        //监听提交
        form.on('submit(submit)', function(data){
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                dataType: 'json',
                timeout: 6000,
                data: data.field,
                success: function(res){
                    if (res.code === 200) {
                        top.layer.msg(res.msg);
                    }
                    else {
                        top.layer.msg(res.msg,'error');
                    }
                }
            });

            return false;
        });

    })
</script>