uniapp中小程序最新获取用户头像与昵称操作_uniapp小程序获取用户头像和昵称

<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>