xie.bx
3 years ago
18 changed files with 429 additions and 44 deletions
@ -0,0 +1,21 @@ |
|||||
|
package com.bx.implatform.dto; |
||||
|
|
||||
|
import io.swagger.annotations.ApiModel; |
||||
|
import io.swagger.annotations.ApiModelProperty; |
||||
|
import lombok.Data; |
||||
|
|
||||
|
import javax.validation.constraints.NotEmpty; |
||||
|
|
||||
|
@Data |
||||
|
@ApiModel("修改密码DTO") |
||||
|
public class ModifyPwdDTO { |
||||
|
|
||||
|
@NotEmpty(message="旧用户密码不可为空") |
||||
|
@ApiModelProperty(value = "旧用户密码") |
||||
|
private String oldPassword; |
||||
|
|
||||
|
@NotEmpty(message="新用户密码不可为空") |
||||
|
@ApiModelProperty(value = "新用户密码") |
||||
|
private String newPassword; |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<view class="page mine-edit"> |
||||
|
<uni-forms ref="form" :modelValue="userInfo" label-position="top" |
||||
|
label-width="100%"> |
||||
|
<uni-forms-item label="头像:" name="headImage"> |
||||
|
<image-upload :onSuccess="onUnloadImageSuccess"> |
||||
|
<image :src="userInfo.headImageThumb" class="head-image"></image> |
||||
|
</image-upload> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="用户名:" name="userName"> |
||||
|
<uni-easyinput type="text" v-model="userInfo.userName" :disabled="true" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="昵称:" name="nickName"> |
||||
|
<uni-easyinput v-model="userInfo.nickName" type="text" :placeholder="userInfo.userName" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="性别:" name="sex"> |
||||
|
<radio-group @change="onSexchange"> |
||||
|
<label class="radio"><radio value="0" :checked="userInfo.sex==0" />男</label> |
||||
|
<label class="radio"><radio value="1" :checked="userInfo.sex==1" />女 </label> |
||||
|
</radio-group> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="签名:" name="signature"> |
||||
|
<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="编辑个性标签,展示我的独特态度" /> |
||||
|
</uni-forms-item> |
||||
|
</uni-forms> |
||||
|
<button type="primary" @click="onSubmit()">提交</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userInfo: {} |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onSexchange(e){ |
||||
|
this.userInfo.sex=e.detail.value; |
||||
|
}, |
||||
|
onUnloadImageSuccess(file, res) { |
||||
|
this.userInfo.headImage = res.data.originUrl; |
||||
|
this.userInfo.headImageThumb = res.data.thumbUrl; |
||||
|
}, |
||||
|
onSubmit(){ |
||||
|
this.$http({ |
||||
|
url: "/user/update", |
||||
|
method: "PUT", |
||||
|
data: this.userInfo |
||||
|
}).then(()=>{ |
||||
|
this.$store.commit("setUserInfo",this.userInfo); |
||||
|
uni.showToast({ |
||||
|
title:"修改成功", |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
// 深拷贝一份数据 |
||||
|
let mine = this.$store.state.userStore.userInfo; |
||||
|
this.userInfo = JSON.parse(JSON.stringify(mine)); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.mine-edit { |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.head-image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,105 @@ |
|||||
|
<template> |
||||
|
<view class="page mine-password"> |
||||
|
<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="100%" > |
||||
|
<uni-forms-item label="原密码:" name="oldPassword"> |
||||
|
<uni-easyinput type="password" v-model="formData.oldPassword" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="新密码:" name="newPassword"> |
||||
|
<uni-easyinput type="password" v-model="formData.newPassword" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="确认密码:" name="confirmPassword"> |
||||
|
<uni-easyinput type="password" v-model="formData.confirmPassword" /> |
||||
|
</uni-forms-item> |
||||
|
<button type="primary" @click="onSubmit()">提交</button> |
||||
|
</uni-forms> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formData: { |
||||
|
oldPassword: "", |
||||
|
newPassword: "", |
||||
|
confirmPassword: "" |
||||
|
}, |
||||
|
rules: { |
||||
|
oldPassword: { |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入原密码', |
||||
|
}] |
||||
|
}, |
||||
|
newPassword: { |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入新密码', |
||||
|
}, { |
||||
|
validateFunction: function(rule, value, data, callback) { |
||||
|
console.log(data) |
||||
|
if (data.confirmPassword != data.newPassword) { |
||||
|
callback("两次输入的密码不一致"); |
||||
|
} |
||||
|
if (data.newPassword == data.oldPassword) { |
||||
|
callback("新密码不能和原密码一致"); |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
}] |
||||
|
}, |
||||
|
confirmPassword: { |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入确认密码', |
||||
|
}, { |
||||
|
validateFunction: function(rule, value, data, callback) { |
||||
|
console.log(data) |
||||
|
if (data.confirmPassword != data.newPassword) { |
||||
|
callback("两次输入的密码不一致"); |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
}] |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
console.log(this.formData) |
||||
|
this.$refs.form.validate().then(res => { |
||||
|
console.log('表单数据信息：', res); |
||||
|
this.$http({ |
||||
|
url: "/modifyPwd", |
||||
|
method: "PUT", |
||||
|
data: this.formData |
||||
|
}).then((res) => { |
||||
|
uni.showToast({ |
||||
|
title: "修改密码成功", |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
console.log('表单错误信息：', err); |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
// 需要在onReady中设置规则 |
||||
|
this.$refs.form.setRules(this.rules) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.mine-password { |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -1,22 +1,132 @@ |
|||||
<template> |
<template> |
||||
<view class="tab-page"> |
<view class="page mine"> |
||||
|
<view class="content" @click="onModifyInfo()"> |
||||
|
<view class="avatar"> |
||||
|
<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-primary"> |
||||
|
<text class="info-username"> |
||||
|
{{userInfo.userName}} |
||||
|
</text> |
||||
|
<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="20" |
||||
|
color="darkblue"></uni-icons> |
||||
|
<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="20" |
||||
|
color="darkred"></uni-icons> |
||||
|
</view> |
||||
|
<text> |
||||
|
昵称 ：{{userInfo.nickName}} |
||||
|
</text> |
||||
|
<text> |
||||
|
签名 ：{{userInfo.signature}} |
||||
|
</text> |
||||
|
</view> |
||||
|
<view class="info-arrow">></view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="btn-group"> |
||||
|
<button class="btn" type="primary" @click="onModifyPassword()">修改密码</button> |
||||
|
<button class="btn" type="warn" @click="onQuit()">退出</button> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return {} |
||||
|
|
||||
} |
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
onModifyInfo() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/mine/mine-edit" |
||||
|
}) |
||||
|
}, |
||||
|
onModifyPassword() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/mine/mine-password" |
||||
|
}) |
||||
|
}, |
||||
|
onQuit() { |
||||
|
uni.showModal({ |
||||
|
title: '确认退出?', |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
getApp().quit(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
userInfo() { |
||||
|
return this.$store.state.userStore.userInfo; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
|
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style scoped lang="scss"> |
||||
|
.mine { |
||||
|
.content { |
||||
|
height: 200rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.avatar { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
|
||||
|
.head-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 10%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
flex-direction: column; |
||||
|
padding-left: 40rpx; |
||||
|
flex: 1; |
||||
|
|
||||
|
.info-primary { |
||||
|
display: flex; |
||||
|
|
||||
|
.info-username { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-arrow { |
||||
|
width: 50rpx; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
margin: 20rpx; |
||||
|
border-bottom: 1px solid #aaaaaa; |
||||
|
} |
||||
|
|
||||
|
.btn-group { |
||||
|
margin: 100rpx; |
||||
|
|
||||
|
.btn { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue