uniProject/pages/login/login.vue

<template>
	<view class="ezy-login-page">
		<view @click="goIndex" class="ezy-nav-bar-icon yzm-nav-bar-icon"></view>
		<icon class="login-img"></icon>
		<view class="ezy-login-wrap">
			<view class="login-body-box">
				<view class="yzm-show">验证码已发送至：{{loginData.phoneNumber}}</view>

				<view class="phone-input-box">
					<input class="phone-input" type="text" v-model="loginData.yzmNumber" placeholder="请输入验证码"
						maxlength="4" @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">客服电话：<text>4001750778</text></text>
			</view>
		</view>
		<captcha ref="captcha" :config="config" @captchaSuccess="captchaSuccess" @captchaError="captchaError"
			@captchaFail="captchaFail" @captchaReady="captchaReady" @captchaClose="captchaClose"></captcha>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue"
	import {
		login,
		sendCode
	} from "@/api/login.js"
	import cacheManager from "@/utils/cacheManager.js";
	import captcha from "../../components/captcha4/index.vue";
	import {
		toast
	} from "../../utils/common";
	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,
				config: {
					captchaId: "9d5837b0807b8de44da0de310a0b2813",
				},

			}
		},
		components: {
			captcha
		},
		onLoad(options) {
			this.loginInit(options);
		},
		onReady() {},
		methods: {

			captchaSuccess(result) { // app端的回调
				console.log(result)
				this.startCountdown();
				this.sliderData = result;
				this.getYzmBtn();

			},
			captchaError(e) {
				// app端的回调、
				console.log('error',JSON.stringify(e));
				toast(JSON.stringify(e))
			},
			captchaReady() {
				// app端的回调
			},
			captchaFail() {
				// app端的回调
				toast('验证失败！')
			},
			captchaClose() {
				uni.redirectTo({
					url: `/pages/login/index`
				})
			},

			loginInit(options) {
				this.loginData.phoneNumber = options.telNum;
			},
			getYzmBtn() {
				let req = {
					phone: this.loginData.phoneNumber,
					captchaOutput: this.sliderData.captcha_output,
					genTime: this.sliderData.gen_time,
					lotNumber: this.sliderData.lot_number,
					passToken: this.sliderData.pass_token,
				}
				console.log('req', req);
				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)
						uni.redirectTo({
							url: `/pages/chanpinXuanze/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.$refs.captcha.showCaptcha();
				}
				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() {
			this.$refs.captcha.showCaptcha();
		},
	}
</script>