文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-609190.html

<template>
	<view class="">
		<view class="content">
			<view class="login-item">
				<view class="logo"><open-data type="userAvatarUrl"></open-data></view>
			</view>
			<view class="login-tip">
				<view>申請(qǐng)獲取以下權(quán)限</view>
				<view v-if="type==1">獲得你的公開(kāi)信息 （昵稱、頭像等）</view>
			</view>
			<view class="u-flex u-row-between">
				<!-- #ifdef MP-WEIXIN -->
				<u-button hover-class="none" shape="circle" @click="handleRefuse" 
					:custom-style="{ width: '90%',marginRight: '10px'  }" v-if="type==1">拒絕</u-button>
				<u-button v-if="type==1" hover-class="none" type="primary" shape="circle" :custom-style="{ width: '90%'}"
					@click="getnickshow=true" >
					允許
				</u-button>
				<u-button v-if="type==2" hover-class="none" type="primary" shape="circle" open-type="getPhoneNumber"
					@getphonenumber='getphonenumber' :custom-style="{ width: '90%' }">
					獲取手機(jī)號(hào)
				</u-button>
				<!-- #endif -->
			</view>
		</view>

		<u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false">
			<view class="getnickbox">
				<view class="flex_align_center">
					<image :src="project.logo" class="logoimg" mode="aspectFit"></image>
					<view class="name">
						{{project.name}}
						<text>申請(qǐng)</text>
					</view>
				</view>
				<view class="m1 mt30">獲取你的頭像、昵稱</view>
				<view class="m2">展示個(gè)人信息</view>
				<view class="xin1">
					<button type="default" class=" buttoncss" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<view class=" toubox">
							<view class="t1">頭像</view>
							<view v-if="avatar == ''" class="avatarbox">
								<u-icon name="account-fill" size="50" color="#999"></u-icon>
							</view>
							<image v-else :src="avatar" class="avatarimg"></image>
						</view>
						<u-icon name="arrow-right" size="25" color="#999"></u-icon>
					</button>
				</view>
				<view class="nick">
					<view class="n1">昵稱:</view>
					<input type="nickname" v-model="nickname" placeholder="請(qǐng)輸入昵稱">
				</view>
				<view class="fixedBtn wan">
					<button size="mini" open-type="getUserInfo" @click="getUserInfo" class="btn">完成</button>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
