uniapp微信小程序授权登录

<template>
	<view>
		<LotusLoading :lotusLoadingData="lotusLoadingData" style="width: 100%;height: 100vh;position: absolute;z-index: 99;"></LotusLoading>
		<view class="login" v-if="show">
			<image src='../../static/login-bg(1).png'></image>
			<view class='content'>
				<view class="text">尊贵的会员，请您先登录</view>
				<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo" class="button font-36 font-blod">微信授权登录</button>
				<view class="bottom">
					<view class="agree">登录即表示同意</view>
					<view class="deal">《服务协议及隐私条款》</view>
				</view>
			</view>
		</view>
		<view class="login" v-if="callshow">
			<image src='../../static/login-bg(1).png'></image>
			<view class="content">
				<view class="info">
					<view class="top">
						<image style="width: 64rpx;height: 64rpx;" src="../../static/iconsuccess.png"></image>
						<text class="logo">微信授权成功！</text>
					</view>
					<view class="middle">为了更好的为您提供服务，请绑定手机</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" class="button" withCredentials="true">
						授权绑定手机
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				callshow:false,
				lotusLoadingData: {
					isShow: false //设置显示加载中组件true显示false隐藏
				},
				userInfo: {}
			};
		},
		onLoad(options) {
			// Loading
			// wx.login
			// >> code -> 服务器 /auth/wx-codes
			// >> >> 判断是否需要授权 > 不需要授权的话直接登录成功 > 跳转回登录成功页面
			// >> >> 判断是否需要授权 > 需要授权 > 取消Loading
			
			if (uni.getStorageSync('token') && uni.getStorageSync('authtoken')) {
				uni.switchTab({
					url: '../index/index'
				})    //如果存在token 和authtoken 就是出于登录状态，直接进入首页
			}else{
				this.lotusLoadingData.isShow = true
				this.submit()
			}
		},
		methods: {
			submit() {
				const that = this
				uni.getProvider({
					// 授权 
					service: 'oauth', //服务商 微信qq等默认的是oauth
					success: function(res) {
						if (~res.provider.indexOf('weixin')) { // 判断是否微信授权 
							uni.login({
								provider: 'weixin',
								success: res => {
									const code = res.code;
									const data = {
										code: code
									}
									that.$myRequest({
										method: 'POST',
										url: '/auth/wx-codes',
										data: data
									}).then(res => {
										if(res.statusCode == 200){
											uni.setStorageSync('openid', res.data.open_id);
											uni.setStorageSync('token', res.data.token)
											that.show = false
											if (!res.data.is_authorized) {  //通过is_authorized来判断是否需要获取authtoken
												that.lotusLoadingData.isShow = false
												that.show = true
											} else {
												uni.setStorageSync('authtoken', res.data.auth_token)
												that.show = false
												that.callshow = false
												that.lotusLoadingData.isShow = false
												setTimeout(function(){
													// uni.switchTab({
													// 	url: '../index/index'
													// })
													uni.navigateBack({
														delta:1
													})
												},500)
												
											}
										}
									});
								},
								fail: () => {
									uni.showToast({
										title: '微信登录授权失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本1',
								icon: 'none'
							});
						}
					}
				});
			},

			// 获取手机号 把encryptedData 和iv 存入storage  之后判断用户登录状态要用
			getUserInfo(e) {
				uni.getUserInfo({
					provider: 'weixin',
					success: info => {
						this.userInfo = info;
						uni.setStorageSync('this.userInfo', info)
						this.show = false;
						this.lotusLoadingData.isShow = false  //这个是自己做的自定义组件的loading 加载中你不做也没关系
						this.callshow = true
					},
					fail: () => {
						uni.showToast({
							title: '微信登录授权失败',
							icon: 'none'
						});
					}
				});
			},
			getPhoneNumber(e) {
				uni.getStorageSync('this.userInfo')
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					var data = {
						token: uni.getStorageSync('token'),
						user_info: {   //需要传给后台的值
							encrypted_data: this.userInfo.encryptedData,
							iv: this.userInfo.iv,
							cloud_id: "",
						},
						"phone_number": { //需要传给后台的值
							"encrypted_data": e.detail.encryptedData,
							"iv": e.detail.iv,
							"cloud_id": ""
						}
					};
					this.$myRequest({
						method: 'POST',
						url: '/auth/wx-authentications',
						data: data
					}).then(res => {
						uni.setStorageSync('authtoken', res.data.auth_token)
						if(res.statusCode == 200){
							// uni.switchTab({
							// 	url: '../index/index'
							// })
							uni.navigateBack({
								delta:1
							})
						}else{
							this.$api.msg(res.data.message);   //这个是自己自己封装的提示，你可以用uni.showtoast
						}
					});
				} else {}
			},
		}
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}

		.content {
			position: absolute;
			bottom: 0;
			z-index: 999;
			background: #ECECEC;
			height: 490rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.bottom{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30rpx;
				.agree{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20px;
					color: #000000;
				}
				.deal{
					margin-top: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20px;
					color: #0655EA;
				}
			}
			.info{
				background-color: #FFFFFF;
				margin: 20rpx;
				width: 90%;
				height: 100%;
				border-radius: 20rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top{
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					.logo{
						font-size: 50rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
						margin-left: 20rpx;
					}
				}
				.middle{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-top: 50rpx;
					color: #000000;
				}
			}
		}
		
	}

	.text {
		margin-top: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	button {
		width: 380rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #EACDA3 0%, #E6B980 100%);
		border-radius: 66rpx;
		margin-top: 80rpx;
	}

	button::after {
		border: none;
	}
</style>