130 lines
3.3 KiB
Vue
130 lines
3.3 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 login from 'pages/my/login/login'
|
||
export default {
|
||
components: {
|
||
login
|
||
},
|
||
data() {
|
||
return {
|
||
avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
|
||
model: {
|
||
userInfo: {
|
||
name: ''
|
||
},
|
||
},
|
||
isLoad: true,
|
||
}
|
||
},
|
||
onLoad() {
|
||
if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
|
||
this.isLoad = false
|
||
// uni.navigateTo({
|
||
// url: '../../pages/my/login/login'
|
||
// })
|
||
return
|
||
}
|
||
this.isLoad = true
|
||
},
|
||
methods: {
|
||
//修改头像
|
||
changeAvatar() {
|
||
uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
|
||
count: 1, //默认选择1张图片
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
success: (res) => {
|
||
console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
|
||
this.avatar = res.tempFilePaths[0] //更新本地浏览头像图片
|
||
|
||
// this.update(res.tempFilePaths[0]) //上传图片
|
||
}
|
||
});
|
||
},
|
||
update(filePath) {
|
||
const _this = this
|
||
const token = uni.getStorageSync('loginToken')
|
||
const res = uni.uploadFile({
|
||
url: _this.action, //仅为示例，非真实的接口地址
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
'Authorization': token
|
||
},
|
||
success: (res) => {
|
||
// console.log(JSON.parse(res.data).data) 处理格式
|
||
this.weChatRegister({
|
||
headimg: REQUEST_BASE_URL + '/' + JSON.parse(res.data).data
|
||
}) //将真实图片地址请求给后端做修改
|
||
|
||
}
|
||
});
|
||
},
|
||
//提交头像和昵称
|
||
handleSubmit() {
|
||
this.$apiServe.updateUser({
|
||
nickname: this.model.userInfo.name,
|
||
avatar: this.avatar
|
||
}).then(res => {
|
||
console.log('修改头像昵称==', res);
|
||
}).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>
|