慧治理更新个人信息

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>
<button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
<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>
</div>
<div class="item">
<p>用户昵称</p>
<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>
<input class="item-right" v-else type="text" v-model="userName" @blur="handleWeixinSync">
</div>
@@ -20,7 +21,7 @@
<div class="item">
<p>手机号</p>
<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>
<input class="item-right" v-else type="number" v-model="userPhone" @blur="handleWeixin" maxlength="11">
</div>
@@ -101,7 +102,6 @@ export default {
},
success: uploadFileRes => {
this.avatar = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
console.log(JSON.parse(uploadFileRes.data).data[0].split(';')[0])
resolve(uploadFileRes)
},
fail: err => {
@@ -172,7 +172,6 @@ export default {
width: 100%;
box-sizing: content-box;
display: flex;
justify-content: space-between;
p {
color: #333;

View File

@@ -5,7 +5,7 @@
<div class="wrap" @click="handleLogin()">
<div class="user-img-div">
<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 class="user-info">
<div class="option">

View File

@@ -5,22 +5,27 @@
<div class="item solid">
<p class="mar-t22">头像</p>
<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>
</div>
<div class="item">
<p>用户昵称</p>
<div v-if="!editNickName" @click="editNickName=true">
<p class="name" v-text="nickName"/>
<div class="item-right" v-if="!editNickName" @click="editNickName=true, userName = user.nickName">
<p class="name">{{ user.nickName || ''}}</p>
</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 class="item-content mar-b8">
<div class="item">
<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 class="item-content" @click="onLogout">
<div class="item">
@@ -40,11 +45,21 @@ export default {
...mapState(['user', 'token']),
nickName: {
set(v) {
this.userName = v
},
get() {
const {nickName} = this.user
return nickName
}
},
phone: {
set(v) {
this.userPhone = v
},
get() {
const { phone } = this.user
return phone
}
}
},
onLoad() {
@@ -52,11 +67,29 @@ export default {
},
data() {
return {
editNickName: false
editNickName: false,
editPhone: false,
avatar: '',
userName: '',
userPhone: ''
}
},
methods: {
...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) {
return new Promise((resolve, reject) => {
uni.uploadFile({
@@ -68,6 +101,7 @@ export default {
Authorization: uni.getStorageSync('token')
},
success: uploadFileRes => {
this.avatar = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
resolve(uploadFileRes)
},
fail: err => {
@@ -93,9 +127,23 @@ export default {
}
})
},
handleWeixin({ detail }) {
if (detail.value) {
this.phone = detail.value
this.updateInfo()
}
},
handleWeixinSync({detail}) {
const {value: nickName, avatarUrl} = detail
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;
.info-list {
margin: 0 0 16px 0;
padding: 50px 32px 0 32px;
box-sizing: border-box;
.item-content {
padding: 0 32px;
box-sizing: border-box;
background-color: #fff;
border-radius: 32px;
}
.item {
@@ -121,11 +172,11 @@ export default {
width: 100%;
box-sizing: content-box;
display: flex;
justify-content: space-between;
p {
color: #333;
font-weight: 400;
width: 200px;
}
div {
@@ -133,11 +184,19 @@ export default {
font-size: 28px;
}
.item-right {
width: calc(100% - 200px);
text-align: right;
font-size: 28px;
p {
width: 100%;
}
}
.user-img-div {
width: 104px;
height: 104px;
border-radius: 50%;
overflow: hidden;
width: calc(100% - 200px);
text-align: right;
display: inline-block;
}
.user-img {