用户信息修改，头像上传，密码修改
This commit is contained in:
zhujunjieit
parent
f278d03caa
commit
1527c4c0a0
|
|
@ -10,17 +10,17 @@
|
|||
|
||||
<div class="layui-container fly-marginTop fly-user-main" >
|
||||
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user" th:fragment="userinfo">
|
||||
<!-- <li class="layui-nav-item" id="home">
|
||||
<a href="home.html">
|
||||
<i class="layui-icon"></i>
|
||||
我的主页
|
||||
</a>
|
||||
</li>-->
|
||||
<!-- <li class="layui-nav-item" id="home">
|
||||
<a href="home.html">
|
||||
<i class="layui-icon"></i>
|
||||
我的主页
|
||||
</a>
|
||||
</li>-->
|
||||
<!--<li class="layui-nav-item" id="index">-->
|
||||
<!--<a href="index.html">-->
|
||||
<!--<i class="layui-icon"></i>-->
|
||||
<!--用户中心-->
|
||||
<!--</a>-->
|
||||
<!--<a href="index.html">-->
|
||||
<!--<i class="layui-icon"></i>-->
|
||||
<!--用户中心-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<li class="layui-nav-item" id="set">
|
||||
<a href="set.html">
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
</a>
|
||||
</li>
|
||||
<!--<li class="layui-nav-item" id="message">-->
|
||||
<!--<a href="message.html">-->
|
||||
<!--<i class="layui-icon"></i>-->
|
||||
<!--我的消息-->
|
||||
<!--</a>-->
|
||||
<!--<a href="message.html">-->
|
||||
<!--<i class="layui-icon"></i>-->
|
||||
<!--我的消息-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<li class="layui-nav-item" id="errorquestion">
|
||||
<a th:href="@{/web/user/errorquestion.html}">
|
||||
|
|
@ -64,127 +64,108 @@
|
|||
<i class="layui-icon"></i>
|
||||
</div>
|
||||
<div class="site-mobile-shade"></div>
|
||||
|
||||
|
||||
<div class="site-tree-mobile layui-hide">
|
||||
<i class="layui-icon"></i>
|
||||
</div>
|
||||
<div class="site-mobile-shade"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="fly-panel fly-panel-user" pad20>
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="user">
|
||||
<ul class="layui-tab-title" id="LAY_mine">
|
||||
<li class="layui-this" lay-id="info">我的资料</li>
|
||||
<li lay-id="avatar">头像</li>
|
||||
<li lay-id="pass">密码</li>
|
||||
<li lay-id="bind">帐号绑定</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content" style="padding: 20px 0;">
|
||||
<div class="layui-form layui-form-pane layui-tab-item layui-show">
|
||||
<form method="post">
|
||||
<div class="layui-form-item">
|
||||
<label for="L_email" class="layui-form-label">邮箱</label>
|
||||
<label for="loginName" class="layui-form-label">账户</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off" value="" class="layui-input">
|
||||
<input type="text" id="loginName" name="loginName" th:value="${user.loginName}" required lay-verify="email" autocomplete="off" value="" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="activate.html" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div>
|
||||
<div class="layui-form-mid layui-word-aux hide">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="activate.html" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_username" class="layui-form-label">昵称</label>
|
||||
<label for="userName" class="layui-form-label">姓名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="L_username" name="username" required lay-verify="required" autocomplete="off" value="" class="layui-input">
|
||||
<input type="text" id="userName" name="userName" th:value="${user.userName}" required lay-verify="required" autocomplete="off" value="" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="sex" value="0" checked title="男">
|
||||
<input type="radio" name="sex" value="1" title="女">
|
||||
<input type="radio" name="sex" value="0" th:checked="${user.sex==1?'checked':''}" title="男">
|
||||
<input type="radio" name="sex" value="1" th:checked="${user.sex==0?'checked':''}" title="女">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_city" class="layui-form-label">城市</label>
|
||||
<label for="phonenumber" class="layui-form-label">手机号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="L_city" name="city" autocomplete="off" value="" class="layui-input">
|
||||
<input type="text" id="phonenumber" name="phonenumber" th:value="${user.phonenumber}" autocomplete="off" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label for="L_sign" class="layui-form-label">签名</label>
|
||||
<label for="remark" class="layui-form-label">签名</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;"></textarea>
|
||||
<textarea placeholder="随便写些什么刷下存在感" id="remark" th:text="${user.remark}" name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" key="set-mine" lay-filter="*" lay-submit>确认修改</button>
|
||||
<button type="button" class="layui-btn" key="set-mine" lay-filter="*" onclick="updateUserInfo()">确认修改</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form layui-form-pane layui-tab-item">
|
||||
<div class="layui-form-item">
|
||||
<div class="avatar-add">
|
||||
<p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
|
||||
<button type="button" class="layui-btn upload-img" id="upload">
|
||||
<i class="layui-icon"></i>上传头像
|
||||
</button>
|
||||
<img id="avatar" th:src="${user.avatar}">
|
||||
<span class="loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form layui-form-pane layui-tab-item">
|
||||
<div class="layui-form-item">
|
||||
<div class="avatar-add">
|
||||
<p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
|
||||
<button type="button" class="layui-btn upload-img">
|
||||
<i class="layui-icon"></i>上传头像
|
||||
</button>
|
||||
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
|
||||
<span class="loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form layui-form-pane layui-tab-item">
|
||||
<div class="layui-form-item">
|
||||
<label for="oldPassword" class="layui-form-label">当前密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="oldPassword" name="oldPassword" onblur="checkPassword()" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form layui-form-pane layui-tab-item">
|
||||
<form action="/user/repass" method="post">
|
||||
<div class="layui-form-item">
|
||||
<label for="L_nowpass" class="layui-form-label">当前密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_pass" class="layui-form-label">新密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">6到16个字符</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_repass" class="layui-form-label">确认密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" key="set-mine" lay-filter="*" lay-submit>确认修改</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="layui-form-item">
|
||||
<label for="password" class="layui-form-label">新密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">6到16个字符</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form layui-form-pane layui-tab-item">
|
||||
<ul class="app-bind">
|
||||
<li class="fly-msg app-havebind">
|
||||
<i class="iconfont icon-qq"></i>
|
||||
<span>已成功绑定，您可以使用QQ帐号直接登录Fly社区，当然，您也可以</span>
|
||||
<a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>
|
||||
|
||||
<!-- <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
|
||||
<span>，即可使用QQ帐号登录Fly社区</span> -->
|
||||
</li>
|
||||
<li class="fly-msg">
|
||||
<i class="iconfont icon-weibo"></i>
|
||||
<!-- <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
|
||||
<a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a> -->
|
||||
|
||||
<a href="" class="acc-weibo" type="weibo_id" onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
|
||||
<span>，即可使用微博帐号登录Fly社区</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-form-item">
|
||||
<label for="confirm" class="layui-form-label">确认密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="confirm" name="confirm" required lay-verify="required" onblur="checkTwoPassword() " autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button type="button" class="layui-btn" onclick="updateUserPassword()">确认修改</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jquery-validate 表单验证插件 -->
|
||||
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
|
||||
|
||||
<div class="fly-footer" th:replace="web/index::cmsBottom">
|
||||
</div>
|
||||
|
|
@ -192,7 +173,131 @@
|
|||
$(function(){
|
||||
$("#set").addClass("layui-this")
|
||||
})
|
||||
|
||||
var userId="[[${user?.userId}]]";
|
||||
layui.use('upload', function() {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload;
|
||||
//普通图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#upload'
|
||||
,url: '/upload/oss'
|
||||
,data:{module:"train/course"}//文件存放路径
|
||||
,before: function(obj){
|
||||
//预读本地文件示例，不支持ie8
|
||||
// obj.preview(function(index, file, result){
|
||||
// $('#avatar').attr('src', result); //图片链接（base64）
|
||||
// });
|
||||
}
|
||||
,done: function(res){
|
||||
//如果上传失败
|
||||
if(res.code !=200){
|
||||
return layer.msg('上传失败');
|
||||
}
|
||||
//上传成功
|
||||
if(res.code ==200){
|
||||
$('#avatar').attr('src', res.data); //图片链接（base64）
|
||||
var data={userId:userId,
|
||||
avatar:res.data
|
||||
}
|
||||
updateUserAvatar(data);
|
||||
}
|
||||
}
|
||||
,error: function(){
|
||||
//演示失败状态，并实现重传
|
||||
var demoText = $('#demoText');
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function(){
|
||||
uploadInst.upload();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
function updateUserAvatar(data) {
|
||||
$.ajax({
|
||||
cache : true,
|
||||
type : "POST",
|
||||
url : ctx + "web/user/update",
|
||||
data : data,
|
||||
async : false,
|
||||
error : function(request) {
|
||||
$.modal.alertError("系统错误");
|
||||
},
|
||||
success : function(data) {
|
||||
return layer.msg('修改成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateUserInfo() {
|
||||
var data={
|
||||
userId:userId,
|
||||
loginName:$("#loginName").val(),
|
||||
phonenumber:$("#phonenumber").val(),
|
||||
remark:$("#remark").val(),
|
||||
userName:$("#userName").val()
|
||||
}
|
||||
updateUserAvatar(data);
|
||||
}
|
||||
var flag=false;
|
||||
function checkPassword() {
|
||||
var data={
|
||||
loginName:$("#loginName").val(),
|
||||
password:$("#oldPassword").val()
|
||||
}
|
||||
$.ajax({
|
||||
cache : true,
|
||||
type : "get",
|
||||
url : ctx + "system/user/profile/checkPassword",
|
||||
data : data,
|
||||
dataType:"json",
|
||||
async : false,
|
||||
error : function(request) {
|
||||
$.modal.alertError("系统错误");
|
||||
},
|
||||
success : function(res) {
|
||||
if(!res){
|
||||
return layer.msg('旧密码与当前密码不一致');
|
||||
}else{
|
||||
flag=true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function checkTwoPassword() {
|
||||
var password=$("#password").val();
|
||||
var confirm=$("#confirm").val();
|
||||
if(password!==confirm){
|
||||
layer.msg('两次密码不一致');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function updateUserPassword() {
|
||||
var password=$("#password").val();
|
||||
var confirm=$("#confirm").val();
|
||||
if(password!==confirm||!flag){
|
||||
layer.msg('两次密码不一致');
|
||||
return false;
|
||||
}
|
||||
var data={
|
||||
userId:userId,
|
||||
loginName:$("#loginName").val(),
|
||||
password:$("#password").val()
|
||||
}
|
||||
$.ajax({
|
||||
type : "POST",
|
||||
url : ctx + "web/user/resetPwd",
|
||||
data : data,
|
||||
error : function(request) {
|
||||
$.modal.alertError("系统错误");
|
||||
},
|
||||
success : function(data) {
|
||||
return layer.msg('修改成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue