166 lines
5.9 KiB
HTML
166 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>控制台 | 用户中心</title>
|
|||
|
|
<include file="user:include"/>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-layout layui-layout-admin">
|
|||
|
|
<div class="layui-header">
|
|||
|
|
<div class="layui-logo layui-side-body layui-hide-xs layui-bg-black">
|
|||
|
|
<!-- // 可以增加LOGO-->
|
|||
|
|
<img src="/static/system/images/logo.png" style="margin-bottom: 8px;margin-right: 10px" alt="logo" width="22" height="22" >
|
|||
|
|
<span class="logo-text">用户中心</span>
|
|||
|
|
</div>
|
|||
|
|
<ul class="layui-nav layui-layout-left">
|
|||
|
|
<li id="shrink" class="layui-nav-item layui-show-xs-inline-block" >
|
|||
|
|
<i class="layui-icon layui-icon-shrink-right"></i>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="layui-nav layui-layout-right">
|
|||
|
|
|
|||
|
|
<li class="layui-nav-item" lay-unselect="">
|
|||
|
|
<a href="/" title="主页">
|
|||
|
|
<i class="layui-icon fa-home"></i>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="layui-nav-item" >
|
|||
|
|
<a href="javascript:;" id="notice">
|
|||
|
|
<i class="layui-icon fa-bell-o"></i>
|
|||
|
|
<span class="layui-badge-dot"></span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
|
|||
|
|
<a href="javascript:;"><img src="{$user.avatar}" alt="{$user.nickname}" class="layui-nav-img">{$user.nickname}</a>
|
|||
|
|
<dl class="layui-nav-child">
|
|||
|
|
<dd><a lay-open data-title="修改密码" data-url="/user/changepwd" data-area="470px,330px" href="javascript:;">修改密码</a>
|
|||
|
|
</dd>
|
|||
|
|
<dd><a href="/user/logout">退出</a></dd>
|
|||
|
|
</dl>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<i id="skin" class="layui-icon fa-moon-o"></i>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-side layui-side-body layui-bg-black">
|
|||
|
|
<div class="layui-side-scroll">
|
|||
|
|
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
|||
|
|
<include file="user:userNav"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-body">
|
|||
|
|
<!-- 内容主体区域 -->
|
|||
|
|
<iframe id="iframe" src="/user/profile" frameborder="0" class="layui-layer-load" onload="this.className='';" ></iframe>
|
|||
|
|
</div>
|
|||
|
|
<include file="user:footer"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script !src="">
|
|||
|
|
|
|||
|
|
layui.use(['jquery','upload'],function(){
|
|||
|
|
let $ = layui.jquery;
|
|||
|
|
let upload = layui.upload;
|
|||
|
|
|
|||
|
|
// 默认展现首个菜单栏
|
|||
|
|
$('.layui-nav-tree .layui-nav-item').each(function (k,e) {
|
|||
|
|
if ($(e).find('dl.layui-nav-child').length) {
|
|||
|
|
$(e).addClass('layui-nav-itemed');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 点击切换页面地址
|
|||
|
|
$('body').on('click', '.layui-nav-tree a', function () {
|
|||
|
|
let href = $(this).attr('lay-href');
|
|||
|
|
if (href && href !== 'javascript:;') {
|
|||
|
|
$('#iframe').attr('class','layui-layer-load');
|
|||
|
|
$('#iframe').attr('src',href);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 上传头像
|
|||
|
|
upload.render({
|
|||
|
|
elem: '.layui-user-avatar'
|
|||
|
|
,url: '/user/avatars'
|
|||
|
|
,method: 'post'
|
|||
|
|
,accept: 'file'
|
|||
|
|
,before: function(res) {
|
|||
|
|
layer.msg('上传中');
|
|||
|
|
},done: function(res, index, upload) {
|
|||
|
|
// 上传成功
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
layer.msg(res.msg);
|
|||
|
|
$('#imgHead img').attr('src',res.url);
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg,'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let leftAnimate = function (action = true) {
|
|||
|
|
if (action) {
|
|||
|
|
$('.layui-side').animate({width: '0px'});
|
|||
|
|
$('.layui-body,.layui-footer').animate({left: '5px'});
|
|||
|
|
} else {
|
|||
|
|
$('.layui-side').animate({width: '200px'});
|
|||
|
|
$('.layui-body,.layui-footer').animate({left: '200px'});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$('#shrink i.layui-icon').click(function () {
|
|||
|
|
let right = 'layui-icon-shrink-right',
|
|||
|
|
left = 'layui-icon-spread-left';
|
|||
|
|
if ($(this).hasClass(right)) {
|
|||
|
|
leftAnimate();
|
|||
|
|
$(this).removeClass(right).addClass(left);
|
|||
|
|
|
|||
|
|
}else {
|
|||
|
|
leftAnimate(false);
|
|||
|
|
$(this).removeClass(left).addClass(right);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 初始化宽度
|
|||
|
|
if ($(window).width() <= 992) {
|
|||
|
|
$('#shrink i.layui-icon-shrink-right').removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let skin = layui.data('skin').theme || undefined;
|
|||
|
|
if (skin === 'layui-bg-white') {
|
|||
|
|
$('.layui-side-body').removeClass('layui-bg-black').addClass(skin);
|
|||
|
|
$('#skin').removeClass('fa-moon-o').addClass('fa-sun-o');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换皮肤
|
|||
|
|
$('#skin').on('click',function () {
|
|||
|
|
let value = $(this).hasClass('fa-moon-o');
|
|||
|
|
console.log(value)
|
|||
|
|
if (value) {
|
|||
|
|
$(this).removeClass('fa-moon-o').addClass('fa-sun-o');
|
|||
|
|
$('.layui-side-body').removeClass('layui-bg-black').addClass('layui-bg-white');
|
|||
|
|
layui.data('skin',{
|
|||
|
|
key: 'theme',
|
|||
|
|
value: 'layui-bg-white'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
$(this).removeClass('fa-sun-o').addClass('fa-moon-o');
|
|||
|
|
$('.layui-side-body').removeClass('layui-bg-white').addClass('layui-bg-black');
|
|||
|
|
layui.data('skin',{
|
|||
|
|
key: 'theme',
|
|||
|
|
value: 'layui-bg-black'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|