<form id="user-form" lay-filter="user-form" class="layui-form model-form">
|
<input name="id" type="hidden"/>
|
<div class="layui-form-item">
|
<label class="layui-form-label">账号</label>
|
<div class="layui-input-block">
|
<input name="username" placeholder="请输入账号" type="text" class="layui-input layui-disabled" maxlength="20"
|
lay-verify="required" disabled="disabled" required/>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">用户名</label>
|
<div class="layui-input-block">
|
<input name="nickname" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
|
lay-verify="required" required/>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">手机号</label>
|
<div class="layui-input-block">
|
<input name="mobile" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|mobile"
|
required/>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">性别</label>
|
<div class="layui-input-block">
|
<input type="radio" name="sex" value="0" title="男" checked/>
|
<input type="radio" name="sex" value="1" title="女"/>
|
</div>
|
</div>
|
|
<div class="layui-upload">
|
<label class="layui-form-label">头像:</label>
|
<div class="layui-upload layui-input-block">
|
<input type="hidden" name="headImgUrl" required lay-verify="required" />
|
<button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon"></i>选择文件</button>
|
</div>
|
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
预览图：
|
<div class="layui-upload-list" id="demo2"></div>
|
</blockquote>
|
</div>
|
|
<div class="layui-form-item model-form-footer">
|
<button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
|
</div>
|
</form>
|
|
<script>
|
layui.use(['layer', 'admin', 'form', 'formSelects','index','config','upload'], function () {
|
var layer = layui.layer;
|
var admin = layui.admin;
|
var form = layui.form;
|
var config = layui.config;
|
var upload = layui.upload;
|
|
form.render('radio');
|
|
admin.req('api-user/users/current', {}, function (data) {
|
// 回显user数据
|
if (data && data.code === 0) {
|
let user = data.data;
|
user.sex = user.sex.toString();
|
form.val('user-form', user);
|
$('#user-form').attr('method', 'PUT');
|
}
|
}, 'GET');
|
|
// 表单提交事件
|
form.on('submit(user-form-submit)', function (data) {
|
layer.load(2);
|
admin.req('api-user/users/saveOrUpdate', JSON.stringify(data.field), function (data) {
|
if (data.code == 0) {
|
layer.closeAll('loading');
|
$(".layui-nav-img").attr("src",$("[name=headImgUrl]").val());
|
layer.msg("操作成功", {icon: 1, time: 500});
|
|
form.val('user-form',data.data);
|
} else {
|
layer.msg(data.msg, {icon: 2, time: 500});
|
}
|
}, 'POST');
|
return false;
|
});
|
|
//文件上传
|
upload.render({
|
elem: '#fileBtn' ,
|
url: config.base_server + 'api-file/files-anon',
|
accept: 'file' ,
|
auto: true ,
|
headers: {"Authorization" : "Bearer " + config.getToken().access_token},
|
before: function(obj){
|
layer.load(); //上传loading
|
//预读本地文件示例，不支持ie8
|
obj.preview(function (index, file, result) {
|
$(".layui-upload-img").remove();
|
$('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
|
});
|
},
|
done: function(data){
|
layer.closeAll('loading');
|
console.log(data);
|
$("[name=headImgUrl]").val(data.url);
|
},
|
error: function (data) {
|
layer.closeAll('loading');
|
}
|
});
|
|
});
|
</script>
|
