uni-app微信弹窗授权页面

---

前言

重复使用微信登录授权，所以记录一下

---

<template>
	<view>
		<uni-nav-bar title="授权登录"></uni-nav-bar>
		<view class='about'>
			<view class='logo'>
				<image src='/static/images/index/logo.png'></image>
				<view>小程序名</view>
			</view>
		</view>

		<button class="login" open-type="getUserInfo" @click="getuserinfo">授权登录</button>
		<view class="zanbu" @click="back">暂不登录</view>
		<view class="foot">
			<!-- <navigator hover-class="none" class="xieyi">《用户协议》</navigator> -->
			<!-- <view class='copy'>{{about.name}}版权所有© {{about.recordNumber}}</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:''
			}
		},
		onLoad() {
			let that=this
			uni.login({
				success(res) {
					that.code=res.code
			}})
		},
		methods: {
			back() {
				// this.$Global.tool.routerTo('/pages/index/index', 0);
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getuserinfo(e) {
				var that = this;
				let data = e.detail;
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						// console.log(res,123)
						if (!res.encryptedData || !res.iv) return false;
						let obj={
							code:that.code,
							encryptedData:res.encryptedData,
							iv:res.iv
						}
						that.base.post('/vip/getAppletUser', obj).then(res => {
							// console.log(res)
							if(res.code==0){								
								uni.setStorageSync('uid', res.data.token)
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.about {
		padding: 120rpx 40rpx 0;
	}

	.about .logo image {
		display: block;
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto 35rpx;
		border-radius: 30rpx;
	}

	.logo {
		text-align: center;
	}

	.about .logo view {
		font-size: 36rpx;
		color: #333;
	}

	.foot {
		position: fixed;
		left: 0;
		right: 0;
		text-align: center;
		bottom: 40rpx;
	}

	.login {
		width: 600rpx !important;
		height: 86rpx !important;
		line-height: 86rpx !important;
		background: #05C160 !important;
		font-size: 32rpx;
		border-radius: 6rpx !important;
		color: #fff;
		margin: 0 auto !important;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 514rpx;
	}

	.zanbu {
		font-size: 32rpx;
		color: #999999;
		/* margin: 45rpx 0 80rpx; */
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 436rpx;
	}

	.xieyi {
		font-size: 24rpx;
		/* color: var(--mina) !important; */
		margin-bottom: 15rpx;
	}

	.copy {
		font-size: 24rpx;
		color: #9b9b9b;
	}
</style>