1

pages/login/telDialog.vue

@@ -9,9 +9,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>
+
+				<captcha ref="captcha" :config="config" @captchaSuccess="captchaSuccess" @captchaError="captchaError"
+					@captchaFail="captchaFail" @captchaReady="captchaReady" @captchaClose="captchaClose"></captcha>
+				<view class="get-yzm-btn" @click="getYzmBtn" :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>
@@ -28,6 +30,7 @@
 </template>
 <script>
 	import cacheManager from '@/utils/cacheManager.js';
+	import captcha from "../../components/captcha4/index.vue";
 	import {
 		firstTelBind,
 		sendCode
@@ -59,15 +62,17 @@
 					buttonText: '获取验证码', // 按钮文本
 					getYzmFlag: false, // 是否发送验证码
 				},
+				config: {
+					captchaId: "16e4de331cee10dfe36bcf55810c6041",
+				},
 			}
 		},
+		components: {
+			captcha
+		},
 		methods: {
-			receiveRenderData(data) {
-				this.sliderObj = data;
-				this.getYzmBtn();
-			},
-			telClose(AWSC) {
-				AWSC.getReset();
+
+			telClose() {
 				this.$emit('telClose')
 			},
 
@@ -78,10 +83,6 @@
 				this.bindObj.clearTelIcon = false;
 				this.bindObj.getYzmFlag = false;
 			},
-			getOpenId(data){
-				this.bindObj.openId = data
-			
-			},
 			// 判断是否输入手机号
 			changeTelInput(event) {
 				if (event.detail.value.length > 0) {
@@ -113,21 +114,41 @@
 					toast("请输入正确的手机号！")
 					return
 				} else {
-					this.startCountdown();
-					this.getMessage();
-					this.myflag++;
-					this.sliderObj = {};
+					this.$refs.captcha.showCaptcha();
 				}
 			},
+			captchaSuccess(result) { // app端的回调
+				console.log(result)
+				this.startCountdown();
+				this.sliderData = result;
+				this.getMessage();
 
+			},
+			captchaError(e) {
+				// app端的回调
+				toast(JSON.stringify(e))
+			},
+			captchaReady() {
+				// app端的回调
+			},
+			captchaFail() {
+				// app端的回调
+				toast('验证失败！')
+			},
+			captchaClose() {
+				// uni.redirectTo({
+				// 	url: `/pages/login/index`
+				// })
+			},
 			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,
+					captchaOutput: this.sliderData.captcha_output,
+					genTime: this.sliderData.gen_time,
+					lotNumber: this.sliderData.lot_number,
+					passToken: this.sliderData.pass_token,
+
+
 				}
 				sendCode(req).then(res => {
 					this.bindObj.getYzmFlag = true;
@@ -156,7 +177,7 @@
 			startCountdown() {
 
 				if (this.bindObj.buttonText === '重新发送') {
-					this.sliderFlag = true;
+					this.$refs.captcha.showCaptcha();
 				}
 				this.bindObj.isDisabled = true;
 				this.bindObj.buttonText = `重新发送（${this.bindObj.timeLeft}S）`;
@@ -179,7 +200,10 @@
 					}
 				}, 1000);
 			},
+			getOpenId(data) {
+				this.bindObj.openId = data
 
+			},
 			// 绑定按钮
 			bindBtn() {
 				if (this.bindObj.telNumber === '') {
@@ -202,89 +226,13 @@
 					if (res.code == 0) {
 						console.log(res.data);
 						toast('手机号绑定成功')
-						cacheManager.set('auth',res.data)
-						this.$emit('bindBtn',res.data)
-					//	this.telClose();
-				
-					}
-				})
-			},
-		}
-	}
-</script>
+						cacheManager.set('auth', res.data)
+						this.$emit('bindBtn', res.data)
+						//	this.telClose();
 
-<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>