微信小程序登录

<template>
	<view>
		<view class="mark" v-if="isMark" @click="isMark=false">
			<view class="box">
				<view class="text">用于获取你的手机号，优化你的体验？</view>
				<view class="buttons">					
					<view>取消</view>
					<button class="btn typography" open-type="getPhoneNumber" @getphonenumber="getminiprogramcode">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {login,getphone} from '../../api/my/index.js'
	export default {
		name:"information",
		data() {
			return {
				code:'',
				isMark:false
			};
		},
		methods:{
			//用户登陆
			userLogin() {
				var _this=this;
				wx.checkSession({
					success: function (res) {
					  //存在登陆态
					  console.log(res,'111')
					  if(!uni.getStorageSync('uid')){
						  console.log(3333)
						_this.onLogins();
						_this.getPhoneNumber(e);
					  }
					},
					fail: function () {
					  //不存在登陆态
					  console.log('222')
					  _this.onLogins();
					}
				})
			},
			 
			onLogins() {
				console.log('模态框')
				var _this=this;
				wx.login({
						success: function (res) {
						console.log(res,'login')
						_this.code=res.code;
						_this.getUserInfo()
					},
					fail: function (res) {
						console.log(res,'失败')
					}
				})
			 
			},
			 
			getUserInfo() {
				var _this=this;
				wx.getSetting({
					success:data=>{
						if(data.authSetting['scope.userInfo']){
						console.log(data,'3');
							wx.showModal({
								title: '温馨提示',
								content: '亲，授权微信登录后才能正常使用小程序功能',
								success(res) {
									console.log(0)
									console.log(res,'1')
									//如果用户点击了确定按钮
									if (res.confirm) {
										wx.getUserProfile({
											desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
											success: (res) => {
												console.log(res,'2');
												uni.setStorageSync('avatarUrl',res.userInfo.avatarUrl);
												var json = {};
												json.signature=res.signature;
												json.rawData=res.rawData;
												json.encryptedData=res.encryptedData;
												json.iv=res.iv;
												json.code=_this.code;
												_this.userInfoSetInSQL(json)
											}, 
											fail: function(res) {
											  console.log(res,'登陆失败');
											  wx.showToast({
											  	title: '您拒绝了请求,不能正常使用小程序',
											  	icon: 'error',
											  	duration: 2000
											  });
											  return;
											},
										})
									} else if (res.cancel) {
										//如果用户点击了取消按钮
										wx.showToast({
											title: '您拒绝了请求,不能正常使用小程序',
											icon: 'error',
											duration: 2000
										});
										return;
									}
								}
							});
							
						}
					}
				})
				
			},
			 
			userInfoSetInSQL(userInfo) {
				var _this = this;
				console.log(userInfo,'userInfo')
			    wx.request({
			        url: `${this.api}api/login/login`,
					method:'POST',
			        data: {
						code:userInfo.code,
						iv:userInfo.iv,
						encryptedData:userInfo.encryptedData,
						rawData:userInfo.rawData,
						signature:userInfo.signature,
						pid:uni.getStorageSync('pid')
					},
			        success: function (res) {
						console.log(res,'openid')
						uni.setStorageSync('openid',res.data.data.openid);
						uni.setStorageSync('session_key',res.data.data.session_key);
						uni.setStorageSync('uid',res.data.data.uid);
						if(!uni.getStorageSync('isTel')){
							_this.isMark = true;
						}else{
							uni.reLaunch({
							    url: `/pages/index/index?type=${5}&typeId=1`
							});
						}
			        }
			    })
			    
			  
			},
			
			
			
			// 获取个人信息
			changeLogin(){
				let json = {}
				wx.checkSession({
				  success (res) {
					  console.log(res,'login');
				    //session_key 未过期，并且在本生命周期一直有效
				  },
				  fail (res) {
					  console.log(res,'fail')
				    // session_key 已经失效，需要重新执行登录流程
				    wx.getUserProfile({
				    	  desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				    	  success: (res) => {
				    		  console.log(res);
				    		  json.signature=res.signature;
				    		  json.rawData=res.rawData;
				    		  json.encryptedData=res.encryptedData;
				    		  json.iv=res.iv;
				    		  wx.login({
				    			success: function(ele) {
				    			  console.log(ele);//这里的返回值里面便包含code
				    			  json.code=ele.code;
				    			  login(json).then(res=>{
				    				  console.log(res,'login')
				    			  })
				    			},
				    			fail: function(res) {
				    			  console.log('登陆失败');
				    			},
				    			complete: function(res) {},
				    		  })
				    	  },
				    	  
				    })
				  }
				})
			},
			
			
			
			// 获取用户手机号-------------------------------------------
			getminiprogramcode(e) {
				console.log(e)
				var _this = this;
				//检验session_key是否过期，过期就要重新调用wx.login获取session_key 
				wx.checkSession({
					success(res) {
						//session_key 未过期，并且在本生命周期一直有效
						console.log(uni.getStorageSync('sessionKey'));
						//获取上个页面存进缓存里的信息
						_this.sessionKey = uni.getStorageSync('sessionKey');
						_this.signature = uni.getStorageSync('signature');
						_this.rawData = uni.getStorageSync('rawData');
						_this.getPhoneNumber(e);
					},
					fail() {
						// session_key 已经失效，重新登录
						console.log('重新登录1')
						wx.login({
							success(res) {
								if (res.code) {
									_this.miniappcode = res.code;
									_this.getphonecode(e);
								} else {
									console.log('登录失败！' + res.errMsg);
								}
							}
						});
					}
				});
			},
			getPhoneNumber(e) {
				var _this = this;
				console.log(e.detail.errMsg,'获取手机号');
				//授权后的处理
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					//点击获取的信息
					let params = {
						encryptedData: e.detail.encryptedData,
						sessionKey: uni.getStorageSync('session_key'),
						iv: e.detail.iv,
						uid:uni.getStorageSync('uid')
					};
					_this.getuserphonnumber(params,e);
				}
			},
			 getuserphonnumber(paramsdata,e) {
				var _this = this;
				let params = {
					encryptedData: paramsdata.encryptedData,
					session_key: paramsdata.sessionKey,
					iv: paramsdata.iv,
					uid: paramsdata.uid,
				};
				console.log(params,'获取手机号')
				wx.request({
				    url: `${this.api}api/login/getphone`,
					method:'POST',
				    data: params,
				    success: function (res) {
						console.log(res,'openid')
						if(res.data.code == 200){
							uni.setStorageSync('isTel',true);
						}
						uni.navigateTo({
						    url: `/pages/index/index?type=${5}&typeId=1`
						});
						// _this.isMark = true;
				    }
				})
			}
		},
		created() {
			this.userLogin()
		}
	}
</script>

<style lang="scss" scoped>
	.mark{
	   	position:fixed; 
	   	left: 0;
	   	top: 0;
		width: 100%;
	   	height: 100%; 
	   	color: #fff;
	   	background: rgba(0, 0, 0, 0.5); 
	   	font-size: 26rpx;
	   	text-align: center;
	   	box-shadow: 2px -3px 100px -5px  #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		.box{
			width: 510rpx;
			height: 300rpx;
			text-align: left;
			color: #000;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.text{
				font-size: 30rpx;
				margin: 80rpx 0;
			}
			.buttons{
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				view{
					width: 50%;
					height: 100%;
					border: 2rpx solid #eee;
					background-color: #f8f8f8;
					line-height: 100rpx;
					text-align: center;
					font-size: 30rpx;
					border-radius: 10rpx;
				}
				button{
					width: 50%;
					height: 100%;
					font-size: 30rpx;
					border: 2rpx solid #eee;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}
</style>