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%;height: 70rpx;margin-bottom: 20rpx;" 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" style="padding: 10rpx 0;">暂不登录</button>
						<button @click="getUserProfile" style="padding: 10rpx 0;">立即登录</button>
						<!-- <button v-else open-type="getUserInfo" @getuserinfo="getuserinfo">立即登录</button> -->
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				canIUseGetUserProfile: false,
				//保存时间七天
				cacheTime: 1 * 24 * 60 * 60 * 7,
				dialogShow: false,
				jscode: '',
				//邀请码
				inviteCode: '',
				userInfo: '',
				sessionKey: '',

				//获取手机号
				phoneShow: false
			};
		},
		beforeDestroy() {
			if (this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			}
		},
		created() {
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = false
			}
		},
		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)
			},
			getUserProfile(e) {
				uni.getUserProfile({
					desc: '用于获取头像和昵称',
					success: (res) => {
						this.userInfo = res.userInfo
						console.log("getUserProfile获取用户信息", this.userInfo);
						this.doLogin()
					}
				})
			},
			getuserinfo(e) {
				console.log("getuserinfo获取用户信息", e);
				if (e.detail.errMsg != 'getUserInfo:ok') {
					return
				}
				this.userInfo = e.detail.userInfo
				this.doLogin()
			},
			async doLogin() {
				this.dialogShow = false
				try {
					this.respLogin = await this.$api.wxApp.getOpenId({
						code: this.jscode
					})
					let openId = this.respLogin.data.openid
					
					if (this.$isEmpty(openId)) {
						this.$u.toast('登录失败')
						return
					}
					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) {
						//登录成功
						let obj = {
							...resp.data,
							openId,
							sessionKey: this.sessionKey,
							userId: resp.data.id,
						}
						//将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
			},
			async getphonenumber(e) {
				this.$emit('getphonenumber')
				if (this.$isEmpty(this.sessionKey)) {
					this.sessionKey =this.$cache.get('userInfo').sessionKey
				}
				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: $base-color;
				border-radius: 0 0 18rpx 0;
			}

		}

		.btn-content button::after {
			border: none;
		}
	}
</style>