慧治理更新个人信息

This commit is contained in:
shijingjing
2023-03-13 16:18:17 +08:00
parent 79abba1c1b
commit ca0563e470
3 changed files with 75 additions and 17 deletions

View File

@@ -6,12 +6,13 @@
<p class="mar-t22">头像</p> <p class="mar-t22">头像</p>
<button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync"> <button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
<img v-if="user.avatarUrl" :src="user.avatarUrl" class="user-img"> <img v-if="user.avatarUrl" :src="user.avatarUrl" class="user-img">
<img v-else src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" class="user-img">
</button> </button>
</div> </div>
<div class="item"> <div class="item">
<p>用户昵称</p> <p>用户昵称</p>
<div class="item-right" v-if="!editNickName" @click="editNickName=true, userName= user.nickName"> <div class="item-right" v-if="!editNickName" @click="editNickName=true, userName= user.nickName">
<p class="name">{{ user.nickName }}</p> <p class="name">{{ user.nickName || '' }}</p>
</div> </div>
<input class="item-right" v-else type="text" v-model="userName" @blur="handleWeixinSync"> <input class="item-right" v-else type="text" v-model="userName" @blur="handleWeixinSync">
</div> </div>
@@ -20,7 +21,7 @@
<div class="item"> <div class="item">
<p>手机号</p> <p>手机号</p>
<div class="item-right" v-if="!!!editPhone" @click="editPhone=true, userPhone= user.phone"> <div class="item-right" v-if="!!!editPhone" @click="editPhone=true, userPhone= user.phone">
<p class="name">{{ user.phone }}</p> <p class="name">{{ user.phone || ''}}</p>
</div> </div>
<input class="item-right" v-else type="number" v-model="userPhone" @blur="handleWeixin" maxlength="11"> <input class="item-right" v-else type="number" v-model="userPhone" @blur="handleWeixin" maxlength="11">
</div> </div>
@@ -101,7 +102,6 @@ export default {
}, },
success: uploadFileRes => { success: uploadFileRes => {
this.avatar = JSON.parse(uploadFileRes.data).data[0].split(';')[0] this.avatar = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
console.log(JSON.parse(uploadFileRes.data).data[0].split(';')[0])
resolve(uploadFileRes) resolve(uploadFileRes)
}, },
fail: err => { fail: err => {
@@ -172,7 +172,6 @@ export default {
width: 100%; width: 100%;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
justify-content: space-between;
p { p {
color: #333; color: #333;

View File

@@ -5,7 +5,7 @@
<div class="wrap" @click="handleLogin()"> <div class="wrap" @click="handleLogin()">
<div class="user-img-div"> <div class="user-img-div">
<img :src="user.avatarUrl" alt="" class="user-img" v-if="user.id && user.avatarUrl"/> <img :src="user.avatarUrl" alt="" class="user-img" v-if="user.id && user.avatarUrl"/>
<open-data type="userAvatarUrl" lang="zh_CN" class="user-img" v-else/> <img class="user-img" src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" v-else alt="">
</div> </div>
<div class="user-info"> <div class="user-info">
<div class="option"> <div class="option">

View File

@@ -5,22 +5,27 @@
<div class="item solid"> <div class="item solid">
<p class="mar-t22">头像</p> <p class="mar-t22">头像</p>
<button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync"> <button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
<img :src="user.avatarUrl" class="user-img"> <img v-if="user.avatarUrl" :src="user.avatarUrl" class="user-img">
<img v-else src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" class="user-img">
</button> </button>
</div> </div>
<div class="item"> <div class="item">
<p>用户昵称</p> <p>用户昵称</p>
<div v-if="!editNickName" @click="editNickName=true"> <div class="item-right" v-if="!editNickName" @click="editNickName=true, userName = user.nickName">
<p class="name" v-text="nickName"/> <p class="name">{{ user.nickName || ''}}</p>
</div> </div>
<input v-else type="nickname" class="editNickName" v-model="nickName" @blur="handleWeixinSync"> <input class="item-right" v-else type="text" v-model="nickName" @blur="handleWeixinSync">
</div> </div>
</div> </div>
<div class="item-content mar-b8"> <div class="item-content mar-b8">
<div class="item"> <div class="item">
<p>手机号</p> <p>手机号</p>
<div>{{ user.phone || '' }}</div> <div class="item-right" v-if="!!!editPhone" @click="editPhone = true, userPhone = user.phone">
<p class="name">{{ user.phone || '' }}</p>
</div>
<input class="item-right" v-else type="number" v-model="userPhone" @blur="handleWeixin" maxlength="11">
</div> </div>
</div> </div>
<div class="item-content" @click="onLogout"> <div class="item-content" @click="onLogout">
<div class="item"> <div class="item">
@@ -40,11 +45,21 @@ export default {
...mapState(['user', 'token']), ...mapState(['user', 'token']),
nickName: { nickName: {
set(v) { set(v) {
this.userName = v
}, },
get() { get() {
const {nickName} = this.user const {nickName} = this.user
return nickName return nickName
} }
},
phone: {
set(v) {
this.userPhone = v
},
get() {
const { phone } = this.user
return phone
}
} }
}, },
onLoad() { onLoad() {
@@ -52,11 +67,29 @@ export default {
}, },
data() { data() {
return { return {
editNickName: false editNickName: false,
editPhone: false,
avatar: '',
userName: '',
userPhone: ''
} }
}, },
methods: { methods: {
...mapActions(['getUserInfo', 'autoLogin']), ...mapActions(['getUserInfo', 'autoLogin']),
updateInfo() {
this.$instance.post(`/app/appwechatuser/update-nickName`, null, {
params: {
id: this.user.id,
nickName: this.userName ? this.userName : this.user.nickName,
avatarUrl: this.avatar ? this.avatar : this.user.avatarUrl,
phone: this.userPhone ? this.userPhone : this.user.phone,
}
}).then(res => {
if (res?.code == 0) {
this.$u.toast('修改成功')
}
})
},
upLoad(img) { upLoad(img) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.uploadFile({ uni.uploadFile({
@@ -68,6 +101,7 @@ export default {
Authorization: uni.getStorageSync('token') Authorization: uni.getStorageSync('token')
}, },
success: uploadFileRes => { success: uploadFileRes => {
this.avatar = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
resolve(uploadFileRes) resolve(uploadFileRes)
}, },
fail: err => { fail: err => {
@@ -93,9 +127,23 @@ export default {
} }
}) })
}, },
handleWeixin({ detail }) {
if (detail.value) {
this.phone = detail.value
this.updateInfo()
}
},
handleWeixinSync({detail}) { handleWeixinSync({detail}) {
const {value: nickName, avatarUrl} = detail const {value: nickName, avatarUrl} = detail
this.autoLogin({nickName, avatarUrl}) this.autoLogin({nickName, avatarUrl})
if (avatarUrl?.length) {
this.upLoad(avatarUrl).then(() => {
this.updateInfo()
})
}
if (nickName) {
this.updateInfo()
}
} }
} }
} }
@@ -108,11 +156,14 @@ export default {
background-color: #F5F5F5; background-color: #F5F5F5;
.info-list { .info-list {
margin: 0 0 16px 0; padding: 50px 32px 0 32px;
box-sizing: border-box;
.item-content { .item-content {
padding: 0 32px; padding: 0 32px;
box-sizing: border-box;
background-color: #fff; background-color: #fff;
border-radius: 32px;
} }
.item { .item {
@@ -121,11 +172,11 @@ export default {
width: 100%; width: 100%;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
justify-content: space-between;
p { p {
color: #333; color: #333;
font-weight: 400; font-weight: 400;
width: 200px;
} }
div { div {
@@ -133,11 +184,19 @@ export default {
font-size: 28px; font-size: 28px;
} }
.item-right {
width: calc(100% - 200px);
text-align: right;
font-size: 28px;
p {
width: 100%;
}
}
.user-img-div { .user-img-div {
width: 104px; width: calc(100% - 200px);
height: 104px; text-align: right;
border-radius: 50%; display: inline-block;
overflow: hidden;
} }
.user-img { .user-img {