uniProject/pages/login/index.vue

<template>
	<view class="ezy-login-page">
		<view class="ezy-login-wrap">
			<icon class="login-e-img"></icon>
			<!-- 手机号 -->
			<view class="login-body-box">
				<view class="index-title-img"></view>
				<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>
				<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus"></view>
			</view>
			<view class="bottom-btn-box">
				<view class="yk-btn" @click="ykBtn"></view>
				<view class="wx-btn" @click="wxLoginClick"></view>
				<view class="apple-btn" v-if="showAppleLogin" @click="appleLoginClick"></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>
		<tel-dialog ref="telDialogRef" @telClose="telClose" @bindBtn="bindBtn" v-if="telDialogFlag"></tel-dialog>
	</view>
</template>

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

	onLoad((options) => {
		showAppleLogin.value = isIOS13OrAbove();
		console.log('showAppleLogin.value',showAppleLogin.value);
	})

	const getYzmBtn = () => {
		if (indexData.telStatus === 'tel-btn-normal') {
			if (indexData.isAgreed === true) {
				uni.navigateTo({
					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.navigateTo({
			url: `/pages/selectGradesTerms/index`
		})
	}
	// 手机号校验规则
	const validatePhoneNumber = (value) => {
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (phoneRegex.test(value)) {
			indexData.telStatus = 'tel-btn-normal';
		} else {
			indexData.telStatus = 'tel-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 = 'tel-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
				}
				console.log(req);
				wxLogin(req).then(res => {
					console.log(res);
					uni.showLoading({
						title: '登录中'
					});
					setTimeout(() => {
						cacheManager.set('auth', res.data.loginVo)
						if (res.data.loginVo.cardId == 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 = () => {
		//获取服务商信息判断手机端是否安装了app
		// uni.getProvider({
		// 	service: 'oauth',// oauth  代表授权登录
		// 	success: function (res) {
		// 	  // 登录
		// 	  uni.login({
		// 		  // 表示授权方式  如果不设置则弹出登录列表选择界面
		// 		  provider: 'weixin',
		// 		 	"onlyAuthorize": true, // 微信登录仅请求授权认证
		// 		  success: function (loginRes) {
		// 			  		console.log('loginRes',loginRes); 

		// 		  }
		// 	  });
		//    }
		// });
		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.cardId == 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是错误码
			}
		})
	}
</script>