uniProject/pages/my/telDialog.vue

<template>
	<view class="my-tel-dialog">
		<view class="my-tel-content">
			<view class="tel-close" @click="telClose"></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"></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 {
				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();
			},
			telClose() {
				this.getReset();
				this.$emit('telClose')
			},
			
			// 清空手机号
			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.isDisabled === true){
					toast("请输入正确的手机号！")
					return
				}else{
					this.startCountdown();
					this.getMessage();
					this.getReset();
					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.telClose();
						this.$emit('bindBtn')
					}
				})
			},
			
			// 在缓存中修改手机号
			updataTel(data){
				cacheManager.updateObject('auth', {
					userName: data
				})
			}
		}
	}
</script>

<script module="AWSC" lang="renderjs">
	import {toast} from "../../utils/common";
	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.reset();
			},
			getSliderData(e, ownerInstance) {
				if(this.sessionId){
					ownerInstance.callMethod('receiveRenderData', {
						sessionId: this.sessionId,
						sig: this.sig,
						token: this.token
					})
				}else{
					toast("请先完成滑块验证！")
				}
				
			}

		}
	}
</script>