155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="change_avatar">
|
||
<u-avatar :src="avatar" size="140rpx" shape="circle" @click="changeAvatar()"></u-avatar>
|
||
</view>
|
||
|
||
<view>
|
||
<u--form labelPosition="left" :model="model">
|
||
<u-form-item label="修改昵称" prop="userInfo.name" borderBottom>
|
||
<u--input v-model="model.userInfo.name" border="none" placeholder="请输入您的昵称"
|
||
placeholderStyle="color: #CCCCCC;font-size: 24rpx;"></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
<view style="height: 230rpx;"></view>
|
||
<u-button type="success" text="确定" color="#0EBB5B" @click="handleSubmit()"></u-button>
|
||
</view>
|
||
<view style="margin:0 20rpx;">
|
||
<u-overlay :show="!isLoad">
|
||
<login @success="reOnLoad()" @fail="failToLoad()"></login>
|
||
</u-overlay>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
apiService
|
||
} from '../../service/request'
|
||
import login from 'pages/my/login/login'
|
||
export default {
|
||
components: {
|
||
login
|
||
},
|
||
data() {
|
||
return {
|
||
avatar: '',
|
||
model: {
|
||
userInfo: {
|
||
name: ''
|
||
},
|
||
},
|
||
isLoad: true,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUser()
|
||
if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
|
||
this.isLoad = false
|
||
// uni.navigateTo({
|
||
// url: '../../pages/my/login/login'
|
||
// })
|
||
return
|
||
}
|
||
this.isLoad = true
|
||
},
|
||
methods: {
|
||
//获取头像昵称
|
||
getUser() {
|
||
this.$apiServe.getUser().then(res => {
|
||
console.log('头像昵称', res.data);
|
||
var data = res.data.data
|
||
this.avatar = data.avatar
|
||
this.model.userInfo.name = data.nickname
|
||
}).finally(_ => {})
|
||
},
|
||
updatePromise(filePath) {
|
||
return new Promise((resolve, reject) => {
|
||
const token = uni.getStorageSync('loginToken')
|
||
const a = uni.uploadFile({
|
||
url: apiService.uploadImgUrl + '/upload/image/',
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
"Content-Type": "multipart/form-data",
|
||
'Authorization': token
|
||
},
|
||
success: (res) => {
|
||
console.log('上传头像', JSON.parse(res.data));
|
||
// setTimeout(() => {
|
||
resolve(JSON.parse(res.data).data.uri)
|
||
// }, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
//点击头像修改
|
||
changeAvatar() {
|
||
uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
|
||
count: 1, //默认选择1张图片
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
success: (res) => {
|
||
// console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
|
||
// this.avatar = res.tempFilePaths[0] //更新本地浏览头像图片
|
||
if (res.tempFilePaths[0]) {
|
||
this.updatePromise(res.tempFilePaths[0]) //上传图片
|
||
}
|
||
const result = this.updatePromise(res.tempFilePaths[0])
|
||
result.then(value => {
|
||
this.avatar = value
|
||
})
|
||
}
|
||
});
|
||
},
|
||
//提交头像和昵称
|
||
handleSubmit() {
|
||
console.log('昵称', this.model.userInfo.name);
|
||
console.log('头像', this.avatar);
|
||
this.$apiServe.updateUser({
|
||
nickname: this.model.userInfo.name,
|
||
avatar: this.avatar
|
||
}).then(res => {
|
||
console.log('修改头像昵称==', res);
|
||
this.$toast.success(res.data.msg)
|
||
uni.reLaunch({
|
||
url: '/pages/my/my'
|
||
})
|
||
}).finally(_ => {})
|
||
},
|
||
reOnLoad() {
|
||
if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
|
||
this.$toast.warn('登录失败请重试')
|
||
this.isLoad = false
|
||
// uni.navigateTo({
|
||
// url: '../../pages/my/login/login'
|
||
// })
|
||
return
|
||
}
|
||
this.isLoad = true
|
||
},
|
||
failToLoad() {
|
||
// uni.navigateBack({
|
||
// url: '/pages/my/my'
|
||
// })
|
||
this.$toast.warn('登录失败请重试')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.change_avatar {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 60rpx 0;
|
||
}
|
||
|
||
.u-button {
|
||
width: 644rpx !important;
|
||
height: 86rpx !important;
|
||
background: #0EBB5B;
|
||
border-radius: 20rpx !important;
|
||
}
|
||
</style>
|