uniProject/components/loginComp/index.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
		<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>

				<ezyActiveVue class="ezy-btn-active login-btn" @aclick="getYzmBtn" :class="indexData.telStatus">发送验证码
				</ezyActiveVue>
			</view>


		</view>
	</uni-popup>
	<yanzhengmaVue ref="yanzhengmaRef"></yanzhengmaVue>
	<agree-dialog ref="agreeDialogRef" @confirm-btn="confirmBtn"></agree-dialog>
	<agreeContentDialogVue ref="agreeContentDialogRef" :agreeType="agreeType"></agreeContentDialogVue>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import yanzhengmaVue from "./yanzhengma.vue";
	import agreeContentDialogVue from "@/pages/login/agreeContentDialog.vue";
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import {
		toast
	} from "@/utils/common";
	import agreeDialog from "@/pages/login/agreeDialog.vue";

	const popupRef = ref(null)
	const yanzhengmaRef = ref(null)
	const agreeType = ref(null);
	const agreeContentDialogRef = ref(null);
	const agreeDialogRef = ref(null)

	let indexData = reactive({
		phoneNumber: null,
		clearTelIcon: false,
		telStatus: 'login-btn-disabled',
		isAgreed: false,
		sliderObj: {},
	})

	function showPopup() {
		popupRef.value.open()
	}

	function closePopup() {
		popupRef.value.close()
	}

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

	// 手机号校验规则
	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 handleAgreementChange = (event) => {
		if (event.detail.value[0] === 'agree') {
			indexData.isAgreed = true;
		} else {
			indexData.isAgreed = false;
		}
	}
	
	// 用户协议同意
	const confirmBtn = () => {
		indexData.isAgreed = true;
		getYzmBtn();
	}

	const getYzmBtn = () => {
		if (indexData.telStatus === 'login-btn-normal') {
			// 手机号完整
			if (indexData.isAgreed === true) {
				console.log('获取验证码')
				// 同意协议
				// yanzhengmaRef.value.


			} else {
				// 不同意协议
				agreeDialogRef.value.handleShow();
			}
		} else {
			toast('请输入合法手机号')
		}
	}

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

		agreeContentDialogRef.value.handleShow();
	};


	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>

</style>