uniProject/pages/login/login.vue

<template>
	<view class="ezy-login-page">
		<view @click="goIndex" class="login-nav-bar-icon"></view>
		<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 yzm-btn" @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>
		<sliderDialog ref="sliderDialogRef" @emitFun="emitFun" @sliderClose="sliderClose" v-if="sliderFlag"></sliderDialog>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue"
	import {
		login,
		sendCode
	} from "@/api/login.js"
	import sliderDialog from './sliderDialog.vue'
	import cacheManager from "@/utils/cacheManager.js";

	export default {
		data() {
			return {
				loginData: {
					phoneNumber: null,
					yzmNumber: null,
					clearYzmIcon: false,
					yzmStatus: 'login-btn-disabled',
					timeLeft: 60, // 初始倒计时时间（秒）
					intervalId: null, // 定时器ID
					isDisabled: false, // 按钮是否禁用
					buttonText: '', // 按钮文本
				},
				sliderData: {},
				sliderDialogRef: null,
				sliderFlag: false,

			}
		},   
		components: {
			sliderDialog
        },
		onLoad(options) {
			this.loginInit(options);
		},
		onReady() {},
		methods: {
			emitFun(data){
				this.sliderFlag =false;
				this.startCountdown();
				this.sliderData =data;
				this.getYzmBtn();
			},
			sliderClose(){
				this.sliderFlag =false;
			},
			loginInit(options) {
				this.loginData.phoneNumber = options.telNum;
				this.sliderFlag = true;
			},
			getYzmBtn() {
				let req = {
					appkey: "FFFF0N00000000007EC0",
					phone: this.loginData.phoneNumber,
					scene: "nc_message_h5',",
					sessionid: this.sliderData.sessionId,
					sig: this.sliderData.sig,
					token: this.sliderData.token,
				}
				sendCode(req).then(res => {

				})
			},
			loginBtn() {
				let req = {
					tel: this.loginData.phoneNumber,
					code: this.loginData.yzmNumber,
				}
				login(req).then(res => {
					if (res.code == 0) {
						cacheManager.set('auth',res.data)
						if (res.data.cardId == 0 ) {
							uni.redirectTo({
								url: `/pages/selectGradesTerms/index`
							})
						} else {
							uni.redirectTo({
								url: `/pages/study/index`
							})
						}
					}
				})
			},
			clearYzmInput(event) {
				if (event.detail.value.length > 0) {
					this.loginData.clearYzmIcon = true;
					this.loginData.yzmStatus = 'login-btn-normal';
				} else {
					this.loginData.clearYzmIcon = false;
					this.loginData.yzmStatus = 'login-btn-disabled';
				}
			},
			clearYzm() {
				this.loginData.yzmNumber = '';
				this.loginData.yzmStatus = 'login-btn-disabled';
				this.loginData.clearYzmIcon = false;
			},
			startCountdown() {
				if(this.loginData.buttonText === '重新发送'){
					this.sliderFlag = true;
				}
				this.loginData.isDisabled = true;
				this.loginData.buttonText = `重新发送（${this.loginData.timeLeft}S）`;

				// 清除之前的定时器（如果有）
				if (this.loginData.intervalId) {
					clearInterval(this.loginData.intervalId);
				}
				
				// 设置新的定时器
				this.loginData.intervalId = setInterval(() => {
					this.loginData.timeLeft--;
					if (this.loginData.timeLeft <= 0) {
						clearInterval(this.loginData.intervalId);
						this.loginData.timeLeft = 60; // 重置倒计时
						this.loginData.isDisabled = false;
						this.loginData.buttonText = '重新发送';
					} else {
						this.loginData.buttonText = `重新发送（${this.loginData.timeLeft}S）`;
					}
				}, 1000);
			},
			
			goIndex() {
				uni.redirectTo({
					url: `/pages/login/index`
				})
			}

		},
		mounted() {
		},
	}
</script>