uniapp中小程序最新获取用户头像与昵称操作
小程序最新获取头像与昵称,和小程序不支持网络资源文件修改的bug
·
<template>
<view class="containar">
<view class="avatarUrl">
<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
<image :src="avatarUrl" class="refreshIcon"></image>
</button>
</view>
<view class="userName">
<text>昵称:</text>
<input type="nickName" class="weui-input" :value="userName" @blur="bindblur" placeholder="请输入昵称"
@input="bindinput" />
</view>
<view class="userPhone">
<view>手机</view>
<view class="weui-input">{{phone}}</view>
<view class="changebtn" @click="ChangePhone()">更换</view>
</view>
<view class="d-center">
<view class="bcbtn" @click="onSubmit">保存</view>
</view>
</view>
</template>
<script>
import {
aUser,//修改
getUser //回显
} from '../../api/index.js'
const uploadPath = getApp().globalData.api_url + '/system/file/picture'
export default {
data() {
return {
avatarUrl: '',
userName: '',
phone: ''
};
},
onShow() {
// 下载图片,注意下载图片地址必须得是图片存放地址,downloadFile合法域名
this.loadUserInfoData()
},
methods: {
// 跳转到修改手机号码页面
ChangePhone() {
uni.navigateTo({
url: '/subpackage/user/edit-phone'
})
},
// 将网络照片进行下载,然后进行上传(小程序不支持直接进行修改网络资源文件)
loadUserInfoData() {
getUser().then(res => {
this.userName = res.data.nickname
this.avatarUrl = res.data.avatar
this.phone = res.data.phone
uni.downloadFile({
url: this.avatarUrl, //仅为示例,并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
this.avatarUrl = res.tempFilePath
}
}
});
})
},
bindblur(e) {
this.userName = e.detail.value; // 获取微信昵称
},
bindinput(e) {
this.userName = e.detail.value; // 获取微信昵称
},
// 上传头像
onChooseavatar(e) {
let self = this;
let {
avatarUrl
} = e.detail;
this.avatarUrl = avatarUrl
},
// 提交信息
onSubmit() {
var that = this
uni.login({
"provider": "weixin",
// "onlyAuthorize": true, // 微信登录仅请求授权认证
success: function(event) {
const {
code
} = event
const name = that.userName
// 判断头像以及昵称不为空 再上传
if (that.userName && that.avatarUrl) {
let a = uni.uploadFile({
url: uploadPath, // 仅为示例,非真实的接口地址
filePath: that.avatarUrl,
name: 'file',
header: {
Authorization: 'Bearer ' + that.$store.getters.accessToken,
'tenant-id': 1
},
success: (res) => {
let userInfo = {
avatarFileId: JSON.parse(res.data).data.id,
nickname: that.userName
}
aUser(userInfo).then(res => {
uni.$u.toast('已保存')
setTimeout(() => {
uni.switchTab({
url: '/pages/user/user'
})
}, 300)
})
}
});
} else {
uni.showToast({
icon: 'none',
title: '请上传头像并填写昵称'
})
return false;
}
},
fail: function(err) {
console.log('失败')
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #fff;
}
.containar {
height: 100vh;
background: #fff;
.avatarUrl {
padding: 80rpx 0 40rpx;
button {
background: #fff;
line-height: 80rpx;
height: auto;
border: none !important;
width: auto;
// padding: 20rpx 30rpx;
margin: 0;
display: flex;
border: none;
justify-content: center;
align-items: center;
&::after {
border: none;
}
.refreshIcon {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background-color: #ccc;
}
.jt {
width: 14rpx;
height: 28rpx;
}
}
}
.userName {
background: #fff;
padding: 20rpx 30rpx 40rpx;
display: flex;
align-items: center;
justify-content: center;
.weui-input {
margin-left: 60rpx;
padding-bottom: 10rpx;
border-bottom: 1px solid #eee;
}
}
.bcbtn {
width: 500rpx;
height: 80rpx;
color: #fff;
margin-top: 200rpx;
text-align: center;
line-height: 80rpx;
border-radius: 40rpx;
background: var(--themeColor);
}
.userPhone {
background: #fff;
padding: 0 120rpx 40rpx;
display: flex;
align-items: center;
.changebtn {
font-size: 14px;
color: var(--themeColor);
margin-left: 70rpx;
}
.weui-input {
padding-left: 90rpx;
}
}
.btn {
width: 300rpx;
display: flex;
text-align: center;
justify-content: center;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)