wangguoyu 4 месяцев назад
Родитель
Сommit
d8c4c8a3f3
1 измененных файлов с 290 добавлено и 0 удалено
  1. 290 0
      pages/login/telDialog.vue

+ 290 - 0
pages/login/telDialog.vue

@@ -0,0 +1,290 @@
+<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 {
+		firstTelBind,
+		sendCode
+	} from "@/api/login.js"
+	import {
+		toast
+	} from "../../utils/common";
+	export default {
+		data() {
+			return {
+				myflag: 0,
+				sliderObj: {
+					sessionId: '',
+					sig: '',
+					token: '',
+				},
+				bindObj: {
+					apple: false,
+					openId: '',
+					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(AWSC) {
+				AWSC.getReset();
+				this.$emit('telClose')
+			},
+
+			// 清空手机号
+			clearTel() {
+				this.bindObj.telNumber = '';
+				this.bindObj.isDisabled = true;
+				this.bindObj.clearTelIcon = false;
+				this.bindObj.getYzmFlag = false;
+			},
+			getOpenId(data){
+				this.bindObj.openId = data
+			
+			},
+			// 判断是否输入手机号
+			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.myflag++;
+					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,
+					apple: this.bindObj.apple,
+					openId: this.bindObj.openId,
+				}
+				console.log(req);
+				firstTelBind(req).then(res => {
+					if (res.code == 0) {
+						console.log(res.data);
+						toast('手机号绑定成功')
+						cacheManager.set('auth',res.data)
+						this.$emit('bindBtn',res.data)
+					//	this.telClose();
+				
+					}
+				})
+			},
+		}
+	}
+</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 && this.nc.reset();
+			},
+			getSliderData(e, ownerInstance) {
+				if (this.sessionId) {
+					ownerInstance.callMethod('receiveRenderData', {
+						sessionId: this.sessionId,
+						sig: this.sig,
+						token: this.token
+					})
+				} else {
+					toast("请先完成滑块验证!")
+				}
+
+			}
+
+		}
+	}
+</script>