qzw_xcx/pages/myCenter/logion.vue

<template>
	<view>
		<view style="text-align: center;margin-top: 60upx;">
			<image src="../../static/logo.png" style="width: 150upx;height: 150upx;" />
		</view>
		<view v-if='!hasLogin'>
			<view style="text-align: center;margin: 50upx 0 10upx 0;font-size: 36upx;">圈在网申请获取您的以下权限</view>
			<view style="text-align: center;margin: 0 0 50upx 0;font-size: 24upx;color: #666666;">获取您的公开信息(昵称，头像等)</view>
			<view style="width: 50%;margin: 0 auto;">
				<button @click="wxlogion"  type="warn" open-type='getUserInfo'>
					授权登录
				</button>
			</view>
		</view>
		<view  v-if='hasLogin&& !successlogion'>
			<view style="text-align: center;margin: 100upx;font-size: 36upx;">登录即注册立即成为圈在网会员</view>
			<view style="width: 50%;margin: 0 auto;">
				 <button type="warn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">使用微信手机号登录</button>
			</view>
		</view>
		<view @click="closesure"   style="width: 50%;margin: 30upx auto;text-align:center;font-szie: 30upx;">
				暂不授权
		</view>
		<view style="position: fixed; bottom: 30upx;width: 100%;">
			<view style="text-align: center;padding-bottom: 20upx;">
				请仔细阅读以下协议，若不同意相关内容，您应停止授权
			</view>
			<view style="text-align: center;">
		     	<span style="color: #D9332E;padding-right: 20upx;" @click="gouser"> 《用户协议》   </span> 
				<span style="color: #D9332E;" @click="goforate">  《隐私政策》 </span>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	export default {
		props:{
		  showdialog:{
		    default: false,
		    type: Boolean
		  },
		  ishow:{
		    default: true,
		    type: Boolean
		  },
		},
		 data() {
			return{
				show: false
			}
		},
		computed:{
			...mapState([
			  'hasLogin',  // 用户是否同意授权
			  'userInfo',   // 同意授权用户头像
			  'successlogion', // 同意手机号授权 登录成功
			  'sessionId',   // 登录成功的token
			  'getcode',  // logion时候获取的code session_key oppen_id
			]),
		},
		onLoad(){
			console.log(this.successlogion);
		},
		methods:{
			...mapMutations(['login','showDialog', 'setOpenid', 'setcode','islogionsuccess']),
			closesure() {
				uni.navigateBack();
			},
			// 隐私政策
			goforate() {
				uni.navigateTo({
					url: './goforate'
				})
			},
			
			// 用户协议
			gouser() {
				uni.navigateTo({
					url: './gouser'
				})
			},
			// 授权用户信息头像
			wxlogion() {
				let  that = this;
				    uni.getUserInfo({
					     success: (res) => {
							 that.login(res.userInfo);
							 that.showDialog(true); // 改变haslogion的值
							 that.$msg("授权成功");
							 if(this.successlogion) {
								uni.navigateBack();
							 }
					     },
					     fail(res) {
							 that.showDialog(false);
							 that.$msg("授权失败")
					     }
				    })
			},
			// 获取手机号码
			decryptPhoneNumber(e) {
			              console.log(e);    
			              if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
			                  console.log(e);
			              } else {    
			                  console.log('用户同意提供手机号');
							  console.log(this.getcode);
											let encryptedData = e.detail.encryptedData;
											let iv = e.detail.iv;
											console.log(this.userInfo);
											// 调取注册账号
											this.request({
												url: '/v1/entry/mp_account',
												method:'POST',
												data: {
													code: this.getcode.code,
													encryptedData:　encryptedData,
													iv:　iv,
													name: this.userInfo.nickName,
													avatar: this.userInfo.avatarUrl
												},
												success: (res) => {
													let token = res.data.data.token;
													this.setOpenid(token);
													this.islogionsuccess(true);
													uni.navigateBack();
												},
												fail: (res) => {
														 this.islogionsuccess(false);
														 this.setOpenid('');
														 this.$msg("获取失败")
												     }
											})
											
									    }
			  },
		}
	}
</script>

<style>
</style>