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> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
return {} |
|||
}, |
|||
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> |
|||
|
|||
<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> |
|||
Loading…
Reference in new issue