380 lines
15 KiB
HTML
380 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-size="1024" data-url="{:url('/Ajax/upload/')}" 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="userDataTab">
|
||
<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() {
|
||
let $ = layui.jquery;
|
||
let admin = layui.admin;
|
||
|
||
admin.callback.imgHead = function (clickthis, colletction) {
|
||
|
||
var res = colletction.res;
|
||
if (res.code === 200) { // 查找元素
|
||
$('.imgHead').attr('src', res.url);
|
||
// 执行后端投递工作
|
||
$.post('{:url("/system/admin/modify")}', {
|
||
field: 'face'
|
||
, face: res.url
|
||
}, function (res) {
|
||
layer.msg("{:__('上传成功')}");
|
||
})
|
||
} else {
|
||
layer.error(res.msg);
|
||
}
|
||
}
|
||
|
||
// 编辑签名
|
||
$('.userMood').dblclick(function () {
|
||
var that = $(this),
|
||
html = that.text();
|
||
that.hide();
|
||
$(that).parent().append('<input class="editMood layui-input" type="text" maxlength="12" value="' + html + '">');
|
||
})
|
||
|
||
$('.layui-card-body').on('blur', '.editMood', function () {
|
||
var that = $(this),
|
||
html = that.val();
|
||
that.remove();
|
||
$('.userMood').text(html);
|
||
$('.userMood').show();
|
||
$.post('{:url("/system/admin/modify")}', {
|
||
field: 'mood'
|
||
, mood: html
|
||
}, function (res) {
|
||
})
|
||
})
|
||
|
||
$('.layui-inputags').click(function () {
|
||
if ($('.editTags').length <= 0) {
|
||
$(this).parent().append('<input class="editTags layui-input" type="text" maxlength="10">');
|
||
}
|
||
})
|
||
|
||
// 添加标签
|
||
$('.layui-card-body').on('blur', '.editTags', function () {
|
||
var that = $(this),
|
||
html = that.val();
|
||
that.remove();
|
||
if (html === '') {
|
||
return;
|
||
}
|
||
$.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>';
|
||
$('.layui-badge-list').append(elem);
|
||
} else {
|
||
layer.error(res.msg);
|
||
}
|
||
})
|
||
})
|
||
|
||
// 删除标签
|
||
$('.layui-card-body').on('click', '.layui-badge-list i', function () {
|
||
var that = $(this),
|
||
html = that.parent('span').text();
|
||
$.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> |