1

pages/login/login.vue

@@ -1,13 +1,14 @@
 <template>
 	<view class="ezy-login-page">
-
+	
 		<view class="ezy-login-wrap">
 			<view class="login-body-box">
 				<view class="login-title-img"></view>
-				<view class="yzm-show">验证码已发送至：{{loginData.phoneNumber}}</view>
+				<view class="yzm-show">验证码已发送至：{{loginData.phoneNumber}}</view>
+
 				<view class="phone-input-box">
-					<input class="phone-input" type="text" v-model="loginData.yzmNumber" placeholder="请输入验证码" maxlength="6"
-						@input="clearYzmInput" />
+					<input class="phone-input" type="text" v-model="loginData.yzmNumber" placeholder="请输入验证码"
+						maxlength="6" @input="clearYzmInput" />
 					<view class="close-btn" v-if="loginData.clearYzmIcon" @click="clearYzm"></view>
 				</view>
 				<view class="login-btn login-btn-disabled" @click="loginBtn" :class="loginData.yzmStatus"></view>
@@ -17,121 +18,136 @@
 				<text class="login-text">客服电话:400-052-2130</text>
 			</view>
 		</view>
-		<sliderDialog ref="sliderDialogRef"></sliderDialog>
+		<sliderDialog ref="sliderDialogRef" @emitFun="emitFun"></sliderDialog>
 	</view>
 </template>
 
-<script setup>
-	import {ref,reactive} from "vue"
-	import {onLoad,onReady} from '@dcloudio/uni-app';
-	import request from "@/utils/request.js"
-	import {login,sendCode} from "@/api/login.js"
+<script>
+	import {
+		ref,
+		reactive
+	} from "vue"
+	import {
+		login,
+		sendCode
+	} from "@/api/login.js"
 	import sliderDialog from './sliderDialog.vue'
