378 lines
15 KiB
HTML
378 lines
15 KiB
HTML
|
<include file="/public/header" />
|
|||
|
|
<!-- 正文开始 -->
|
|||
|
|
<style>
|
|||
|
|
.text-center {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.user-info-head {
|
|||
|
|
width: 110px;
|
|||
|
|
height: 110px;
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-head:hover:after {
|
|||
|
|
content: '\e65d';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
color: #eee;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
font-family: layui-icon;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-style: normal;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
cursor: pointer;
|
|||
|
|
line-height: 110px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-head img {
|
|||
|
|
width: 110px;
|
|||
|
|
height: 110px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-list-item {
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-list-item > .layui-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-list-item > p {
|
|||
|
|
padding-left: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dash {
|
|||
|
|
border-bottom: 1px dashed #ccc;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bd-list-item {
|
|||
|
|
padding: 14px 0;
|
|||
|
|
border-bottom: 1px solid #e8e8e8;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bd-list-item .bd-list-item-img {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
line-height: 48px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bd-list-item .bd-list-item-content {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bd-list-item .bd-list-item-lable {
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bd-list-item .bd-list-item-oper {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
text-decoration: none !important;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-form .layui-form-item {
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.editMood {
|
|||
|
|
margin-top:8px;
|
|||
|
|
height: 22px;
|
|||
|
|
}
|
|||
|
|
.editTags {
|
|||
|
|
height: 22px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-list span .layui-icon {
|
|||
|
|
right: 2px;
|
|||
|
|
top: 4px;
|
|||
|
|
z-index: 9999;
|
|||
|
|
color: red;
|
|||
|
|
width: 13px;
|
|||
|
|
height: 13px;
|
|||
|
|
line-height: 13px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-size: 10px;
|
|||
|
|
position: absolute;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-list span:hover .layui-icon {
|
|||
|
|
display: block;
|
|||
|
|
background-color: #FF5722;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-list .layui-badge {
|
|||
|
|
padding: 0px 7px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
background-color: #fafafa!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<div class="layui-fluid">
|
|||
|
|
<div class="layui-row layui-col-space15">
|
|||
|
|
<!-- 左 -->
|
|||
|
|
<div class="layui-col-sm12 layui-col-md3">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-body" style="padding: 25px;">
|
|||
|
|
<div class="text-center layui-text">
|
|||
|
|
<div class="user-info-head" id="imgHead" lay-upload="imgHead" data-url="{:url('/ajax/upload/')}?action=avatar" callback="imgHead">
|
|||
|
|
<img src="{$data.face}" class="imgHead" />
|
|||
|
|
</div>
|
|||
|
|
<h2 style="padding-top: 20px;">{$data.nickname|default='没有昵称'}</h2>
|
|||
|
|
<p style="padding-top: 8px;" class="userMood" >{$data.mood|default='双击修改您的心情吧'}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-text" style="padding-top: 30px;">
|
|||
|
|
<div class="info-list-item">
|
|||
|
|
<i class="layui-icon layui-icon-username"></i>
|
|||
|
|
<p>{$data.jobs|default='未分配'}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item">
|
|||
|
|
<i class="layui-icon layui-icon-release"></i>
|
|||
|
|
<p>{$data.group|default='未分配'}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item">
|
|||
|
|
<i class="layui-icon layui-icon-location"></i>
|
|||
|
|
<p>{$data.address|default='未填写'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dash"></div>
|
|||
|
|
<h3>{:__('标签')} <i class="layui-inputags layui-icon layui-icon-add-1" style="color: #666"></i> </h3>
|
|||
|
|
<div class="layui-badge-list" style="padding-top: 6px;"> <volist name="$data.tags" id="vo">
|
|||
|
|
<span class="layui-badge layui-bg-gray"><i class="layui-icon layui-icon-close"></i>{$vo}</span>
|
|||
|
|
</volist>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 右 -->
|
|||
|
|
<div class="layui-col-sm12 layui-col-md9">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
|
|||
|
|
<ul class="layui-tab-title">
|
|||
|
|
<li class="layui-this">{:__('基本信息')}</li>
|
|||
|
|
<li>{:__('账号绑定')}</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content">
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
|
|||
|
|
<form action="{:url('/system/admin/center')}" class="layui-form user-info-form layui-text" style="max-width: 400px;padding-top: 25px;">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">{:__('邮箱')}:</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="email" value="{$data.email}"
|
|||
|
|
class="layui-input" lay-verify="required" required/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">{:__('昵称')}:</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="nickname" value="{$data.nickname}"
|
|||
|
|
class="layui-input" lay-verify="required" required/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">{:__('个人简介')}:</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<textarea name="content" placeholder="{:__('个人简介')}" class="layui-textarea">{$data.content}</textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">{:__('街道地址')}:</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="address" value="{$data.address}"
|
|||
|
|
class="layui-input" lay-verify="required" required/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">{:__('联系电话')}:</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="area" value="{$data.area}" style="width: 60px;"
|
|||
|
|
class="layui-input" lay-verify="required" required/>
|
|||
|
|
<div style="position: absolute;left: 65px;right: 0;top: 0;">
|
|||
|
|
<input type="text" name="mobile" value="{$data.mobile}" class="layui-input"
|
|||
|
|
lay-verify="required|phone" required/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<button class="layui-btn" lay-filter="submitIframe" type="button" lay-submit>{:__('更新基本信息')}</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-tab-item" style="padding: 6px 25px 30px 25px;">
|
|||
|
|
|
|||
|
|
<div class="bd-list layui-text">
|
|||
|
|
<div class="bd-list-item">
|
|||
|
|
<div class="bd-list-item-content">
|
|||
|
|
<div class="bd-list-item-lable">{:__('密保手机')}</div>
|
|||
|
|
<div class="bd-list-item-text">{:__('已绑定手机')}：{$data.mobile}</div>
|
|||
|
|
</div>
|
|||
|
|
<a class="bd-list-item-oper">{:__('修改')}</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="bd-list-item">
|
|||
|
|
<div class="bd-list-item-content">
|
|||
|
|
<div class="bd-list-item-lable">{:__('密保邮箱')}</div>
|
|||
|
|
<div class="bd-list-item-text">{:__('已绑定邮箱')}：{$data.email}</div>
|
|||
|
|
</div>
|
|||
|
|
<a class="bd-list-item-oper">{:__('修改')}</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="bd-list-item">
|
|||
|
|
<div class="bd-list-item-img">
|
|||
|
|
<i class="layui-icon layui-icon-login-qq"
|
|||
|
|
style="color: #3492ED;font-size: 48px;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="bd-list-item-content">
|
|||
|
|
<div class="bd-list-item-lable">{:__('绑定QQ')}</div>
|
|||
|
|
<div class="bd-list-item-text">{:__('当前未绑定QQ账号')}</div>
|
|||
|
|
</div>
|
|||
|
|
<a class="bd-list-item-oper">{:__('绑定')}</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="bd-list-item">
|
|||
|
|
<div class="bd-list-item-img">
|
|||
|
|
<i class="layui-icon layui-icon-login-wechat"
|
|||
|
|
style="color: #4DAF29;font-size: 48px;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="bd-list-item-content">
|
|||
|
|
<div class="bd-list-item-lable">{:__('绑定微信')}</div>
|
|||
|
|
<div class="bd-list-item-text">{:__('当前未绑定绑定微信账号')}</div>
|
|||
|
|
</div>
|
|||
|
|
<a class="bd-list-item-oper">{:__('绑定')}</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<include file="/public/footer" />
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
layui.use(['admin'],function() {
|
|||
|
|
var admin = layui.admin;
|
|||
|
|
var jquery = layui.jquery;
|
|||
|
|
|
|||
|
|
admin.callback.imgHead = function(clickthis, colletction) {
|
|||
|
|
|
|||
|
|
var res = colletction.res;
|
|||
|
|
if (res.code == 200) { // 查找元素
|
|||
|
|
jquery('.imgHead').attr('src',res.url);
|
|||
|
|
// // 执行后端投递工作
|
|||
|
|
// jquery.post('{:url("/system/admin/modify")}',{
|
|||
|
|
// field: 'face'
|
|||
|
|
// ,face: res.url
|
|||
|
|
// },function(res) {
|
|||
|
|
// layer.msg("{:__('上传成功')}");
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
layer.error(res.msg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑签名
|
|||
|
|
jquery('.userMood').dblclick(function() {
|
|||
|
|
var that = jquery(this),
|
|||
|
|
html = that.text(); that.hide();
|
|||
|
|
jquery(that).parent().append('<input class="editMood layui-input" type="text" maxlength="12" value="' + html +'">');
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
jquery('.layui-card-body').on('blur','.editMood',function() {
|
|||
|
|
var that = jquery(this),
|
|||
|
|
html = that.val(); that.remove();
|
|||
|
|
jquery('.userMood').text(html);
|
|||
|
|
jquery('.userMood').show();
|
|||
|
|
jquery.post('{:url("/system/admin/modify")}',{
|
|||
|
|
field: 'mood'
|
|||
|
|
,mood: html
|
|||
|
|
},function(res) {
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
jquery('.layui-inputags').click(function(){
|
|||
|
|
if (jquery('.editTags').length <= 0) {
|
|||
|
|
jquery(this).parent().append('<input class="editTags layui-input" type="text" maxlength="10">');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 添加标签
|
|||
|
|
jquery('.layui-card-body').on('blur','.editTags',function() {
|
|||
|
|
var that = jquery(this),
|
|||
|
|
html = that.val(); that.remove();
|
|||
|
|
if (html == '') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
jquery.post('{:url("/system/admin/modify")}',{
|
|||
|
|
field: 'tags'
|
|||
|
|
,tags: html
|
|||
|
|
},function(res) {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
var elem = '\n';
|
|||
|
|
elem += '<span class="layui-badge layui-bg-gray">';
|
|||
|
|
elem += '<i class="layui-icon layui-icon-close"></i>';
|
|||
|
|
elem += html;
|
|||
|
|
elem += '</span>';
|
|||
|
|
jquery('.layui-badge-list').append(elem);
|
|||
|
|
}else {
|
|||
|
|
layer.error(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 删除标签
|
|||
|
|
jquery('.layui-card-body').on('click','.layui-badge-list i',function() {
|
|||
|
|
var that = jquery(this),
|
|||
|
|
html = that.parent('span').text();
|
|||
|
|
jquery.post('{:url("/system/admin/modify")}',{
|
|||
|
|
field: 'tags'
|
|||
|
|
,del: 1
|
|||
|
|
,tags: html
|
|||
|
|
},function(res) {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
that.parent('span').remove();
|
|||
|
|
}else {
|
|||
|
|
layer.error(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
layer.tips('双击心情可以编辑','.userMood',{
|
|||
|
|
tips: [1, '#000']
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 后端绑定操作
|
|||
|
|
// TODO...
|
|||
|
|
})
|
|||
|
|
</script>
|