<title>设置我的资料</title>
|
<div class="layui-card layadmin-header">
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
<a lay-href="">主页</a>
|
<a><cite>设置</cite></a>
|
<a><cite>我的资料</cite></a>
|
</div>
|
</div>
|
<style>
|
/* 用户信息 */
|
.user-info-head { width: 110px; height: 110px; line-height: 110px; position: relative; display: inline-block; border: 2px solid #eee; border-radius: 50%; overflow: hidden; cursor: pointer; margin: 0 auto; }
|
.user-info-head:hover:after { content: '\e681'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: #fff; background-color: rgba(0, 0, 0, 0.3); font-size: 28px; padding-top: 2px; font-style: normal; font-family: layui-icon; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
.user-info-head img { width: 110px; height: 110px; }
|
.user-info-list-item { position: relative; padding-bottom: 8px; }
|
.user-info-list-item > .layui-icon { position: absolute; }
|
.user-info-list-item > p { padding-left: 30px; }
|
.layui-line-dash { border-bottom: 1px dashed #ccc; margin: 15px 0; }
|
/* 基本信息 */
|
#userInfoForm .layui-form-item { margin-bottom: 25px; }
|
/* 账号绑定 */
|
.user-bd-list-item { padding: 14px 60px 14px 10px; border-bottom: 1px solid #e8e8e8; position: relative; }
|
.user-bd-list-item .user-bd-list-lable { color: #333; margin-bottom: 4px; }
|
.user-bd-list-item .user-bd-list-oper { position: absolute; top: 50%; right: 10px; margin-top: -8px; cursor: pointer; }
|
.user-bd-list-item .user-bd-list-img { width: 48px; height: 48px; line-height: 48px; position: absolute; top: 50%; left: 10px; margin-top: -24px; }
|
.user-bd-list-item .user-bd-list-img + .user-bd-list-content { margin-left: 68px; }
|
</style>
|
<script type="text/html" template lay-type="Post" lay-url="{{ layui.setter.apiUrl }}Api/Tools/GetEditUserInfo" lay-done="layui.data.done(d);">
|
<div class="layui-fluid">
|
<div class="layui-row layui-col-space15">
|
<!-- 左 -->
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="layui-card" style="min-height: 528px;">
|
<div class="layui-card-body" style="padding: 25px;">
|
<div class="text-center layui-text">
|
<div class="user-info-head" id="userInfoHead">
|
{{# if(d.data.avatar){ }}
|
<img src="{{d.data.avatar}}" alt="" />
|
{{# }else{ }}
|
<img src="images/empty.png" />
|
{{# } }}
|
</div>
|
<h2 style="padding-top: 20px;">{{d.data.nickName||''}}</h2>
|
<p style="padding-top: 8px;">{{d.data.introduction||'这家伙很懒，什么都不说~'}}</p>
|
</div>
|
<div class="layui-text" style="padding-top: 30px;">
|
<div class="user-info-list-item">
|
<i class="layui-icon layui-icon-username"></i>
|
<p>登录账号: {{d.data.userName||''}}</p>
|
</div>
|
<div class="user-info-list-item">
|
<i class="layui-icon layui-icon-release"></i>
|
<p>
|
用户角色:
|
{{# layui.each(d.data.roles, function(index, item){ }}
|
<span class="layui-badge layui-badge-gray">{{ item.roleName }}</span>
|
{{# }); }}
|
</p>
|
</div>
|
<div class="user-info-list-item">
|
<i class="layui-icon layui-icon-flag"></i>
|
<p>组织机构: {{d.data.organizationName||''}}</p>
|
</div>
|
</div>
|
<div class="layui-line-dash"></div>
|
<h3>标签</h3>
|
<div class="layui-badge-list" style="padding-top: 6px;">
|
<span class="layui-badge layui-bg-gray">很有想法的</span>
|
<span class="layui-badge layui-bg-gray">专注设计</span>
|
<span class="layui-badge layui-bg-gray">辣~</span>
|
<span class="layui-badge layui-bg-gray">大长腿</span>
|
<span class="layui-badge layui-bg-gray">川妹子</span>
|
<span class="layui-badge layui-bg-gray">海纳百川</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 右 -->
|
<div class="layui-col-sm12 layui-col-md9">
|
<div class="layui-card">
|
<!-- 选项卡开始 -->
|
<div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
|
<ul class="layui-tab-title">
|
<li class="layui-this">个人信息</li>
|
</ul>
|
<div class="layui-tab-content">
|
<!-- tab1 -->
|
<div class="layui-tab-item layui-show">
|
<div class="layui-form" id="LAY-app-CoreCmsSms-editLoginUserInfoForm" lay-filter="LAY-app-CoreCmsSms-editLoginUserInfoForm" style="max-width: 400px;padding: 25px 10px 0 0;">
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">用户名:</label>
|
<div class="layui-input-block">
|
<input name="nickName" value="{{d.data.nickName||''}}" class="layui-input"
|
lay-verType="tips" lay-verify="required" required />
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">性别:</label>
|
<div class="layui-input-block">
|
<select name="sex" lay-verType="tips" lay-verify="required">
|
<option value="1" {{d.data.sex==1?'selected="selected"':''}}>男</option>
|
<option value="2" {{d.data.sex==2?'selected="selected"':''}}>女</option>
|
<option value="3" {{d.data.sex==3?'selected="selected"':''}}>未知</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">手机号:</label>
|
<div class="layui-input-block">
|
<input name="phone" placeholder="请输入手机号" class="layui-input"
|
value="{{d.data.phone||''}}" lay-verType="tips" lay-verify="phoneX" />
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<div class="layui-inline">
|
<label class="layui-form-label" for="avatar">头像：</label>
|
<div class="layui-input-inline">
|
<input name="avatar" type="hidden" id="avatar" value="{{d.data.avatar}}" size="15" autocomplete="off" class="layui-input" lay-reqText="请输入【缩略图】" />
|
</div>
|
<div class="layui-input-inline">
|
<div class="layui-upload">
|
<button type="button" class="layui-btn" id="upBtn">上传图片</button>
|
<div class="layui-upload-list">
|
{{# if(d.data.avatar){ }}
|
<img class="layui-upload-img" src="{{d.data.avatar}}" id="viewImgBox">
|
{{# }else{ }}
|
<img class="layui-upload-img" src="images/empty.png" id="viewImgBox">
|
{{# } }}
|
<p id="viewTextBox"></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">真实名称:</label>
|
<div class="layui-input-block">
|
<input name="trueName" value="{{d.data.trueName||''}}" class="layui-input" placeholder="请输入真实名称" lay-verType="tips" />
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">身份证号码:</label>
|
<div class="layui-input-block">
|
<input name="idCard" value="{{d.data.idCard||''}}" class="layui-input" placeholder="请输入身份证号码" lay-verType="tips" />
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">邮箱:</label>
|
<div class="layui-input-block">
|
<input name="email" value="{{d.data.email||''}}" class="layui-input" placeholder="请输入邮箱" lay-verType="tips" lay-verify="emailX" />
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">个人简介:</label>
|
<div class="layui-input-block">
|
<textarea name="introduction" placeholder="请输入个人简介" class="layui-textarea">{{d.data.introduction||''}}</textarea>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<button class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsSms-editLoginUserInfo-submit">保存修改</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- //选项卡结束 -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</script>
|
<script>
|
layui.data.done = function (d) {
|
console.log(d);
|
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper'],
|
function () {
|
var $ = layui.$
|
, form = layui.form
|
, admin = layui.admin
|
, laydate = layui.laydate
|
, upload = layui.upload
|
, coreHelper = layui.coreHelper;
|
|
//普通图片上传
|
var uploadInst = upload.render({
|
elem: '#upBtn'
|
, url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'
|
, before: function (obj) {
|
obj.preview(function (index, file, result) {
|
$('#viewImgBox').attr('src', result);
|
});
|
}
|
, done: function (res) {
|
if (res.code > 0) { return layer.msg('上传失败'); }
|
layer.msg('上传成功');
|
$("#avatar").val(res.data.fileUrl);
|
}
|
, error: function () {
|
var viewTextBox = $('#viewTextBox');
|
viewTextBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
viewTextBox.find('.demo-reload').on('click', function () {
|
uploadInst.upload();
|
});
|
}
|
});
|
|
//重载form
|
form.render(null, 'LAY-app-CoreCmsSms-editLoginUserInfoForm');
|
//监听提交
|
form.on('submit(LAY-app-CoreCmsSms-editLoginUserInfo-submit)',
|
function (data) {
|
var field = data.field; //获取提交的字段
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
coreHelper.Post("Api/Tools/EditLoginUserInfo", field, function (e) {
|
console.log(e)
|
if (e.code === 0) {
|
layer.msg(e.msg, { time: 1000 },
|
function () {
|
admin.events.refresh();
|
});
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
});
|
|
})
|
};
|
</script>
|
