uniProject/pages/my/telDialog.vue

<template>
	<view class="my-tel-dialog">
		<view class="my-tel-content">
			<view class="tel-close" @click="telClose(AWSC)"></view>
			<view class="tel-row">
				<view class="my-tel-title">绑定新手机号</view>
				<view class="my-input-box">
					<input class="my-input" type="text" v-model="bindObj.telNumber" placeholder="请输入手机号" maxlength="11"
						@input="changeTelInput" />
					<view class="close-btn" v-if="bindObj.clearTelIcon" @click="clearTel"></view>
				</view>
				<view id="my-yzm-slider" :myflag="myflag" :change:myflag="AWSC.getReset" ></view>
				<view class="get-yzm-btn" @click="AWSC.getSliderData"
					:class="{ 'get-yzm-disabled': bindObj.isDisabled}">{{bindObj.buttonText}}</view>
			</view>
			<view class="yzm-row">
				<view class="yzm-tip" v-if="bindObj.getYzmFlag">验证码已发送至：{{bindObj.telNumber}}</view>
				<view class="my-input-box">
					<input class="my-input" type="text" v-model="bindObj.yzmNumber" placeholder="请输入验证码" maxlength="6"
						@input="changeYzmInput" />
					<view class="close-btn" v-if="bindObj.clearYzmIcon" @click="clearYzm"></view>
				</view>
				<view @click="bindBtn" class="my-bind-btn">绑定</view>
			</view>

		</view>
	</view>
</template>
<script>
	import cacheManager from '@/utils/cacheManager.js';
	import {
		telBind,
		sendCode
	} from "@/api/login.js"
	import {
		toast
	} from "../../utils/common";
	export default {
		data() {
			return {
				myflag: 0,
				sliderObj: {
					sessionId: '',
					sig: '',
					token: '',
				},
				bindObj: {
					telNumber: '',
					clearTelIcon: false,
					yzmNumber: '',
					clearYzmIcon: false,
					/*** 验证码 ***/
					yzmStatus: 'login-btn-disabled',
					timeLeft: 60, // 初始倒计时时间（秒）
					intervalId: null, // 定时器ID
					isDisabled: true, // 按钮是否禁用
					buttonText: '获取验证码', // 按钮文本
					getYzmFlag: false, // 是否发送验证码
				},
			}
		},
		methods: {
			receiveRenderData(data) {
				this.sliderObj = data;
				this.getYzmBtn();
			},
			
			showToast(){
				toast("请先完成滑块验证！")
			},
			
			telClose(AWSC) {
				AWSC.getReset();
				this.$emit('telClose')
			},
			
			telReset(){
				this.myflag++;
			},

			// 清空手机号
			clearTel() {
				this.bindObj.telNumber = '';
				this.bindObj.isDisabled = true;
				this.bindObj.clearTelIcon = false;
				this.bindObj.getYzmFlag = false;
			},

			// 判断是否输入手机号
			changeTelInput(event) {
				if (event.detail.value.length > 0) {
					this.bindObj.clearTelIcon = true;
					this.validatePhoneNumber(event.detail.value);
				} else {
					this.bindObj.clearTelIcon = false;
				}
			},

			// 手机号校验规则
			validatePhoneNumber(value) {
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (phoneRegex.test(value)) {
					// 通过
					this.bindObj.isDisabled = false;
				} else {
					// 不通过
					this.bindObj.isDisabled = true;
				}
			},
			// 获取验证码按钮
			getYzmBtn() {
				// 判断手机号校验是否通过
				if (this.bindObj.timeLeft !=60) {
					toast('请在'+this.bindObj.timeLeft +'后重新获取验证码！')
					return
				}else if(this.bindObj.isDisabled === true) {
					toast("请输入正确的手机号！")
					return
				}else{
					this.startCountdown();
					this.getMessage();
					this.telReset();
					this.sliderObj = {};
				}
			},

			getMessage() {
				let req = {
					appkey: "FFFF0N00000000007EC0",
					phone: this.bindObj.telNumber,
					scene: "nc_message_h5',",
					sessionid: this.sliderObj.sessionId,
					sig: this.sliderObj.sig,
					token: this.sliderObj.token,
				}
				sendCode(req).then(res => {
					this.bindObj.getYzmFlag = true;
				}).catch(err => {
					toast('验证码获取失败：' + err)
				})
			},

			// 清空验证码
			clearYzm() {
				this.bindObj.yzmNumber = '';
				this.bindObj.isDisabled = true;
				this.bindObj.clearYzmIcon = false;
			},

			// 判断是否输入验证码
			changeYzmInput(event) {
				if (event.detail.value.length > 0) {
					this.bindObj.clearYzmIcon = true;
				} else {
					this.bindObj.clearYzmIcon = false;
				}
			},

			// 开始计时
			startCountdown() {

				if (this.bindObj.buttonText === '重新发送') {
					this.sliderFlag = true;
				}
				this.bindObj.isDisabled = true;
				this.bindObj.buttonText = `重新发送（${this.bindObj.timeLeft}S）`;

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

				// 设置新的定时器
				this.bindObj.intervalId = setInterval(() => {
					this.bindObj.timeLeft--;
					if (this.bindObj.timeLeft <= 0) {
						clearInterval(this.bindObj.intervalId);
						this.bindObj.timeLeft = 60; // 重置倒计时
						this.bindObj.isDisabled = false;
						this.bindObj.buttonText = '重新发送';
					} else {
						this.bindObj.buttonText = `重新发送（${this.bindObj.timeLeft}S）`;
					}
				}, 1000);
			},

			// 绑定按钮
			bindBtn() {
				if (this.bindObj.telNumber === '') {
					toast('手机号不能为空')
					return;
				}
				if (this.bindObj.yzmNumber === '') {
					toast('验证码不能为空')
					return;
				}

				let req = {
					tel: this.bindObj.telNumber,
					code: this.bindObj.yzmNumber,
				}
				telBind(req).then(res => {
					if (res.code == 0) {
						toast('手机号绑定成功')
						this.updataTel(this.bindObj.telNumber);
						this.telReset();
						this.$emit('bindBtn')
					}
				})
			},

			// 在缓存中修改手机号
			updataTel(data) {
				cacheManager.updateObject('auth', {
					userName: data
				})
			}
		}
	}
