ng_notes_mini/pages/index/auth/index.vue

<template>
	<view class="auth">
		
		<image src="/static/logo.jpg" mode="aspectFill"></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" @click="getUserInfo()" v-if="!isAuth">登录授权</button>
			<button type="primary" class="allow"  open-type="getPhoneNumber"  style="font-size: 12px;"
			@getphonenumber="getPhoneNumber" v-if="isAuth && !isNeedPhone">手机号码授权</button> 
		</view>
		
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	export default {
		data(){
			return {
				iv:'',
				encryptedData:'',
				isNeedPhone:getApp().globalData.user_phone,
			    isAuth:getApp().globalData.isAuth
			}
		},
		onLoad() {
			this.getUserInfoData() 
		},
		methods:{
			getUserInfoData(){
				let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
				let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&action=info_by_openid&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
				uni.request({
					url:url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
							openId:getApp().globalData.open_id
					},
					success: (res) => {
						if(res.data.code === 200){
								if(res.data.data.nickname){
									getApp().globalData.isAuth = true;
									getApp().globalData.globalAuth = true;
									getApp().globalData.user_phone = false;
									getApp().globalData.user_name = res.data.data.nickname;
									this.isAuth = true;
									this.isNeedPhone = false;
								}else{
									getApp().globalData.user_name = '';
									getApp().globalData.isAuth = false;
									getApp().globalData.globalAuth = false; 
									this.isAuth = false;
								}
						}
					},
					fail: () => {
						console.log("连接失败");
					}
				});
			},
			getUserInfo() {
				uni.getUserProfile({
					desc:'登录',
					success:(res)=> {
						getApp().globalData.user_headUrl = res.userInfo.avatarUrl;
						getApp().globalData.user_name = res.userInfo.nickName;
						this.iv = res.iv;
						this.encryptedData = res.encryptedData;
						this.isAuth = true;
						getApp().globalData.isAuth = true; 
						getApp().globalData.globalAuth = true; 
						this.loginUserInfo()
					},
					fail:(err)=> {
						getApp().globalData.isAuth = false;
						getApp().globalData.globalAuth = false; 
						this.isAuth = false;
					}
				})
				// if (e.detail.errMsg == "getUserInfo:ok") {
				// 	getApp().globalData.user_headUrl = e.detail.userInfo.avatarUrl;
				// 	getApp().globalData.user_name = e.detail.userInfo.nickName;
				// 	this.iv = e.detail.iv;
				// 	this.encryptedData = e.detail.encryptedData;
				// 	console.log(e.detail)
				// 	//this.loginUserInfo()
				// } else {
				// 	console.log("用户信息授权失败");
				// 	getApp().globalData.isAuth = false;
				// }
			},
			getPhoneNumber(e){
				let that = this;
				 if (e.detail.errMsg == 'getPhoneNumber:ok') { //允许授权执行跳转
				 console.log(e.detail)
				  that.phoneRequest(e.detail.iv, e.detail.encryptedData, getApp().globalData.session_key)
				} else { //
				      that.isNeedPhone = false;
				}
			},
			phoneRequest(myIv,myEncryptedData,sKey){
				let that = this;
				let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
				let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&source=user&action=phone&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
				uni.request({
					url:url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						iv:myIv,
						sessionKey:sKey,
						encryptedData:myEncryptedData,
						openId:getApp().globalData.open_id
					},
					success: (res) => {
						console.log(res)
						if(res.data.code === 200){
							getApp().globalData.user_phone = res.data.data;
							setTimeout(()=>{
								that.refuseBtn();
							},300)
						}
					},
					fail: () => {
						console.log("连接失败");
					}
				});
			},
			refuseBtn(){
				uni.navigateBack({
				});
			},
			loginUserInfo(){
				let md5Sign = md5(
				  "method=" +
					"user" +
					"&timestamp=" +
					getApp().globalData.globalTimestamp +
					"&secret=" +
					getApp().globalData.secret
				);
				let url =
				  getApp().globalData.shareUrl +
				  "api/api.php" +
				  "?method=user&action=update&timestamp=" +
				  getApp().globalData.globalTimestamp +
				  "&sign=" +
				  md5Sign;
				uni.request({
				  url: url,
				  method: "POST",
				  header: {
					"content-type": "application/x-www-form-urlencoded",
				  },
				  data: {
					nickname:getApp().globalData.user_name,
					headimg:getApp().globalData.user_headUrl,
					openid:getApp().globalData.open_id
				  },
				  success: (res) => {
					if (res.data.code === 200) {
					}
				  },
				  fail: () => {
					console.log("连接失败");
				  },
				});
			},
		}
	}
</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>