1

pages/login/login.vue

@@ -76,7 +76,8 @@
 
 			},
 			captchaError(e) {
-				// app端的回调
+				// app端的回调、
+				console.log('error',JSON.stringify(e));
 				toast(JSON.stringify(e))
 			},
 			captchaReady() {

pages/my/telDialog.vue

@@ -9,9 +9,15 @@
 						@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>
@@ -27,7 +33,8 @@
 	</view>
 </template>
 <script>
-	import cacheManager from '@/utils/cacheManager.js';
+	import cacheManager from '@/utils/cacheManager.js';
+	import captcha from "../../components/captcha4/index.vue";
 	import {
 		telBind,
 		sendCode
@@ -56,27 +63,19 @@
 					isDisabled: true, // 按钮是否禁用
 					buttonText: '获取验证码', // 按钮文本
 					getYzmFlag: false, // 是否发送验证码
+				},
+				config: {
+					captchaId: "16e4de331cee10dfe36bcf55810c6041",
 				},
 			}
+		},
+		components: {
+			captcha
 		},
 		methods: {
-			receiveRenderData(data) {
-				this.sliderObj = data;
-				this.getYzmBtn();
-			},
-			
-			showToast(){
-				toast("请先完成滑块验证！")
-			},
-			
-			telClose(AWSC) {
-				AWSC.getReset();
+			telClose() {
 				this.$emit('telClose')
 			},
-			
-			telReset(){
-				this.myflag++;
-			},
 
 			// 清空手机号
 			clearTel() {
@@ -110,28 +109,49 @@
 			// 获取验证码按钮
 			getYzmBtn() {
 				// 判断手机号校验是否通过
-				if (this.bindObj.timeLeft !=60) {
-					toast('请在'+this.bindObj.timeLeft +'后重新获取验证码！')
+				if (this.bindObj.timeLeft != 60) {
+					toast('请在' + this.bindObj.timeLeft + '后重新获取验证码！')
 					return
-				}else if(this.bindObj.isDisabled === true) {
+				} else if (this.bindObj.isDisabled === true) {
 					toast("请输入正确的手机号！")
 					return
-				}else{
-					this.startCountdown();
-					this.getMessage();
-					this.telReset();
-					this.sliderObj = {};
+				} else {
+				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,
+				phone: this.bindObj.telNumber,
+				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;
@@ -203,7 +223,6 @@
 					if (res.code == 0) {
 						toast('手机号绑定成功')
 						this.updataTel(this.bindObj.telNumber);
-						this.telReset();
 						this.$emit('bindBtn')
 					}
 				})
@@ -217,77 +236,4 @@
 			}
 		}
 	}
-</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>