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>
		<sliderDialog ref="sliderDialogRef" @emitFun="emitFun"></sliderDialog>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue"
	import {
		login,
		sendCode
	} from "@/api/login.js"
	import sliderDialog from './sliderDialog.vue'
	export default {
		data() {
			return {
				loginData: {
					phoneNumber: null,
					yzmNumber: null,
					clearYzmIcon: false,
					yzmStatus: '',
					timeLeft: 60, // 初始倒计时时间（秒）
					intervalId: null, // 定时器ID
					isDisabled: false, // 按钮是否禁用
					buttonText: '重新发送', // 按钮文本
				},
				sliderData: {},
				sliderDialogRef: null,

			}
		},   
		components: {
			sliderDialog
        },
		onLoad(options) {
			this.loginInit(options);
			this.startCountdown();
			this.getYzmBtn();
		},
		onReady() {
			// console.log(sliderDialogRef.value,'sliderDialogRef.value');
			// this.$refs.sliderDialogRef.sliderShow();
		},
		methods: {
			emitFun(data){
				console.log(data,'滑块成功')
			},
			// receiveRenderData(data) {
			// 	console.log("获得接受")
			// 	console.log(data)
			// },
			loginInit(options) {
				this.loginData.phoneNumber = options.telNum;
			},
			getYzmBtn() {
				let req = {
					appkey: "FFFF0N00000000007EC0",
					phone: "18640920672",
					scene: "nc_message_h5',",
					sessionid: this.sliderData.sessionId,
					sig: this.sliderData.sig,
					token: this.sliderData.token,
				}
				sendCode(req).then(res => {

				})
			},
			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.navigateTo({
							url: `/pages/study/index?gradeId=${obj.orgId}&termId=${obj.userId}&text='测试111'`
						})
					}
				})
			},
			clearYzmInput(event) {
				if (event.detail.value.length > 0) {
					this.loginData.clearYzmIcon = true;
				} else {
					this.loginData.clearYzmIcon = false;
				}
			},
			clearYzm() {
				this.loginData.yzmNumber = '';
				this.loginData.clearYzmIcon = false;
			},
			startCountdown() {
				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.navigateTo({
					url: `/pages/login/index?data=` + JSON.stringify(this.sliderData)
				})
			}

		},
		mounted() {
		//	this.$refs.sliderDialogRef.sliderShow();
		},
	}
</script>