zhibo/pages/auth/login.vue

<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="force-login-wrap">
			<view class="force-login__content y-f">
				<view class="logo">
					<view class="logo-img">
						<image
							src="/static/images/logo.png">
						</image>
					</view>
					<view class="title">芳华臻选</view>
				</view>
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<!-- <button
			class="author-btn"
			@click="wxLogin()"  >微信授权登录</button> -->
				<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="getPhoneNumber"
			@getphonenumber="phoneLogin"  >微信授权登录</button> -->
				<button class="close-btn" @tap="back">暂不登录</button>

				<view class="tips">
					<checkbox :checked="isAgreement" @click="handleAgreement()" />
					<view @click="handleAgreement()">您同意并接受</view>
					<view class="btn" @click="openH5(1)">《用户协议》</view>
					<view class="btn" @click="openH5(2)">《隐私保护》</view>
				</view>
			</view>
		</view>
		<!-- #endif -->


	</view>
</template>

<script>
	import {
		loginByMiniApp,
		getUserInfo,
		loginByMp
	} from '@/api/user'
	export default {
		data() {
			return {
				isLive: null,
				code: null,
				isAgreement: false,
			}
		},
		computed: {},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			uni.$on('refreshLogin', () => {
				uni.navigateBack({
					delta: 1
				})
			})
			//选获取CODE，防止后请求的时候腾讯服务端未同步报错
			this.getCode();
			// #endif

			// #ifdef H5
			if (this.checkWeixin()) {
				this.getWxCode()
			} else {
				uni.showToast({
					icon: 'none',
					title: "请在微信中打开",
				});
				//跳转到手机号密码登录
			}
			// #endif

		},
		onUnload() {},
		mounted() {

		},
		methods: {
			handleAgree() {
				console.log(123)

				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: "请先同意协议后再登录",
					});
				}

			},

			checkWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			//URL地址是否存在CODE
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			//获取微信CODE
			getWxCode() {
				//在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头； 
				//http://shequ.natapp1.cc/#/pages/index/index?deviceId=8
				var appId = "wx503cf8ab31f83dd4";
				var url = "https://api.zxfh.cdwjyyh.com";
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId +
					'&redirect_uri=' + encodeURIComponent(url + "/#/pages/auth/wxLogin") +
					'&response_type=code&scope=snsapi_userinfo&state=JeffreySu-954&connect_redirect=1#wechat_redirect';
				//console.log('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri=' +encodeURIComponent("http://shequ.natapp1.cc/#/pages/index/index?deviceId="+this.deviceId) +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect')
				// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code
			},
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
				console.log(545454)
				uni.requestSubscribeMessage({
					tmplIds: ['K0RUbGggwYz7V4yjtJjFVXtthnx4hOJgHvr7RNOyRSE',
						'5ZSzz2nPmJo9EuenZa78mQPScoOMc84LnEfEpV0-i04'
					], // 模板ID列表，从微信公众平台获取
					success(res) {
						console.log('订阅消息成功', res);
						if (res.errMsg == 'requestSubscribeMessage:ok') {
							console.log('订阅消息成功11111');
						}
						// 根据返回的 res 处理后续逻辑，例如显示成功消息给用户
					},
					fail(err) {
						console.error('订阅消息失败', err);
						// 处理失败情况，例如提示用户重新尝试或检查权限设置
					}
				});
			},
			openH5(url) {
				var requestPath = uni.getStorageSync('requestPath');
				// uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5?type=' + url
				})
			},
			getCode() {
				var that = this;
				this.utils.getProvider()
					.then(provider => {
						console.log('当前的环境商', provider)
						if (!provider) {
							reject()
						}
						// uni登录
						uni.login({
							provider: provider,
							success: async loginRes => {
								that.code = loginRes.code
							}
						})
					})
					.catch(err => {

					})
			},
			getUserInfo() {
				getUserInfo().then((res) => {
						if (res.code == 200) {
							console.log("获取用户信息成功", res.user)

							this.userData = res.user
							uni.setStorageSync('userData', JSON.stringify(res.user));

						} else {
							uni.showToast({
								icon: 'none',
								title: '请求失败'
							})
						}
					},
					(rej) => {}
				)
			},
			wxLogin() {
				var that = this;
				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: "请先同意协议后再登录",
					});
					return false;
				}
				uni.showLoading({
					title: "处理中..."
				})
				this.utils.getProvider()
					.then(provider => {
						console.log('当前的环境商', provider)
						if (!provider) {
							reject()
						}
						// uni登录
						uni.login({
							provider: provider,
							success: async loginRes => {
								console.log(loginRes)
								let code = loginRes.code // 获取开发code
								var userCode = uni.getStorageSync('userCode');
								loginByMiniApp({
										// encryptedData: e.mp.detail.encryptedData,
										// iv: e.mp.detail.iv,
										code: code,
										userCode: userCode
									})
									.then(res => {
										if (res.code == 200) {
											uni.hideLoading();
											uni.showToast({
												icon: 'none',
												title: "登录成功",
											});
											uni.setStorageSync('AppToken', res.token);
											uni.setStorageSync('userInfo', JSON.stringify(res.user));
											uni.hideLoading()
											uni.setStorageSync('isLiveLogin', true);
											this.getUserInfo()
											uni.$emit('refreshLogin');
											uni.navigateBack({
												delta: 1
											})
										} else {
											uni.hideLoading();
											uni.showToast({
												icon: 'none',
												title: "授权登录失败,请重新登录",
											});
										}

									})
									.catch(error => {
										console.log(error)
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: "登录接口调用失败",
										});
									})

							}
						})
					})
					.catch(err => {
						uni.showToast({
							icon: 'none',
							title: err,
						});
					})
			},
			// 微信用户手机号登录
			phoneLogin(e) {

				var that = this;
				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: "请先同意协议后再登录",
					});
					return false;
				}
				uni.showLoading({
					title: "处理中..."
				})
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					this.utils.getProvider()
						.then(provider => {
							console.log('当前的环境商', provider)
							if (!provider) {
								reject()
							}
							// uni登录
							uni.login({
								provider: provider,
								success: async loginRes => {
									console.log(loginRes)
									let code = loginRes.code // 获取开发code
									var userCode = uni.getStorageSync('userCode');
									loginByMiniApp({
											encryptedData: e.mp.detail.encryptedData,
											iv: e.mp.detail.iv,
											code: code,
											userCode: userCode
										})
										.then(res => {
											if (res.code == 200) {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: "登录成功",
												});
												uni.setStorageSync('AppToken', res.token);
												uni.setStorageSync('userInfo', JSON.stringify(res
													.user));
												uni.hideLoading()
												this.getUserInfo()

												uni.$emit('refreshLogin');
												uni.setStorageSync('isLiveLogin', true);
												uni.navigateBack({
													delta: 1
												})
											} else {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: "授权登录失败,请重新登录",
												});
											}

										})
										.catch(error => {
											console.log(error)
											uni.hideLoading();
											uni.showToast({
												icon: 'none',
												title: "登录接口调用失败",
											});
										})

								}
							})
						})
						.catch(err => {
							uni.showToast({
								icon: 'none',
								title: err,
							});
						})

				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			back() {
				uni.navigateBack()
				// uni.switchTab({
				// 	url:'/pages/home/index'
				// })
			}
		}
	}