import baseUrl from "@/api/baseUrl.js"
export default {
	data() {
		return {
			getnickshow: false,
			type: 1, // 1獲取昵稱頭像 2獲取手機(jī)號(hào) 
			project: {
				name: '',
				logo: '',
			},
			nickname: '',
			avatar: '',
		};
	},
	onShow() {
		// 獲取項(xiàng)目的 logo 和 名稱
		uni.getSystemInfo({
			success: (res) => {
				this.project.name = res.appName
			}
		})
		this.project.logo = __wxConfig.accountInfo.icon
	},
	methods: {
		handleRefuse() {
			this.$u.toast('未授權(quán)');
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000);
		},
		getCode: async function() {
			return new Promise((resolve, reject) => {
				uni.login({
					// #ifdef MP-ALIPAY
					scopes: 'auth_user',
					// #endif
					success: function(res) {
						if (res.code) {
							resolve(res.code);
						} else {
							//login成功，但是沒(méi)有取到code
							reject('未取得code');
						}
					},
					fail: function(res) {
						reject('用戶授權(quán)失敗wx.login');
					}
				});
			});
		},
		//用戶授權(quán)得到用戶的信息 微信授權(quán)
		// #ifdef MP-WEIXIN

		// 選擇用戶頭像， 重點(diǎn)， 得調(diào)用下上傳圖片接口
		chooseavatar(e) {
			let that = this;
			uni.uploadFile({
				url: baseUrl + 'upload',
				filePath: e.detail.avatarUrl,
				name: 'file',
				formData: {
					file: e.detail.avatarUrl
				},
				header: {},
				success: r => {
					let imgData = JSON.parse(r.data)
					that.avatar = imgData.url;
				}
			});
		},

		async getUserInfo() {
			let that = this;
			if (this.avatar == "") {
				uni.showToast({
					title: '請(qǐng)選擇頭像',
					icon: 'none'
				})
				return
			}
			if (this.nickname == "") {
				uni.showToast({
					title: '請(qǐng)編輯用戶昵稱或昵稱不能使用特殊字符',
					icon: 'none'
				})
				return
			}
			this.getnickshow = false;
			this.type = 2;
		},

		// 獲取手機(jī)號(hào) 登錄
		getphonenumber(e) {
			console.log(e, '手機(jī)號(hào)')
			var detail = e.detail;
			let that = this;
			if (detail.errMsg == "getPhoneNumber:ok") {
				console.log("用戶同意授權(quán)")
				uni.login({
					scopes: 'weixin',
					success: function(res) {
						if (res.code) {
							let data = {
								nickName: that.nickname,
								avatarUrl: that.avatar,
								encryptedData:detail.encryptedData,
								iv:detail.iv,
								code:res.code,
							}
							uni.request({
								url: baseUrl + 'login', //調(diào)用登錄接口
								method: 'POST',
								header: {
									'Content-Type':'application/x-www-form-urlencoded' 
								},
								data: data,
								success(e) {
									if(e.data.code == 0){
									uni.setStorageSync('id', e.data.data.id); // 存儲(chǔ)用戶id
									let pages = getCurrentPages();
									//當(dāng)從其它頁(yè)面跳轉(zhuǎn)到當(dāng)前頁(yè)面時(shí)，只跳轉(zhuǎn)一次
									let level = pages.length > 2 && (pages[pages.length - 2].route.indexOf("wxlogin") > -1) ? 2 : 1;
									uni.$u.route({
										type: 'back',
										delta: level
									})
								} else {
									that.$u.toast(e.data.msg);
									return;
								}
							},
							fail(e) {
								uni.showToast({
									icon: 'none',
									title: '網(wǎng)絡(luò)錯(cuò)誤！'
								})
							}
						})
					} 
				}
			});
				
				
			} else {
				console.log('拒絕獲取手機(jī)號(hào)');
			}
		},
		// #endif
	}
};
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		height: 100vh;
		padding: 100rpx 60rpx 0;
	}

	.login-item {
		display: flex;
		justify-content: center;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #dddddd;
	}

	.logo {
		display: block;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.login-tip {
		padding: 60rpx 0;

		&-big {
			font-size: 28rpx;
			line-height: 80rpx;
		}

		&-small {
			font-size: 12px;
			color: #9e9e9e;
		}
	}

	// 微信授權(quán)新規(guī)則
	.getnickbox {
		padding: 40rpx 20rpx;

		.logoimg {
			width: 50rpx;
			height: 50rpx;
		}

		.name {
			margin-left: 20rpx;

			text {
				margin-left: 10rpx;
			}
		}

		.m1 {
			font-weight: 500;
		}

		.m2 {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f2f2f2;
			color: #999;
			padding-top: 10rpx;
			font-size: 24rpx;
		}

		.xin1 {
			border-bottom: 1rpx solid #f2f2f2;
			margin-bottom: 30rpx;

			.toubox {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.t1 {
					font-size: 28rpx;
					margin-right: 30rpx;
				}

				.avatarbox {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.avatarimg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
			}
		}

		.buttoncss {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 0px;
			border: 0rpx solid transparent;
		}

		button::after {
			border: 0px solid rgba(0, 0, 0, .2);
		}

		.nick {
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f2f2f2;
			display: flex;
			align-items: center;
			padding-left: 14px;
			padding-right: 14px;

			.n1 {
				font-size: 28rpx;
				margin-right: 30rpx;
			}
		}

		.wan {
			height: 80rpx;
			box-shadow: 0rpx 0rpx 0rpx 0rpx;
			width: 650rpx;
			border-radius: 38rpx;
			// border: 2rpx solid #FFF579;
			margin: 30rpx auto 0;

			.btn {
				width: 650rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 38rpx;
				text-align: center;
				background: #3c9cff;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				color: #fff;
				// border: 2rpx solid #FFF579;
			}
		}

		.flex_align_center {
			display: flex;
			align-items: center;
		}

		.mt30 {
			margin-top: 30rpx;
		}
	}
.u-flex-center, .flex_align_center, .u-flex{
	display: flex;
	align-items: center;
}
.flex_jus_between,.u-row-between{
	justify-content:space-between;
}
.u-flex-center, .flex_align_center, .u-flex{
	display: flex;
	align-items: center;
}
</style>

到了這里，關(guān)于【uniapp，樣式，登錄】【微信小程序】獲取用戶昵稱和頭像 新規(guī)則 寫法，以及獲取手機(jī)號(hào)登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！