guosen-ldt-mall/components/login.vue

<template >
	<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>
				<block>
					<button v-if="canIUseGetUserProfile" @click="getUserProfile">立即登录</button>
					<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">立即登录</button>
				</block>
			  </view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			dialogShow: false,
			jscode:'',
			//邀请码
			inviteCode:'',
			canIUseGetUserProfile: false,
		};
	},
	beforeDestroy() {
		if(this.timer){
			clearTimeout(this.timer)
			this.timer = null
		}
	},
	created() {
		if (uni.getUserProfile) {
			this.canIUseGetUserProfile=false
		}
		console.log(this.canIUseGetUserProfile);
	},
	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;
		},
		async setTimer(){
		   let respWx = await this.$mpi.wxLogin()
		   this.jscode=respWx.code
		   // 每隔4分钟重新请求 jscode
		   this.timer = setTimeout(()=>{
		     this.setTimer()
		   },240000) 
		},
		getUserProfile(e) {
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					console.log(res);
					this.userInfo = res.userInfo
					this.hasUserInfo = true
				}
			})
		},
		async getUserInfo(e) {
			if(e.detail.errMsg != 'getUserInfo:ok') {
			  return
			}
			this.dialogShow=false
			  try{
				// this.respLogin = await this.$api.loginByCode({
				// 	code:this.jscode
				// })
				//通过openid查询数据库中该用户是否存在，存在就直接将openid放进缓存中
				//不存在就将用户基本信息存进数据库中,头像，昵称，openid
				this.$emit('signIn', resp)
				console.log(e.detail.userInfo.avatarUrl);
				console.log(e.detail.userInfo.nickName);
				return
				//将openid,sessionKey,和邀请码存进数据库中
				let resp = await this.$api.loginByWxapp({
				  openId: this.respLogin.openId,
				  inviteCode: this.inviteCode
				})
				if (resp) {
					//登录成功
					//将openid和sessionkey存进缓存中,有效时间为七天
					that.$cache.put("openId",this.respLogin.openId,1*24*60*60*7)
					//移除邀请码
					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
		}
	}
};
</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: 100rpx;
			  .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%;
			  padding: 10rpx 0;
			  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>