130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="user-info">
|
||
<view class="info-item">
|
||
<view class="label">头像：</view>
|
||
<view class="info" @click="handleAvatarClick">
|
||
<u-avatar size="60" :src="userInfo.avatar"></u-avatar>
|
||
<u-icon class="btn" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="label">昵称：</view>
|
||
<view v-if="!nameEditOn" class="info">
|
||
<view class="value">{{ userInfo.nickname }}</view>
|
||
<u-icon
|
||
class="btn"
|
||
name="edit-pen"
|
||
@click="
|
||
tempName = userInfo.nickname
|
||
nameEditOn = true
|
||
"
|
||
></u-icon>
|
||
</view>
|
||
<view v-else class="name-edit">
|
||
<u--input maxlength="10" border="bottom" v-model="tempName"></u--input>
|
||
<view class="edit-btn-group">
|
||
<u-tag class="edit-btn" text="保存" plain size="mini" type="primary" @click="handleSaveBtnClick"></u-tag>
|
||
<u-tag
|
||
class="edit-btn"
|
||
text="取消"
|
||
plain
|
||
size="mini"
|
||
type="info"
|
||
@click="
|
||
tempName = ''
|
||
nameEditOn = false
|
||
"
|
||
></u-tag>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="label">手机：</view>
|
||
<view class="info">
|
||
<view class="value">{{ userInfo.mobile }}</view>
|
||
<u-icon class="btn" name="edit-pen"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserInfo, updateAvatar, updateNickname } from '../../api/user'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
nickname: '',
|
||
avatar: '',
|
||
mobile: ''
|
||
},
|
||
avatarFiles: [],
|
||
nameEditOn: false,
|
||
tempName: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadUserInfoData()
|
||
},
|
||
methods: {
|
||
loadUserInfoData() {
|
||
getUserInfo().then(res => {
|
||
this.userInfo = res.data
|
||
})
|
||
},
|
||
handleAvatarClick() {
|
||
uni.chooseImage({
|
||
success: chooseImageRes => {
|
||
const tempFilePaths = chooseImageRes.tempFilePaths
|
||
updateAvatar(tempFilePaths[0]).then(res => {
|
||
this.userInfo.avatar = res.data
|
||
this.$store.commit('SET_USER_INFO', this.userInfo)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handleSaveBtnClick() {
|
||
updateNickname({ nickname: this.tempName }).then(res => {
|
||
this.nameEditOn = false;
|
||
this.userInfo.nickname = this.tempName
|
||
this.$store.commit('SET_USER_INFO', this.userInfo)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-info {
|
||
.info-item {
|
||
padding: 20rpx 60rpx;
|
||
border-bottom: $custom-border-style;
|
||
@include flex-space-between;
|
||
.label {
|
||
font-size: 30rpx;
|
||
}
|
||
.info {
|
||
@include flex-right;
|
||
.value {
|
||
font-size: 30rpx;
|
||
}
|
||
.btn {
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
.name-edit {
|
||
@include flex-left;
|
||
.edit-btn-group {
|
||
@include flex;
|
||
.edit-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|