mini_rabot/pages/auth/index.vue

<template>
	<view class="auth">
		
		<image src="../../static/rabotHead.png" mode=""></image>
		
		<text class="margin-top-3 auth-title">欢迎使用阿拉灯神丁</text>
		
		<text class="margin-top-3 auth-content">此页面是微信授权页面,授权之后你可以获取更优质的服务,您的隐私将会受到保护</text>
		
		<view class="margin-top-3">
			<button type='default' class="refuse" @click="refuseBtn">暂不授权</button>
			<button type='primary' class="allow" open-type="getUserInfo" @getuserinfo="getUserInfo">允许授权</button>
		</view>
		
	</view>
</template>

<script>
	var md5 = require("../../common/md5.js");
	export default {
		data(){
			return {
				iv:'',
				encryptedData:''
			}
		},
		onLoad() {
		},
		methods:{
			getUserInfo(e) {
				console.log(e);
				if (e.detail.errMsg == "getUserInfo:ok") {
					
					this.iv = e.detail.iv;
					this.encryptedData = e.detail.encryptedData;
					
					this.loginUserInfo()
				} else {
					console.log("用户信息授权失败");
					getApp().globalData.isAuth = false;
				}
			},
			refuseBtn(){
				uni.navigateBack({
				});
			},
			loginUserInfo(){
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'auth',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						uid:getApp().globalData.user_id,
						sign: md5('auth' + getApp().globalData.globalTimestamp),
						nickname:getApp().globalData.user_name,
						headimg:getApp().globalData.user_headUrl,
						iv:that.iv,
						session_key:getApp().globalData.session_key,
						encryptedData:that.encryptedData
					},
					success: res => {
						getApp().globalData.user_id = res.data.msg.id;
						getApp().globalData.open_id = res.data.msg.openid;
						getApp().globalData.isAuth = true;
						getApp().globalData.times = res.data.msg.times;
						getApp().globalData.total_times = res.data.msg.total_times;
						getApp().globalData.user_headUrl = res.data.msg.headimg;
						getApp().globalData.user_name = res.data.msg.name;
						uni.navigateBack({
						});
					} 
				});
			},
		}
	}
</script>

<style>
   .auth{
	   margin-top: 0;
	   text-align: center;
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
	   align-items: center;
	   padding: 100upx;
	   vertical-align: middle;
   }
   .auth image{
	   width: 200upx;
	   height: 200upx;
   }
   .auth view {
	   display: flex;
	   width: 490upx;
	   justify-content: space-between;
   }
   .auth-title {
	   font-size: 32upx;
   }
   .auth-content {
   	   font-size: 26upx;
	   color: #a7aaa9;
   }
   .allow {
	   background-color: #27BCEF;
	   margin: 20rpx 0 200rpx;
	   text-align: center;
	   vertical-align: middle;
	   touch-action: manipulation;
	   cursor: pointer;
	   background-image: none;
	   white-space: nowrap;
	   user-select: none;
	   font-size: 14px;
	   border: 0 !important;
	   position: relative;
	   text-decoration: none;
	   height: 44px;
	   width: 250rpx;
	   line-height: 44px;
	   box-shadow: inset 0 0 0 1px #27BCEF;
	   background: #fff !important;
	   color: #27BCEF !important;
	   display: inline-block;
	   border-radius: 10rpx;

   }
   .refuse {
	   background-color: #19be6b;
	   margin: 20rpx 20rpx 200rpx 20rpx;
	   text-align: center;
	   vertical-align: middle;
	   touch-action: manipulation;
	   cursor: pointer;
	   background-image: none;
	   white-space: nowrap;
	   user-select: none;
	   font-size: 14px;
	   border: 0 !important;
	   position: relative;
	   text-decoration: none;
	   height: 44px;
	   width: 250rpx;
	   line-height: 44px;
	   box-shadow: inset 0 0 0 1px #8a8a8a;
	   background: #fff !important;
	   color: #8a8a8a !important;
	   display: inline-block;
	   border-radius: 10rpx;

   }
   .margin-top-3{
	   margin-top: 10%;
   }
</style>