</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, #2BC7B9 0%, #2aa7B9 100%);
					background: -moz-linear-gradient(to right, #2BC7B9 0%, #2aa7B9 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, #2BC7B9 0%, #2aa7B9 100%);
				background: -moz-linear-gradient(to right, #2BC7B9 0%, #2aa7B9 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 {
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #2BC7B9 0%, #2aa7B9 100%);
				background: -moz-linear-gradient(to right, #2BC7B9 0%, #2aa7B9 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 #2BC7B9;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2BC7B9;
			}
		}
	}

	.tips {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000;

		checkbox {}

		.btn {
			color: #2BC7B9;
		}
	}


	.wx-login {
		background: rgba(0, 0, 0, 0.7);
		z-index: 99999;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.form {
			border-radius: 20rpx;
			padding: 60rpx 30rpx;
			width: 500upx;
			height: 300upx;
			background-color: #fff;

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;

			}

			.desc {
				font-size: 28upx;
				margin: 60upx 0upx 60upx 0upx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.btn-box {
				margin-top: 30rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 10upx;
					width: 50%;
					height: 80rpx;
					border-radius: 5rpx;
					background-color: #2BC7B9;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
					position: relative;
				}

				.btn-close {
					margin-right: 10upx;
					width: 50%;
					height: 80rpx;
					border-radius: 5rpx;
					border: 2rpx solid #2BC7B9;
					background: none;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2BC7B9;
				}
			}
		}
	}

	.auth_btn {
		width: 100%;
		height: 100%;
		top: 0upx;
		position: absolute;
		opacity: 0.0;
	}
</style>