yijianbao_user_uniapp/pages/auth/login.vue

<template>
	<view class="content">
		<view class="force-login-wrap">
			<view class="force-login__content y-f">
				<view class="logo">
					<view class="logo-img">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/logo.png"></image>
					</view>
					<view class="title">医健宝医药</view>
				</view>
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<view class="btns">
					<button class="author-btn" open-type="getPhoneNumber" @getphonenumber="phoneLogin">一键授权手机号登录</button>
					<button class="author-btn" v-if="isAgreement == false" @click="handleAgree()">一键授权手机号登录</button>
				</view>
				<!-- <button
					class="author-btn"
					open-type="getUserInfo"
					@click="wxLogin()"  >微信授权登录</button> -->
				<button class="close-btn" @tap="back">暂不登录</button>
				<view class="tips">
					<checkbox :checked="isAgreement" @click="handleAgreement()" />
					<view @click="handleAgreement()">您同意并接受</view>
					<view class="btn" @click="openContent('userRegister')">《用户协议》</view>
					<view class="btn" @click="openContent('userPrivacy')">《隐私保护》</view>
				</view>
			</view>
		</view>
		<u-popup bgColor="#f6f6f6" :safeAreaInsetBottom="false" :round="15" mode="bottom" :show="wxShow" @close="wxAuthClose" @open="wxAuthOpen">
			<view class="wxAuth">
				<view class="title">编辑头像和昵称</view>
				<wx-auth class="wx-box" @updateUser="updateUser()" ref="wxauth"></wx-auth>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { wxLogin, loginByMiniApp } from '@/api/user';
import { wxAuth } from '../components/wxAuth.vue';

export default {
	components: {
		wxAuth
	},
	data() {
		return {
			wxShow: false,
			isAgreement: false,
			code: null
		};
	},
	computed: {},
	onLoad(option) {
		uni.$on('refreshLogin', () => {
			uni.navigateBack({
				delta: 1
			});
		});
		//选获取CODE，防止后请求的时候腾讯服务端未同步报错
		this.getCode();
	},
	onUnload() {},
	mounted() {},
	methods: {
		updateUser() {
			this.wxShow = false;
			uni.$emit('refreshLogin');
			uni.$emit('refreshIM');
		},
		wxAuthOpen() {
			this.wxShow = true;
			var that = this;
			setTimeout(function () {
				that.$refs.wxauth.getUserInfo();
			});
		},
		wxAuthClose() {
			this.wxShow = false;
		},
		wxLogin(e) {
			var that = this;
			if (!this.isAgreement) {
				uni.showToast({
					icon: 'none',
					title: '请先同意协议后再登录'
				});
				return false;
			}
			uni.showLoading({
				title: '处理中...'
			});
			that.$getProvider()
				.then((provider) => {
					console.log('当前的环境商', provider);
					if (!provider) {
						reject();
					}
					// uni登录
					uni.login({
						provider: provider,
						success: async (loginRes) => {
							console.log(111);
							console.log(e);
							console.log(loginRes);
						}
					});
				})
				.catch((err) => {
					uni.showToast({
						icon: 'none',
						title: err
					});
				});
		},
		handleAgree() {
			if (!this.isAgreement) {
				uni.showToast({
					icon: 'none',
					title: '请先同意协议后再登录'
				});
			}
		},
		openContent(type) {
			console.log(type);

			uni.navigateTo({
				url: '/pages_user/agreement?type=' + type
			});
		},
		handleAgreement() {
			this.isAgreement = !this.isAgreement;
		},
		getCode() {
			var that = this;
			that.$getProvider()
				.then((provider) => {
					if (!provider) {
						reject();
					}
					// uni登录
					uni.login({
						provider: provider,
						success: async (loginRes) => {
							that.code = loginRes.code;
						}
					});
				})
				.catch((err) => {});
		},
		// 微信用户手机号登录
		phoneLogin(e) {
			var that = this;
			uni.showLoading({
				title: '处理中'
			});
			console.log(e);
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				this.$getProvider().then((provider) => {
						console.log('当前的环境商', provider);
						if (!provider) {
							reject();
						}
						// uni登录
						uni.login({
							provider: provider,
							success: async (loginRes) => {
								console.log("qxj loginRes---");
								console.log(loginRes);
								let code = loginRes.code; // 获取开发code
								var tuiUserId = uni.getStorageSync('tuiUserId');
							  
							   
								wxLogin({
									encryptedData: e.detail.encryptedData,
									iv: e.detail.iv,
									code: code,
									tuiUserId: tuiUserId,
									appId: getApp().globalData.appId
								}).then((res) => {
										uni.hideLoading();
										if (res.code == 200) {
											uni.showToast({
												icon: 'none',
												title: '登录成功'
											});
											uni.setStorageSync('userHistoryApp', res.user.historyApp);
											uni.setStorageSync('AppToken', res.token);
											uni.setStorageSync('userId', res.user.userId);
											uni.setStorageSync('avatar', res.user.avatar);
											uni.setStorageSync('nickName', res.user.nickName || res.user.nickname);
											if (res.user.isWeixinAuth == 0) {
												that.wxAuthOpen();
											} else {
												uni.$emit('refreshLogin');
												uni.$emit('refreshIM');
											}
										} else {
											uni.showToast({
												icon: 'none',
												title: '授权登录失败,请重新登录'
											});
										}
									})
									.catch((error) => {
										console.log("qxj error------");
										console.log(error);
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: '授权登录失败,请重新登录'
										});
									});
							}
						});
					})
					.catch((err) => {});
			} else {
				uni.showToast({
					title: '已拒绝授权',
					icon: 'none',
					duration: 2000
				});
			}
		},
		back() {
			uni.reLaunch({
				url: '/pages/index/index',
				animationType: 'pop-in',
				animationDuration: 100
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
}

.force-login-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 11111;
	top: 0;

	.force-login__content {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		.logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.logo-img {
				border: 4upx solid #ffffff;
				box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				width: 80px;
				height: 80px;
				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}

			.title {
				margin-top: 20rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}
		}

		.login-notice {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000;
			line-height: 44rpx;
			width: 500rpx;
			text-align: center;
			margin-bottom: 80rpx;
		}
		.btns {
			position: relative;
			width: 630rpx;
			height: 80rpx;
			.author-btn {
				z-index: 100;
				position: absolute;
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #2583EB 0%, #2EDAD4 100%);
				background: -moz-linear-gradient(to right, #2583EB 0%, #2EDAD4 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
		.author-btn {
			z-index: 100;
			// position: absolute;
			width: 630rpx;
			height: 80rpx;
			background: linear-gradient(to right, #2583EB 0%, #2EDAD4 100%);
			background: -moz-linear-gradient(to right, #2583EB 0%, #2EDAD4 100%);
			// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
		.close-btn {
			width: 630rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 40rpx;
			border: 2rpx solid #2583EB;
			background: none;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2583EB;
		}
	}
}
.tips {
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	checkbox {
	}
	.btn {
		color: #2583EB;
	}
}
.wxAuth {
	border-radius: 30rpx;
	width: 100%;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	.title {
		font-size: 32rpx;
		margin: 10rpx 0rpx;
		font-weight: bold;
		text-align: center;
	}
	.wx-box {
		width: 100%;
		padding: 0rpx 30rpx;
	}
}
</style>