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 MP -->
				<button class='item grant' type="primary" @click="getuserinfo" lang="zh_CN"
					withCredentials="true">去授权</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class='item grant' type="primary" @click="getH5userinfo" lang="zh_CN"
					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.getUserProfile({
					desc: '登录中...',
					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"
						});
					}
				})
				that.isShowAuth = false
			},
			getH5userinfo(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			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>