retailStore/pages/auth/index.vue

<template>
	<view class="auth">
		
		<image src="/static/detail-bg2.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" 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>
	var md5 = require("../../common/md5.js");
	export default {
		data(){
			return {
				iv:'',
				encryptedData:'',
				isNeedPhone:getApp().globalData.user_phone,
			    isAuth:getApp().globalData.isAuth
			}
		},
		onLoad() {
		},
		methods:{
			getUserInfo(e) {
				if (e.detail.errMsg == "getUserInfo:ok") {
					console.log(e)
					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;
					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;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'getPhoneNumber',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						uid:getApp().globalData.user_id,
						sign: md5('getPhoneNumber' + getApp().globalData.globalTimestamp),
						iv:myIv,
						sessionKey:sKey,
						encryptedData:myEncryptedData,
					},
					success: res => {
						console.log(res)
					} 
				});
			},
			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,
						// iv:that.iv,
						// session_key:getApp().globalData.session_key,
						// encryptedData:that.encryptedData,
						auth_status:1,
						shangjiid:getApp().globalData.lastId
					},
					success: res => {
						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;
						// 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>