uniProject/pages/login/index.vue

<template>
  <view class="ezy-login-page">
	  <view class="ezy-login-wrap" >
			<!-- 手机号 -->
				<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">《用户协议》</view>和<view @click="agreeBtn" class="agreement-text">《隐私政策》</view>
						</view>
					</view>
					<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus"></view>
				</view>
				<view class="bottom-btn-box">
					<view class="wx-btn"></view>
					<view class="yk-btn" @click="ykBtn"></view>
				</view>
		</view>
	  <agree-content-dialog ref="agreeContentDialogRef"></agree-content-dialog>
	  <agree-dialog ref="agreeDialogRef" @confirm-btn="confirmBtn"></agree-dialog>
  </view>
</template>

<script setup>
	import {ref,reactive} from "vue"
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import agreeContentDialog from './agreeContentDialog.vue';
	import agreeDialog from './agreeDialog.vue'
	
	let indexData = reactive({
		phoneNumber: null,
		clearTelIcon: false,
		telStatus:'tel-btn-disabled',
		isAgreed: false,
		sliderObj:{},
	})
	const agreeContentDialogRef = ref(null);
	const agreeDialogRef = ref(null);

	onLoad((options) => {})
	
	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 confirmBtn = () => {
		indexData.isAgreed = true;
		getYzmBtn();
	}
	// 手机号校验规则
	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 = () => {
		agreeContentDialogRef.value.handleShow();
	};

	const handleAgreementChange= (event) => {
		if(event.detail.value[0]==='agree'){
			indexData.isAgreed = true;
		}else{
			indexData.isAgreed = false;
		}
	}
	// 游客登录
	const ykBtn = () => {
		uni.redirectTo({url:`/pages/selectGradesTerms/index`})
	}
</script>