high-mini/components/Authorize.vue

<template>
	<view>
		<view class='Popup' v-if='isShowAuth'>
			<view class="logo-auth">
				<image src='../static/img/logo.png' mode="aspectFit"></image>
			</view>
			<view class='title'>授权提醒</view>
			<view class='tip'>请授权头像等信息，以便为您提供更好的服务</view>
			<view class='bottom flex'>
				<view class='item' @click='close'>随便逛逛</view>
				<!-- #ifdef APP-PLUS -->
				<!-- <button class='item grant' @click="setUserInfo">去授权</button> -->
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<button class='item grant' @click="setUserInfo">去授权</button>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class='item grant' type="primary" open-type="getUserInfo" lang="zh_CN"
					@getuserinfo="getuserinfo" withCredentials="true">去授权</button>
				<!-- #endif -->
			</view>
		</view>
		<view class='mask' v-if='isShowAuth' @click='close'></view>
	</view>
</template>

<script>
	const app = getApp();

	import {
		getUserInfo
	} from "../Utils/Api.js"
	export default {
		name: 'Authorize',
		data() {
			return {
				isShowAuth: false
			}
		},
		// computed:mapGetters(['isLogin','userInfo']),
		watch: {
			isLogin(n) {
				n === true && this.$emit('onLoadFun', this.userInfo);
			}
		},
		created() {
			this.iscode()
		},
		methods: {
			iscode() {
				let that = this;

				if (!app.globalData.userInfo) {
					this.isShowAuth = true;
				} else {}


			},
			getuserinfo() {
				uni.showLoading({
					title: '正在登录中'
				});
				let that = this;
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							var code = res.code
							// 获取微信用户信息
							uni.getUserInfo({
								success: function(res) {
									let params = {
										openId: app.globalData.openId,
										iv: res.iv,
										encryptedData: res.encryptedData
									}
									getUserInfo(params).then(res => {
										if (res.return_code == '000000') {
											uni.hideLoading();
											app.globalData.userInfo = res.return_data
												.object
												.highUser;
											app.globalData.token = res.return_data.uniqueCode;
											that.isShowAuth = false
											uni.setStorage({
												key: "user",
												data: res.return_data
													.object
													.highUser
											})
											uni.setStorage({
												key: "token",
												data: res.return_data.uniqueCode
											})

											uni.reLaunch({
												url: '/pages/tabBar/user/user'
											});
										} else {
											uni.showToast({
												title: res.return_msg
											})
										}
									});
								},
								fail: res => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							fail: res => {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						}
					}
				})
				that.isShowAuth = false
			},
			close() {
				uni.reLaunch({
					url: '/pages/tabBar/home/home'
				});
			},
		}
	}
</script>

<style scoped lang='scss'>
	button::after {
		border: none
	}
	
	.Popup {
		width: 600rpx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -300rpx;
		transform: translateY(-50%);
		z-index: 320;
	}

	.Popup {
		.logo-auth {
			z-index: -1;
			position: absolute;
			left: 50%;
			top: 0%;
			transform: translate(-50%, -50%);
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 8rpx solid #fff;
			border-radius: 50%;
			background: #fff;
		}

		image {
			height: 80rpx;
			margin-top: -54rpx;
		}
	}

	.Popup .title {
		font-size: 28rpx;
		color: #000;
		text-align: center;
		margin-top: 30rpx
	}

	.Popup .tip {
		font-size: 14px;
		color: #555;
		padding: 0 24rpx;
		margin-top: 25rpx;
		text-align: center;
	}

	.Popup .bottom .item {
		width: 50%;
		height: 90rpx;
		background-color: #eeeeee;
		text-align: center;
		line-height: 90rpx;
		font-size: 14px;
		color: #666;
		margin-top: 54rpx;
	}

	.Popup .bottom .item.on {
		width: 100%
	}

	.flex {
		display: flex;
	}

	.Popup .bottom .item.grant {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		background-color: #a1bac5;
		border-radius: 0;
		padding: 0;
	}

	.mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.65);
		z-index: 310;
	}
</style>