</script>

<script module="AWSC" lang="renderjs">
	export default {
		mounted() {
			const script = document.createElement('script');
			script.src = 'https://g.alicdn.com/AWSC/AWSC/awsc.js';
			document.body.appendChild(script);
			script.onload = () => {
				this.init()
			}
		},
		data() {
			return {
				sessionId: '',
				sig: '',
				token: '',
				nc: null,
			}
		},
		methods: {
			init() {
				let that = this
				AWSC.use("nc", function(state, module) {
					that.nc = module.init({
						// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
						appkey: "FFFF0N00000000007EC0",
						//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
						scene: "nc_message_h5",
						// 声明滑动验证需要渲染的目标ID。
						renderTo: "my-yzm-slider",
						//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
						success: function(data) {
							that.getData(data)
						},
						// 滑动验证失败时触发该回调参数。
						fail: function(failCode) {
							console.log('失败：' + failCode)
						},
						// 验证码加载出现异常时触发该回调参数。
						error: function(errorCode) {
							console.log('异常：' + errorCode)
						}
					});
				})
			},
			getData(data) {
				this.sessionId = data.sessionId
				this.sig = data.sig
				this.token = data.token
				AWSC.getSliderData;
			},
			getReset() {
				this.sessionId = '';
				this.sig = '';
				this.token = '';
				this.nc && this.nc.reset();
			},
			getSliderData(e, ownerInstance) {
				if (this.sessionId) {
					ownerInstance.callMethod('receiveRenderData', {
						sessionId: this.sessionId,
						sig: this.sig,
						token: this.token
					})
				} else {
					ownerInstance.callMethod('showToast')
				}

			}

		}
	}
</script>