uniProject/pages/login.vue

<template>
  <view class="ezy-login-page">
	  <view class="ezy-login-wrap" >
			<!-- 手机号 -->
			<template v-if="data.loginTel">
				<view class="login-body-box">
					<view class="login-title-img"></view>
				    <view class="phone-input-box">
						<view class="phone-prefix">+86</view>
						<input class="phone-input" type="text" v-model="data.phoneNumber" placeholder="请输入手机号" 
						maxlength="11" :value="data.phoneNumber" @input="clearTelInput" />
						<view class="close-btn" v-if="data.clearTelIcon" @click="clearTel"></view>
				    </view>
					<!-- 协议勾选框和按钮 -->
					<view class="agreement-checkbox-box">
						<checkbox class="agreement-checkbox" color="#FFFFFF" :checked="isAgreed" @change="handleAgreementChange">
						  我已阅读并同意<view class="agreement-text">《用户协议》</view>和<view class="agreement-text">《隐私政策》</view>
						</checkbox>
					</view>
					<view class="yzm-btn-disabled" @click="getYzmBtn" :class="data.telStatus"></view>
				</view>
				<view class="wx-btn-img"></view>
			</template>
			<!-- 验证码 -->
			<template v-if="!data.loginTel">
				<view class="login-body-box">
					<view class="login-title-img"></view>
					<view class="phone-prefix">验证码已发送至：{{data.phoneNumber}}</view>
					<view class="phone-input-box">
						<input class="phone-input" type="text" v-model="data.yzmNumber" placeholder="请输入验证码" 
						maxlength="6" :value="data.yzmNumber" @input="clearYzmInput" />
						<view class="close-btn" v-if="data.clearYzmIcon" @click="clearYzm"></view>
					</view>
					<view class="yzm-btn-disabled" @click="loginBtn" :class="data.yzmStatus"></view>
				</view>
			</template>
		  </view>
		  
  </view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	
	const data = reactive({
		loginTel: true,
		phoneNumber: null,
		clearTelIcon: false,
		telStatus:'',
		isAgreed: false,
		yzmNumber: null,
		clearYzmIcon: false,
		yzmStatus:'',
	})
	
	/********* 手机号部分 *********/
	const getYzmBtn = () => {
		console.log('123');
		data.loginTel =false;
		
	}
	
	// 手机号校验规则
	const validatePhoneNumber = (value) => {
	  const phoneRegex = /^1[3-9]\d{9}$/;
	  if (phoneRegex.test(value)) {
		console.log('手机号格式正确');
		data.telStatus = 'yzm-btn-normal';
	  } else {
	    console.log('手机号格式不正确');
	  }
	}
	
	const clearTelInput = (event) => {
	    if (event.detail.value.length > 0) {
	        data.clearTelIcon = true;
			validatePhoneNumber(event.detail.value);
	    } else {
	        data.clearTelIcon = false;
	    }
	}
			
	const clearTel = () => {
		data.phoneNumber = '';
		data.clearTelIcon = false;
	}
	
	/********* 验证码 *********/
	const loginBtn = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
		/* uni.navigateTo({
			url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
		}) */
	}
	
	const clearYzmInput = (event) => {
		if (event.detail.value.length > 0) {
		    data.clearYzmIcon = true;
		} else {
		    data.clearYzmIcon = false;
		}
	}
	
	const clearYzm = () => {
		data.yzmNumber = '';
		data.clearYzmIcon = false;
	}
	
	
</script>