143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="avatar">
|
||
<u-avatar @click="changeAvatar()" size="140rpx" :src="Info.avatar"></u-avatar>
|
||
</view>
|
||
<!-- <view class="name-edit">
|
||
<text>用户名：</text>
|
||
<u-input border="surround" v-model="Info.username"></u-input>
|
||
</view> -->
|
||
<view class="info-name">
|
||
<u--form labelPosition="left" :model="Info">
|
||
<u-form-item label="修改昵称" prop="Info.username" borderBottom>
|
||
<u--input v-model="Info.username" border="none" placeholder="请输入您的昵称"
|
||
placeholderStyle="color: #CCCCCC;font-size: 26rpx;"></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view style="height: 100rpx;"></view>
|
||
<u-button @click="editInfo(Info)" color="#339967">提交</u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
Info: {
|
||
avatar: '',
|
||
username: '',
|
||
avatarUrl: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//获取头像昵称
|
||
getUserInfo() {
|
||
this.$api.getUser().then(res => {
|
||
const data = res.data.data
|
||
if (data) {
|
||
this.Info.avatar = this.$api.imgUrl + data.avatar
|
||
this.avatarUrl = data.avatar
|
||
this.Info.username = data.nickname
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
updatePromise(filePath) {
|
||
return new Promise((resolve, reject) => {
|
||
const token = uni.getStorageSync('loginToken')
|
||
const a = uni.uploadFile({
|
||
url: this.$api.uploadImgUrl,
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
"Content-Type": "multipart/form-data",
|
||
'Authorization': token
|
||
},
|
||
success: (res) => {
|
||
resolve(JSON.parse(res.data).data.url)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
changeAvatar() {
|
||
uni.chooseImage({
|
||
count: 1, //默认选择1张图片
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
success: (chooseImageRes) => {
|
||
this.Info.avatar = chooseImageRes.tempFilePaths[0] //更新本地浏览头像图片
|
||
if (chooseImageRes.tempFilePaths[0]) {
|
||
const result = this.updatePromise(chooseImageRes.tempFilePaths[0]) //上传图片
|
||
result.then(value => {
|
||
this.avatarUrl = '/' + value
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
editInfo() {
|
||
// let resdata = JSON.stringify(data);
|
||
// this.$api.editPersonInfo(resdata).then(res => {
|
||
// console.log(resdata);
|
||
// console.log(res)
|
||
// })
|
||
this.$api.editPersonInfo({
|
||
nickname: this.Info.username,
|
||
avatar: this.avatarUrl
|
||
}).then(res => {
|
||
console.log('修改头像昵称==', res);
|
||
this.$toast.success(res.data.msg)
|
||
if (res.data.code == 1) {
|
||
uni.reLaunch({
|
||
url: '/pages/my/my'
|
||
})
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
},
|
||
onLoad() {
|
||
let that = this
|
||
this.getUserInfo()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
.avatar {
|
||
margin: 60rpx 0;
|
||
/* width: 100%; */
|
||
/* height: 200rpx; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.name-edit {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.info-name {
|
||
.u-form-item {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.u-form-item__body__left {
|
||
width: 80px !important;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.u-button {
|
||
width: 644rpx !important;
|
||
height: 86rpx !important;
|
||
background: #0EBB5B;
|
||
border-radius: 20rpx !important;
|
||
}
|
||
</style> |