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">验证码已发送至：{{loginData.phoneNumber}}</view>
				<view class="phone-input-box">
					<input class="phone-input" type="text" v-model="loginData.yzmNumber" placeholder="请输入验证码" maxlength="6"
						@input="clearYzmInput" />
					<view class="close-btn" v-if="loginData.clearYzmIcon" @click="clearYzm"></view>
				</view>
				<view class="login-btn login-btn-disabled" @click="loginBtn" :class="loginData.yzmStatus"></view>
				<text class="cxfs-btn" @click="startCountdown"
					:class="{ 'cxfs-btn-disabled': loginData.isDisabled}">{{loginData.buttonText}}</text>
				<text class="login-text" @click="goIndex">无法收到验证码</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"
	import {
		login,
		sendCode
	} from "@/api/login.js"
	const loginData = reactive({
		phoneNumber: null,
		yzmNumber: null,
		clearYzmIcon: false,
		yzmStatus: '',
		timeLeft: 60, // 初始倒计时时间（秒）
		intervalId: null, // 定时器ID
		isDisabled: false, // 按钮是否禁用
		buttonText: '重新发送', // 按钮文本
	})
	const pageData = reactive({

	})

	onLoad((options) => {
		loginInit(options);
		startCountdown();
		getYzmBtn();
	})

	const loginInit = (options) => {
		loginData.phoneNumber = options.telNum;
		Object.assign(pageData, JSON.parse(options.data))
	}

	const getYzmBtn = () => {
		let req = {
			appkey: "FFFF0N00000000007EC0",
			phone: "18640920672",
			scene: "nc_message_h5',",
			sessionid: pageData.sessionId,
			sig: pageData.sig,
			token: pageData.token,
		}
		sendCode(req).then(res => {

		})
	}

	const loginBtn = () => {
		let req = {
			tel: "1",
			code: '1'
		}
		login(req).then(res => {
			if (res.code == 0) {
				let obj = JSON.stringify(res.data)
				console.log(obj)
				uni.setStorage({
					key: 'Mta-Auth',
					data: obj // 假设 this.userInputValue 是用户输入的数据
				});
			}
	
					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) {
			loginData.clearYzmIcon = true;
		} else {
			loginData.clearYzmIcon = false;
		}
	}

	const clearYzm = () => {
		loginData.yzmNumber = '';
		loginData.clearYzmIcon = false;
	}

	const startCountdown = () => {
		loginData.isDisabled = true;
		loginData.buttonText = `重新发送（${loginData.timeLeft}S）`;

		// 清除之前的定时器（如果有）
		if (loginData.intervalId) {
			clearInterval(loginData.intervalId);
		}

		// 设置新的定时器
		loginData.intervalId = setInterval(() => {
			loginData.timeLeft--;
			if (loginData.timeLeft <= 0) {
				clearInterval(loginData.intervalId);
				loginData.timeLeft = 60; // 重置倒计时
				loginData.isDisabled = false;
				loginData.buttonText = '重新发送';
			} else {
				loginData.buttonText = `重新发送（${loginData.timeLeft}S）`;
			}
		}, 1000);
	}
	
	const goIndex = () => {
		uni.navigateTo({
				url: `/pages/login/index?data=`+JSON.stringify(pageData)
		})
	}
</script>