konggang-city-miniprogram/pages/auth/index.vue

<template>
	<view class="auth">
		
		<image src="/static/logo.png" mode="aspectFill"></image>
		
		<text class="margin-top-3 auth-title">欢迎使用空i企小程序</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.loginLoad()
		},
		methods:{
			loginLoad(){
				let that = this;
				uni.login({
					success(res) {
						that.loginRequest(res.code)
					}
				})
			},
			loginRequest(codeRes){
				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=login&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
				uni.request({
					url:url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code:codeRes
					},
					success: (res) => {
						console.log(res)
						if(res.data.code === 200){
						}
					},
					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;
						//this.loginUserInfo()
					},
					fail:(err)=> {
						getApp().globalData.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') { //允许授权执行跳转
				  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 ||'MlkY744GF9fmIqXzS4YEkw==',
						encryptedData:myEncryptedData,
					},
					success: (res) => {
						console.log(res)
						if(res.data.code === 200){
							getApp().globalData.user_phone = res.data.phoneNumber;
							that.refuseBtn();
						}
					},
					fail: () => {
						console.log("连接失败");
					}
				});
			},
			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()
						id:getApp().globalData.user_id,
						sign: md5('auth' + getApp().globalData.globalTimestamp),
						nickname:getApp().globalData.user_name,
						headimg:getApp().globalData.user_headUrl,
						auth_status:1,
					},
					success: res => {
						if(res.data.code === 200){
							getApp().globalData.user_id = res.data.msg.id;
							getApp().globalData.open_id = res.data.msg.openid;
							getApp().globalData.isAuth = true;
							getApp().globalData.user_headUrl = res.data.msg.headimg;
							getApp().globalData.user_name = res.data.msg.name;
							getApp().globalData.user_status = res.data.msg.status;
							getApp().globalData.user_phone = res.data.msg.phone;
							that.isNeedPhone = res.data.msg.phone;
							that.isAuth = getApp().globalData.isAuth;
						}
						else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration:2000
							});
						}
						
						// 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>