微信小程序获取微信头像、微信昵称

微信小程序获取头像昵称

<template>
	<view class="top-user">
		<view class="top-content">
			<image @click="show=true" :src="avatar" mode="aspectFill" style="width: 116rpx;height: 116rpx;border-radius: 50%;"></image>
			<view class="user-box">
				<text class="name">{{name}}</text>
				<button class="huoqu-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >
					<view class="tel">
						<text>绑定手机号</text>
					</view>
				</button>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10">
			<view class="nicheng">
				<view class="chahao">
					<text>获取您的昵称、头像</text>
					<u-icon name="close" @click="show= !show" color=" rgba(56, 56, 56, 1)"
						size="20"></u-icon>
				</view>
				<view class="nicheng-content">
					<view class="tishi">
						<text>获取用户头像、昵称完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</text>
					</view>
					<button class="avatar-wrapper item" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<view class="item" style="margin: 0;padding: 0;border: 0;">
							<text>头像</text>
							<image class="avatar" :src="avatar" mode="aspectFill"></image>
						</view>
						<text>></text>
					</button>
					<view class="item">
						<text>昵称</text>
						<view class="nicheng-input">
							<input type="nickname" placeholder="请输入昵称" v-model="name" border="none" @change="formSubmit"></input>
						</view>
					</view>
				</view>
				<view class="baocun" @click="baocun">
					<text>保存</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
				name:"微信用户",
				show:false,
			}
		},
		methods: {
			onChooseAvatar(e) {
				console.log('e----------',e.detail.avatarUrl);
				this.avatar=e.detail.avatarUrl
			},
			formSubmit(e){
				this.name= e.detail.value
			},
			// 获取手机号
			getPhoneNumber(e){
				console.log("e---",e.detail.code);
			},
			// baocun
			baocun(){
				this.show=!this.show
			},
		},
	}
</script>

<style lang="scss" scoped>
	.top-user{
		padding-left: 30rpx;
		box-sizing: border-box;
		.top-content{
			display: flex;
			margin-top: 40rpx;
			.user-box{
				display: flex;
				flex-direction: column;
				margin-left: 24.85rpx;
				.name{
					font-size: 34.62rpx;
					font-weight: 500;
					color: rgba(55, 57, 72, 1);
					margin-bottom: 16rpx;
				}
				
				.tel{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 199rpx;
					height: 42.31rpx;
					border-radius: 44.16rpx;
					background: rgba(255, 255, 255, 0.5);
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(46, 58, 89, 1);
				}
			}
		}
	}
	.nicheng {
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		.jiantou {
			width: 12px;
			height: 24rpx;
			display: block;
		}
		
		.chahao{
			height: 108rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			text{
				font-size: 16px;
				font-weight: 600;
				letter-spacing: 0px;
				line-height: 21px;
				color: rgba(0, 0, 0, 1);
			}
		}
		.nicheng-content{
			.tishi{
				margin-top: 10rpx;
				padding-bottom: 13px;
				border-bottom:1rpx solid rgba(0, 0, 0, 0.1); 
				text{
					font-size: 15px;
					font-weight: 400;
					line-height: 23.8px;
					color: rgba(110, 110, 110, 1);					
				}
	
			}
			.item{
				display: flex;
				align-items: center;
				padding:15px 0;
				box-sizing: border-box;
				border-bottom:1rpx solid rgba(0, 0, 0, 0.1); 
				text{
					display: block;
					margin-right: 24rpx;
					font-size: 17px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
				}
				.avatar{
					width: 51px;
					height: 51px;
					opacity: 1;
					border-radius: 4px;
				}
			}
			.avatar-wrapper{
				border: 0;
				border-bottom:1rpx solid rgba(0, 0, 0, 0.1); 
				background-color: rgba(0, 0, 0, 0);
				justify-content: space-between;
				&::after{
					border: 0;
				}
			}
		}
		.baocun {
			width: 120px;
			height: 40px;
			margin: auto;
			margin-top: 12.5px;
			margin-bottom: 71px;
			opacity: 1;
			border-radius: 4px;
			background: rgba(7, 193, 96, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		
			text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	
</style>