微信小程序授权登录弹出框 获取用户头像 用户名

<template>
	<view class="page">
		<view class="container">
			<view class="flex-center">
				<view class="avatar-logo">
					<button type="default" open-type="chooseAvatar"></button>
					<!-- <u-avatar size="100rpx"></u-avatar> -->
					<image src="../../static/logo.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
				</view>

				<view class="input-bar">
					<view class="left_label">昵称</view>
					<input placeholder="请输入昵称" v-model="userData.nickname" type="nickname" />
				</view>
			</view>
		</view>

		<view class="container">
			<button @click="isShow = true">授权用户信息</button>
		</view>
		<u-popup :show="isShow" mode="bottom" closeable round="12" @close="isShow=false">
			<view class="box-alert">
				<view class="logo-bar">
					<!-- <image class="left_img" src="../../../static/logo.png"></image> -->
					<text class="app-title"> uboxui</text>
					<text class="sq">申请</text>
				</view>
				<view class="title-des">
					获取你的昵称、头像
				</view>
				<view class="from-box">
					<view class="form-item" :class="(!userData.imgUrl && errorBottom)?'wargin-border':''">
						<text class="left-label">头像</text>
						<view class="right-content">
							<view class="avatar-btn">
								<button size="mini" open-type="chooseAvatar" @chooseavatar="onchooseavatar">
									头像
								</button>
								<u-avatar size="38" :src="userData.imgUrl" />
							</view>
							</u-icon>
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
					</view>
					<view class="">
						{{userData.nickname}}
					</view>
					<view class="form-item" :class="(!userData.nickname && errorBottom )?'wargin-border':''">
						<text class="left-label">昵称</text>
						<view class="right-content click-text">
							<input :adjust-position="false" placeholder="点击填写" type="nickname"
								v-model="userData.nickname" @blur="onNickname" />
						</view>
					</view>
				</view>
				<view class="btn-bottom">
					<u-button text="允许" @click="submit" color="#E8F1FF"></u-button>
					<u-button text="拒绝" @click="isShow = false"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				KeyboardHeight: 0,
				userData: {
					imgUrl: "",
					nickname: ""
				},
				errorBottom: false
			}
		},
		onLoad() {
			console.log(this.$u.config.v);
		},
		methods: {
			//监听昵称变化
			onNickname(e) {
				this.userData.nickname = e.detail.value;
			},
			// 头像回调
			onchooseavatar(e) {
				console.log('头像', e)
				this.userData.imgUrl = e.detail.avatarUrl
			},
			// 提交
			submit() {
				console.log(this.userData);
				if (!this.userData.imgUrl || !this.userData.nickname) {
					this.errorBottom = true;
				} else {
					this.errorBottom = false;
					console.log('用户数据', this.userData)
					this.isShow = false;
				}
			}
		},

	}
</script>

<style lang="scss">
	.page {
		.container {
			padding: 10rpx 20rpx;
		}

		.flex-center {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar-logo {
				width: 100rpx;
				height: 100rpx;
				position: relative;

				button {
					margin: 0;
					height: 100rpx;
					width: 100rpx;
					position: absolute;
					z-index: 10;
					opacity: 0;
				}

				.u-avatar {
					position: absolute;
					left: 0;
					top: 0;

				}
			}


			.input-bar {
				background-color: #FFFFFF;
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				border-top: 1rpx gainsboro solid;
				border-bottom: 1rpx gainsboro solid;
				font-size: 34rpx;

				.left_label {
					width: 150rpx;
				}

				input {
					flex: 1;
				}
			}

		}

		.box-alert {
			width: 100vw;
			min-height: 40vh;
			height: auto;
			padding: 36rpx 40rpx;
			box-sizing: border-box;

			.wargin-border {
				border-bottom: 1rpx solid #e87619 !important;

			}

			.avatar-btn {
				position: relative;
				display: flex;

				button {
					// width: 100%;
					margin: 0;
					// 隐藏button，从视角层消失
					opacity: 0;
					z-index: 10;
					// 注意，button的优先级需要大于图片，否则点击效果无效
				}

				image {
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 0;
					background-color: gainsboro;
					border-radius: 50%;
				}

			}

			.btn-bottom {
				margin-top: 50rpx;

				button:nth-child(1) {
					color: #1F53C0 !important;
				}

				button {
					margin-top: 10rpx;

				}
			}

			.title-des {
				font-size: 36rpx;
				font-weight: 600;
				margin-top: 18rpx;
			}

			.suiji-text {
				color: #69719A;
				margin-top: 20rpx;
			}

			.from-box {
				margin-top: 50rpx;

				.form-item {
					padding: 10rpx 0;
					min-height: 80rpx;
					display: flex;
					margin-top: 10rpx;
					border-bottom: 1rpx solid gainsboro;
					align-items: center;

					.left-label {
						width: 90rpx;
					}

					.right-content {
						flex: 1;
						font-size: 25rpx;
						// color: #DDDEE0;
						display: flex;
						justify-content: space-between;
					}
				}
			}

			.logo-bar {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				min-height: 70rpx;

				text {

					line-height: 70rpx;
				}

				image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.app-title {
					font-size: 34rpx;
				}

				.sq {
					font-size: 32rpx;
					font-weight: 600;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>