-	const loginData = reactive({
-		phoneNumber: null,
-		yzmNumber: null,
-		clearYzmIcon: false,
-		yzmStatus: '',
-		timeLeft: 60, // 初始倒计时时间（秒）
-		intervalId: null, // 定时器ID
-		isDisabled: false, // 按钮是否禁用
-		buttonText: '重新发送', // 按钮文本
-	})
-	const sliderData = reactive({})
-	
-	const sliderDialogRef = ref(null);
-
-	onLoad((options) => {
-		loginInit(options);
-		startCountdown();
-		getYzmBtn();
-	})
-	onReady((options) => {
-		console.log(sliderDialogRef.value,'sliderDialogRef.value');
-		sliderDialogRef.value.sliderShow();
-	})
+	export default {
+		data() {
+			return {
+				loginData: {
+					phoneNumber: null,
+					yzmNumber: null,
+					clearYzmIcon: false,
+					yzmStatus: '',
+					timeLeft: 60, // 初始倒计时时间（秒）
+					intervalId: null, // 定时器ID
+					isDisabled: false, // 按钮是否禁用
+					buttonText: '重新发送', // 按钮文本
+				},
+				sliderData: {},
+				sliderDialogRef: null,
 
-	const loginInit = (options) => {
-		loginData.phoneNumber = options.telNum;
-	}
+			}
+		},   
+		components: {
+			sliderDialog
+        },
+		onLoad(options) {
+			this.loginInit(options);
+			this.startCountdown();
+			this.getYzmBtn();
+		},
+		onReady() {
+			// console.log(sliderDialogRef.value,'sliderDialogRef.value');
+		//	this.$refs.sliderDialogRef.sliderShow();
+		},
+		methods: {
+			emitFun(data){
+				console.log(111111)
+				console.log(data)
+			},
+			// receiveRenderData(data) {
+			// 	console.log("获得接受")
+			// 	console.log(data)
+			// },
+			loginInit(options) {
+				this.loginData.phoneNumber = options.telNum;
+			},
+			getYzmBtn() {
+				let req = {
+					appkey: "FFFF0N00000000007EC0",
+					phone: "18640920672",
+					scene: "nc_message_h5',",
+					sessionid: this.sliderData.sessionId,
+					sig: this.sliderData.sig,
+					token: this.sliderData.token,
+				}
+				sendCode(req).then(res => {
 
-	const getYzmBtn = () => {
-		let req = {
-			appkey: "FFFF0N00000000007EC0",
-			phone: "18640920672",
-			scene: "nc_message_h5',",
-			sessionid: sliderData.sessionId,
-			sig: sliderData.sig,
-			token: sliderData.token,
-		}
-		sendCode(req).then(res => {
+				})
+			},
+			loginBtn() {
+				let req = {
+					tel: "1",
+					code: '1'
+				}
+				login(req).then(res => {
+					if (res.code == 0) {
+						let obj = JSON.stringify(res.data)
+						console.log(obj)
+						uni.setStorage({
+							key: 'Mta-Auth',
+							data: obj // 假设 this.userInputValue 是用户输入的数据
+						});
+						uni.navigateTo({
+							url: `/pages/study/index?gradeId=${obj.orgId}&termId=${obj.userId}&text='测试111'`
+						})
+					}
+				})
+			},
+			clearYzmInput(event) {
+				if (event.detail.value.length > 0) {
+					this.loginData.clearYzmIcon = true;
+				} else {
+					this.loginData.clearYzmIcon = false;
+				}
+			},
+			clearYzm() {
+				this.loginData.yzmNumber = '';
+				this.loginData.clearYzmIcon = false;
+			},
+			startCountdown() {
+				this.loginData.isDisabled = true;
+				this.loginData.buttonText = `重新发送（${this.loginData.timeLeft}S）`;
 
-		})
-	}
+				// 清除之前的定时器（如果有）
+				if (this.loginData.intervalId) {
+					clearInterval(this.loginData.intervalId);
+				}
 
-	const loginBtn = () => {
-		let req = {
-			tel: "1",
-			code: '1'
-		}
-		login(req).then(res => {
-			if (res.code == 0) {
-				let obj = JSON.stringify(res.data)
-				console.log(obj)
-				uni.setStorage({
-					key: 'Mta-Auth',
-					data: obj // 假设 this.userInputValue 是用户输入的数据
-				});
-				uni.navigateTo({
-				url: `/pages/study/index?gradeId=${obj.orgId}&termId=${obj.userId}&text='测试111'`
+				// 设置新的定时器
+				this.loginData.intervalId = setInterval(() => {
+					this.loginData.timeLeft--;
+					if (this.loginData.timeLeft <= 0) {
+						clearInterval(loginData.intervalId);
+						this.loginData.timeLeft = 60; // 重置倒计时
+						this.loginData.isDisabled = false;
+						this.loginData.buttonText = '重新发送';
+					} else {
+						this.loginData.buttonText = `重新发送（${this.loginData.timeLeft}S）`;
+					}
+				}, 1000);
+			},
+			goIndex() {
+				uni.navigateTo({
+					url: `/pages/login/index?data=` + JSON.stringify(this.sliderData)
 				})
 			}
-		})
 
-		// uni.navigateTo({
-		// 	url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
-		// })
-	}
-
-	const clearYzmInput = (event) => {
-		if (event.detail.value.length > 0) {
-			loginData.clearYzmIcon = true;
-		} else {
-			loginData.clearYzmIcon = false;
-		}
-	}
-
-	const clearYzm = () => {
-		loginData.yzmNumber = '';
-		loginData.clearYzmIcon = false;
-	}
-
-	const startCountdown = () => {
-		loginData.isDisabled = true;
-		loginData.buttonText = `重新发送（${loginData.timeLeft}S）`;
-
-		// 清除之前的定时器（如果有）
-		if (loginData.intervalId) {
-			clearInterval(loginData.intervalId);
-		}
-
-		// 设置新的定时器
-		loginData.intervalId = setInterval(() => {
-			loginData.timeLeft--;
-			if (loginData.timeLeft <= 0) {
-				clearInterval(loginData.intervalId);
-				loginData.timeLeft = 60; // 重置倒计时
-				loginData.isDisabled = false;
-				loginData.buttonText = '重新发送';
-			} else {
-				loginData.buttonText = `重新发送（${loginData.timeLeft}S）`;
-			}
-		}, 1000);
-	}
-	
-	const goIndex = () => {
-		uni.navigateTo({
-				url: `/pages/login/index?data=`+JSON.stringify(sliderData)
-		})
+		},
+		mounted() {
+		//	this.$refs.sliderDialogRef.sliderShow();
+		},
 	}
-</script>
+</script>

pages/login/sliderDialog.vue

@@ -1,70 +1,123 @@
-<template>
-	<uni-popup ref="sliderPopup" :animation="false" :is-mask-click="false"
-	  mask-background-color="rgba(255, 255, 255, 0.6);">
-	  <view class="slider-check-dialog">
-		  <view class="slider-check-content">
-			<text>请通过滑块验证</text>
-			<view id="yzm-slider"></view>
-			<view @click="sliderClose">关闭</view>
-		  </view>
-	  </view>
-	</uni-popup>
-</template>
-
-<script setup>
-	import {ref,reactive} from "vue"
-	const sliderPopup = ref(null); // 索引
-	let sliderObj = reactive({
-		sessionId:'',
-		sig:'',
-		token:'',
-	})
-	
-	const getAWSC = () => {
-		AWSC.use("nc", function (state, module) {
-		                // 初始化
-		    window.nc = module.init({
-		            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
-		            appkey: "FFFF0N00000000007EC0",
-		            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
-		            scene: "nc_message_h5",
-		            // 声明滑动验证需要渲染的目标ID。
-		            renderTo: "yzm-slider",
-		            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
-		            success: function (item) {
-						console.log(item,'item')
-					
-						// sliderObj.sessionId = item.sessionId
-						// sliderObj.sig = item.sig
-						// sliderObj.token = item.token
-						// Object.assign(sliderObj,item)
-						// console.log(sliderObj)
-		            },
-		            // 滑动验证失败时触发该回调参数。
-		            fail: function (failCode) {
-		                window.console && console.log('失败：'+failCode)
-		            },
-		            // 验证码加载出现异常时触发该回调参数。
-		            error: function (errorCode) {
-		                window.console && console.log('异常：'+ errorCode)
-		            }
-		        });
-		    })
-	}
-	
-	// 打开弹窗
-	function sliderShow() {
-		getAWSC();
-		sliderPopup.value.open();
+<template>
+	<view class="">
+	
+		<!-- <uni-popup ref="sliderPopup" :animation="false" :is-mask-click="false"
+		  mask-background-color="rgba(255, 255, 255, 0.6);">
+		  <view class="slider-check-dialog">
+			  <view class="slider-check-content">
+				<text>请通过滑块验证</text>
+				<view id="yzm-slider"></view>
+				<view @click="sliderClose">关闭</view>
+			  </view>
+		  </view>
+		</uni-popup> -->
+	
+			<view style="margin-top: 200px;" id="yzm-slider"></view>
+			<view style="margin-top: 100px;" @click="AWSC.emitData">关闭1111</view>
+	</view>
+</template>
+<script>
+	export default {
+		mounted() {
+
+		},
+		data() {
+			return {
+				sliderObj: {
+					sessionId: '',
+					sig: '',
+					token: '',
+				}
+			}
+		},
+		methods: {
+			receiveRenderData(data) {
+				console.log("获得接受")
+				console.log(data)
+				this.$emit('emitFun', data)
+				
+				// this.$emit('success');
+			//	this.sliderClose()
+			},
+			sliderShow() {
+				this.$refs.sliderPopup.open()
+			},
+			sliderClose() {
+				this.$refs.sliderPopup.close()
+			}
+		}
 	}
-	// 关闭弹窗
-	function sliderClose() {
-		sliderPopup.value.close();
-	}
-	defineExpose({
-		sliderShow
-	})
 </script>
 
-<style>
-</style>
+<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: '',
+			}
+		},
+		methods: {
+			init() {
+					let that  =this
+				AWSC.use("nc", function(state, module) {
+					nc = module.init({
+						// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+						appkey: "FFFF0N00000000007EC0",
+						//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
+						scene: "nc_message_h5",
+						// 声明滑动验证需要渲染的目标ID。
+						renderTo: "yzm-slider",
+						//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+						success: function(data) {
+						
+							window.console && console.log(data.sessionId, "111")
+							window.console && console.log(data.sig, "222")
+							window.console && console.log(data.token, "3333")
+							
+							that.getData(data)
+						
+						},
+						// 滑动验证失败时触发该回调参数。
+						fail: function(failCode) {
+							console.log('失败：' + failCode)
+						},
+						// 验证码加载出现异常时触发该回调参数。
+						error: function(errorCode) {
+							console.log('异常：' + errorCode)
+						}
+					});
+				})
+			},
+			getData(data){
+					console.log(data)
+					this.sessionId  =data.sessionId
+					this.sig  =data.sig
+					this.token  =data.token
+			},
+			emitData(e, ownerInstance) {
+				console.log(ownerInstance)
+				console.log(this.sessionId)
+				console.log(this)
+				
+				
+				
+				ownerInstance.callMethod('receiveRenderData', {
+					sessionId: this.sessionId,
+					sig: this.sig,
+					token: this.token
+				})
+			}
+
+		}
+	}
+</script>