guosen-ldt-client/components/login.vue

<template >
	<view class="">
		<!-- 获取手机号 -->
		<u-modal v-model="phoneShow" content="请授权获取手机号">
			<button class="cu-btn btn-bg-color round" style="width: 80%;"  slot="confirm-button" open-type="getPhoneNumber" @getphonenumber="getphonenumber" >
				去授权
			</button>
		</u-modal>
		
		<!-- 获取头像昵称 -->
		<view @touchmove.stop.prevent="clear" v-show="dialogShow">
			<view class="popup_mask" @touchmove.stop.prevent="clear"></view>
			<view class="">
				<view class="dt-login-wrap">
				  <view class="title">请先登录</view>
				  <view class="content">
				  	<view class="userinfo-avatar">
					   <open-data  type="userAvatarUrl"></open-data>
				  	</view>
					<open-data type="userNickName"></open-data>
					<text class="subtitle">申请获取您的公开信息（昵称,头像）</text>
				  </view>
				  <view class="btn-content setBtnCss">
				  	<button  @click="hide" >暂不登录</button>
					<button open-type="getUserInfo" @getuserinfo="getuserinfo" >立即登录</button>
				  </view>
				</view>
			</view>
		</view>
	</view>
	
</template>
<script>
export default {
	data() {
		return {
			//保存时间七天
			cacheTime:1*24*60*60*7,
			dialogShow: false,
			jscode:'',
			//邀请码
			inviteCode:'',
			userInfo:'',
			sessionKey:'',
			
			//获取手机号
			phoneShow:false
		};
	},
	beforeDestroy() {
		if(this.timer){
			clearTimeout(this.timer)
			this.timer = null
		}
	},
	methods:{
		show(){
			//获取邀请码
			this.inviteCode=this.$cache.get('inviteCode')
			this.dialogShow=true
			this.$mpi.wxLogin().then(res => {
			  this.jscode = res.code
			})
			this.setTimer()
		},
		hide () {
		  if(this.timer){
		    clearTimeout(this.timer)
		    this.timer = null
		  }
		  this.dialogShow=false;
		  this.$emit('hide')
		},
		async setTimer(){
		   let respWx = await this.$mpi.wxLogin()
		   this.jscode=respWx.code
		   // 每隔4分钟重新请求 jscode
		   this.timer = setTimeout(()=>{
		     this.setTimer()
		   },240000) 
		},
		async getuserinfo(e) {
			console.log("获取用户信息",e);
			if(e.detail.errMsg != 'getUserInfo:ok') {
			  return
			}
			this.userInfo=e.detail.userInfo
			this.dialogShow=false
			  try{
				this.respLogin = await this.$api.wxApp.getOpenId({
					code:this.jscode
				})
				let openId=this.respLogin.data.openid
				let unionid=this.respLogin.data.unionid || ''
				this.sessionKey=this.respLogin.data.session_key
				//通过openid查询数据库中该用户是否存在
				
				let params={
					nickName:this.userInfo.nickName,
					avatar:this.userInfo.avatarUrl,
					gender:this.userInfo.gender,
					unionid,
					openid:openId,
					province:this.userInfo.province,
					city:this.userInfo.city
				}
				//将openid
				let resp = await this.$api.loginUser.login(params)
				if (resp.success) {
					this.$u.toast('登录成功')
					//登录成功
					let obj={
						openId,
						sessionKey:this.sessionKey,
						userId:resp.data.id,
						phone:resp.data.phone
					}
					//将openid和sessionkey存进缓存中,有效时间为七天
					this.$cache.put("userInfo",obj)
					this.$u.vuex('vuex_userId',resp.data.id)
					if(resp.data.phone){
					  this.$u.vuex('vuex_phone',resp.data.phone)
					}
					//移除邀请码
					this.$cache.remove('inviteCode')
					this.dialogShow=false
					this.$emit('signIn', resp)
				}else{
					uni.showToast({
						icon:"none",
						title:"登录失败"
					})
				}
				
			  }catch(e){
				  console.log(e);
				  uni.showToast({
					icon:"none",
					title:"登录失败"
				  })
			  }finally{
				if(this.timer){
				  clearTimeout(this.timer)
				  this.setTimer()
				}
		     }
		},
		clear(){
			return
		},
		//获取手机号
		showPhoneModal(){
			this.phoneShow=true
		},
		getphonenumber(e){
			this.$emit('getphonenumber')
			let params={
				sessionKey:this.sessionKey,
				encryptedData:e.detail.encryptedData,
				iv:e.detail.iv
			}
			this.$api.wxApp.getOpenData(params).then(res=>{
				if (res.success) {
					let obj=JSON.parse(res.data)
					let phone=obj.phoneNumber
					this.cachePhone(phone)
				}
			})
		},
		cachePhone(phone){
			let userInfo=this.$cache.get('userInfo')
			let params={
				id:userInfo.userId,
				phone
			}
			this.$api.loginUser.submit(params).then(res=>{
				if (res.success) {
					userInfo.phone=phone
					this.$cache.put('userInfo',userInfo)
					this.$u.vuex('vuex_phone',phone)
				}
			})
		}
		
	}
};
</script>

<style lang="scss">
	.popup_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		opacity: 1;
		z-index: 98;

	}
	.dt-login-wrap {
		position: fixed;
		border-radius: 16rpx;
		background: #ffffff;
		width: 560rpx;
		z-index: 99;
		bottom: 30%;
		left: 50%;
		margin-left: -280rpx;
		right: 0;
		text-align: center;
		
		  .title {
			 padding-top:40upx;
			 font-size: 34upx;
			 font-weight: bold;
		  }
		  .content{
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  flex-direction: column;
			  padding-top: 30rpx;
			  padding-bottom: 150rpx;
			  .userinfo-avatar {
			    overflow:hidden;  
			    display: block;  
			    width: 140rpx;  
			    height: 140rpx; 
				 margin: 20rpx 20rpx 40rpx;
			    border-radius: 50%;  
			    border: 2px solid #fff;  
			  } 
		  }
		  .subtitle {
			color: #7e7e7e;
			font-size: 26upx;
			margin-top: 30rpx;
		  }
		  .btn-content{
			  display: flex;
			  width: 100%;
			  border-radius: 0;
			  border-top:1upx solid #ebebeb;
			  
			  button{
				  border:none;
				  width: 50%;
				  font-size: 30rpx;
				  background-color: #FFFFFF;
				  color:#66656a;
			  }
			  
			  button:first-child{
				  border-right: 1rpx solid #ebebeb;
				  border-radius: 0 0 0 18rpx;
			  }
			  
			  button:last-child{
			  	color: #2f7ff5;
				border-radius: 0 0 18rpx 0;
			  }
			 
		  }
		  .btn-content button::after{
			  border: none;
		  }
	}
</style>