uniProject/pages/login/index.vue

<template>
	<view class="ezy-login-page">
		<icon class="login-img"></icon>
		<!-- 手机号 -->
		<view class="login-body-box">
			<view class="phone-input-box">
				<view class="phone-prefix">+86</view>
				<input class="phone-input" type="text" v-model="indexData.phoneNumber" placeholder="请输入手机号"
					maxlength="11" @input="clearTelInput" />
				<view class="close-btn" v-if="indexData.clearTelIcon" @click="clearTel"></view>
			</view>
			<!-- 协议勾选框和按钮 -->
			<view class="agreement-checkbox-box">
				<checkbox-group @change="handleAgreementChange">
					<checkbox class="agreement-checkbox-input" color="#FFFFFF" value="agree"
						:checked="indexData.isAgreed" />
				</checkbox-group>
				<view class="agreement-text-box">
					我已阅读并同意<view class="agreement-text" @click="agreeBtn('yhxy')">《用户协议》</view>和<view
						@click="agreeBtn('ystk')" class="agreement-text">《隐私政策》</view>
				</view>
			</view>
			<ezyActiveVue class="ezy-btn-active login-btn" @aclick="getYzmBtn" :class="indexData.telStatus">发送验证码</ezyActiveVue>
			<view class="bottom-btn-box">
				<view class="bottom-tip">选择第三方登录</view>
				<view class="btn-box">
					<view v-if="wxFlag" class="wx-btn" @click="wxLoginClick">
						<icon></icon>
						<view>微信登录</view>
					</view>
					<!-- 			<view class="yk-btn" @click="ykBtn">
						<icon></icon>
						<view>游客登录</view>
					</view> -->
					<view class="apple-btn" v-if="showAppleLogin" @click="appleLoginClick">
						<icon></icon>
						<view>苹果登录</view>
					</view>
				</view>
			</view>
		</view>
		<agree-content-dialog ref="agreeContentDialogRef" :agreeType="agreeType"></agree-content-dialog>
		<agree-dialog ref="agreeDialogRef" @confirm-btn="confirmBtn"></agree-dialog>
		<agree-dialog ref="agreeYkDialog" @confirm-btn="ykConfirmBtn"></agree-dialog>
		<agree-dialog ref="agreeWxDialog" @confirm-btn="wxConfirmBtn"></agree-dialog>
		<tel-dialog ref="telDialogRef" @telClose="telClose" @bindBtn="bindBtn" v-if="telDialogFlag"></tel-dialog>
		<tip-dialog ref="tipDialogRef" :title="tipTitle" :content="tipContent"></tip-dialog>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick,
		reactive
	} from "vue"
	import {
		onLoad,
		onReady,
		onBackPress
	} from '@dcloudio/uni-app';
	import agreeContentDialog from './agreeContentDialog.vue';
	import agreeDialog from './agreeDialog.vue'
	import {
		wxLogin,
		getVersion
	} from "@/api/login.js"
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import telDialog from './telDialog.vue'
	import cacheManager from "@/utils/cacheManager.js";
	import tipDialog from '@/components/dialog/tipDialog.vue';
	import config from '../../config.js'
	import {
		error
	} from "uview-plus";
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	
	let indexData = reactive({
		phoneNumber: null,
		clearTelIcon: false,
		telStatus: 'login-btn-disabled',
		isAgreed: false,
		sliderObj: {},
	})
	const agreeContentDialogRef = ref(null);
	const agreeType = ref(null);
	const agreeDialogRef = ref(null);
	const agreeYkDialog = ref(null);
	const agreeWxDialog = ref(null);
	const telDialogRef = ref(null);
	let telDialogFlag = ref(false);
	let showAppleLogin = ref(false);
	let wxFlag = ref(true);

	const version = config.appInfo.version;
	const tipDialogRef = ref(null);
	const tipTitle = '升级提醒';
	const tipContent = '您的APP不是最新版本，部分功能不能使用，请升级至最新版本！';

	onLoad((options) => {
		showAppleLogin.value = isIOS13OrAbove();
		getLoginInit()
		if (plus.runtime.isApplicationExist({
				pname: 'com.tencent.mm',
				action: 'weixin://'
			})) {
			console.log('111', "已安装微信");
			wxFlag.value = true
		} else {
			wxFlag.value = false
		}
		console.log('showAppleLogin.value', showAppleLogin.value);

	})

	function getLoginInit() {
		getVersion({}).then(res => {
			if (version != res.data.version) {
				tipDialogRef.value.handleShow();
			}
		})
	}
	const getYzmBtn = () => {
		if (indexData.telStatus === 'login-btn-normal') {
			if (indexData.isAgreed === true) {
				uni.redirectTo({
					url: `/pages/login/login?telNum=${indexData.phoneNumber}`
				})
			} else {
				agreeDialogRef.value.handleShow();
			}
		}
	}
	const isIOS13OrAbove = () => {
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo.platform == 'ios') {
			const version = systemInfo.system.split(' ')[1].split('.');
			const majorVersion = parseInt(version[0], 10);
			return majorVersion >= 13;
		}
		return false;
	}
	// 用户协议同意
	const confirmBtn = () => {
		indexData.isAgreed = true;
		getYzmBtn();
	}
	const telClose = () => {
		telDialogFlag.value = false;
	}
	const bindBtn = (res) => {
		telDialogFlag.value = false;
		if (res.cardId == 0) {
			uni.redirectTo({
				url: `/pages/selectGradesTerms/index`
			})
		} else {
			uni.redirectTo({
				url: `/pages/study/index`
			})
		}
	}

	const ykConfirmBtn = () => {
		uni.redirectTo({
			url: `/pages/selectGradesTerms/index`
		})
	}

	const wxConfirmBtn = () => {
		wxLoginFun();
	}

	// 手机号校验规则
	const validatePhoneNumber = (value) => {
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (phoneRegex.test(value)) {
			indexData.telStatus = 'login-btn-normal';
		} else {
			indexData.telStatus = 'login-btn-disabled';
		}
	}

	const clearTelInput = (event) => {
		if (event.detail.value.length > 0) {
			indexData.clearTelIcon = true;
			validatePhoneNumber(event.detail.value);
		} else {
			indexData.clearTelIcon = false;
		}
	}

	const clearTel = () => {
		indexData.phoneNumber = '';
		indexData.telStatus = 'login-btn-disabled';
		indexData.clearTelIcon = false;
	}

	const agreeBtn = (data) => {
		if (data === 'yhxy') {
			agreeType.value = 'yhxy'
		} else {
			agreeType.value = 'ystk'
		}
		agreeContentDialogRef.value.handleShow();
	};

	const handleAgreementChange = (event) => {
		if (event.detail.value[0] === 'agree') {
			indexData.isAgreed = true;
		} else {
			indexData.isAgreed = false;
		}
	}
	// 游客登录
	const ykBtn = () => {
		if (indexData.isAgreed === true) {
			uni.redirectTo({
				url: `/pages/selectGradesTerms/index`
			})
		} else {
			agreeYkDialog.value.handleShow();
		}
	}
	const appleLoginClick = () => {
		uni.login({
			provider: 'apple',
			success: function(loginRes) {
				console.log('loginRes', loginRes);
				let req = {
					"apple": true,
					"code": loginRes.appleInfo.user
				}
				console.log(req);
				console.log(req);
				wxLogin(req).then(res => {
					console.log(res);
					if (!res.data.bind) {
						console.log('未绑定');
						cacheManager.set('wxLogin', {
							bind: res.data.bing
						})
						telDialogFlag.value = true;
						nextTick(() => {
							telDialogRef.value.getOpenId(res.data.openId);
						})
					} else {
						uni.showLoading({
							title: '登录中'
						});
						setTimeout(() => {
							cacheManager.set('auth', res.data.loginVo)
							if (res.data.loginVo.subjectId == 0 && res.data.loginVo
								.levelId == 0) {

								uni.redirectTo({
									url: `/pages/selectGradesTerms/index`
								})
								uni.hideLoading();
							} else {

								uni.redirectTo({
									url: `/pages/study/index`
								})
								uni.hideLoading();
							}
						}, 1000)
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			fail: function(err) {
				console.log('err.code', err.code);
				// 登录授权失败
				// err.code错误码参考`授权失败错误码(code)说明`
			}
		});
	}


	// 游客登录
	const wxLoginClick = () => {
		if (indexData.isAgreed === true) {
			wxLoginFun();
		} else {
			agreeWxDialog.value.handleShow();
		}
	}

	const wxLoginFun = () => {
		//获取服务商信息判断手机端是否安装了app
		// uni.getProvider({
		// 	service: 'oauth',// oauth  代表授权登录
		// 	success: function (res) {
		// 	  // 登录
		// 	  uni.login({
		// 		  // 表示授权方式  如果不设置则弹出登录列表选择界面
		// 		  provider: 'weixin',
		// 		 	"onlyAuthorize": true, // 微信登录仅请求授权认证
		// 		  success: function (loginRes) {
		// 			  		console.log('loginRes',loginRes); 

		// 		  }
		// 	  });
		//    }
		// });

		if (plus.runtime.isApplicationExist({
				pname: 'com.tencent.mm',
				action: 'weixin://'
			})) {
			console.log('111', "已安装微信");
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event) {
					console.log(event);
					const {
						code
					} = event
					//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					let req = {
						"apple": false,
						"code": code
					}
					console.log(req);
					wxLogin(req).then(res => {
						console.log(res);
						if (!res.data.bind) {
							console.log('未绑定');
							cacheManager.set('wxLogin', {
								bind: res.data.bing
							})
							telDialogFlag.value = true;
							nextTick(() => {
								telDialogRef.value.getOpenId(res.data.openId);
							})
						} else {
							uni.showLoading({
								title: '登录中'
							});
							setTimeout(() => {
								cacheManager.set('auth', res.data.loginVo)
								if (res.data.loginVo.subjectId == 0 && res.data.loginVo
									.levelId == 0) {

									uni.redirectTo({
										url: `/pages/selectGradesTerms/index`
									})
									uni.hideLoading();
								} else {

									uni.redirectTo({
										url: `/pages/study/index`
									})
									uni.hideLoading();
								}
							}, 1000)
						}
					}).catch((error) => {
						console.log(error);
					})
				},
				fail: function(err) {
					console.log(err);
					// 登录授权失败
					// err.code是错误码
				}
			})
		} else {
			toast("请重启应用重试")
			return false
		}
	}
</script>