uniProject/pages/login/login.vue

<template>
  <view class="ezy-login-page">
	  <view class="ezy-login-wrap" >
			<view class="login-body-box">
				<view class="login-title-img"></view>
				<view class="yzm-show">验证码已发送至：{{data.phoneNumber}}</view>
				<view class="phone-input-box">
					<input class="phone-input" type="text" v-model="data.yzmNumber" placeholder="请输入验证码" 
					maxlength="6" @input="clearYzmInput" />
					<view class="close-btn" v-if="data.clearYzmIcon" @click="clearYzm"></view>
				</view>
				<view class="login-btn login-btn-disabled" @click="loginBtn" :class="data.yzmStatus"></view>
				<text class="cxfs-btn" @click="startCountdown"
				:class="{ 'cxfs-btn-disabled': data.isDisabled}">{{data.buttonText}}</text>
				<text class="login-text">无法收到验证码</text>
				<text class="login-text">客服电话:400-052-2130</text>
			</view>
		</view>
		  
  </view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import request from "@/utils/request.js"
	
	const data = reactive({
		phoneNumber: null,
		yzmNumber: null,
		clearYzmIcon: false,
		yzmStatus:'',
		timeLeft: 60, // 初始倒计时时间（秒）
		intervalId: null, // 定时器ID
		isDisabled: false, // 按钮是否禁用
		buttonText: '重新发送' // 按钮文本
	})

	onLoad((options) => {
			startCountdown();
			// getYzmBtn();
	})
		
	/********* 验证码 *********/
	const getYzmBtn = () => {
		return request({
			url: "/common/app/send/code",
			method: "POST",
			data: {
				phone: 18842603074,
				sign: ''
			}
		})
	}
	
	const loginBtn = () => {
		uni.switchTab({
			url: '/pages/study/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;
	}
	
	const startCountdown= () => {
	     data.isDisabled = true;
	      data.buttonText = `重新发送（${data.timeLeft}S）`;
	      
	      // 清除之前的定时器（如果有）
	      if (data.intervalId) {
	        clearInterval(data.intervalId);
	      }
	      
	      // 设置新的定时器
	      data.intervalId = setInterval(() => {
	        data.timeLeft--;
	        if (data.timeLeft <= 0) {
	          clearInterval(data.intervalId);
	          data.timeLeft = 60; // 重置倒计时
	          data.isDisabled = false;
	          data.buttonText = '重新发送';
	        } else {
	          data.buttonText = `重新发送（${data.timeLeft}S）`;
	        }
	      }, 1000);
	    }
	
	
</script>