验证码第一版

common/styles/global/pages.scss

@@ -102,6 +102,17 @@
 		.agree-sections-content{margin-top: var(--status-bar-height);}
 	}
 }
+
+// 滑块校验弹窗
+.slider-check-dialog{
+	width: 600rpx;height: 300rpx;background-color: #fff;border-radius: 8px;
+	padding: 20rpx;box-sizing: border-box;text-align: center;font-size: 30rpx;
+	#yzm-slider{
+		margin: 32rpx 0 46rpx;position: unset;
+		// #nc_1_wrapper{width: 100%;}
+		}
+}
+
 // 选择年级和学期
 .grades-terms-page{
 	width:100%;height:100vh; 

pages/login/index.vue

@@ -10,7 +10,6 @@
 						maxlength="11" @input="clearTelInput" />
 						<view class="close-btn" v-if="indexData.clearTelIcon" @click="clearTel"></view>
 				    </view>
-					<view id="yzm-slider"></view>
 					<!-- 协议勾选框和按钮 -->
 					<view class="agreement-checkbox-box">
 						<checkbox class="agreement-checkbox-input" color="#FFFFFF" :checked="indexData.isAgreed" @change="handleAgreementChange"/>
@@ -38,57 +37,14 @@
 		isAgreed: false,
 		sliderObj:{},
 	})
-	let sliderObj = reactive({
-		sessionId:'',
-		sig:'',
-		token:'',
-	})
-	
 	const agreeDialogRef = ref(null);
 
-	onLoad((options) => {
-		console.log(options,'options66666');
-		getAWSC();
-		indexInit(options);
-	})
+	onLoad((options) => {})
 	
-	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)
-					
-						// 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)
-		            }
-		        });
-		    })
-	}
-
 	const getYzmBtn = () => {
 			
 		uni.navigateTo({
-		//	url: `/pages/login/login?telNum=${data.phoneNumber}&slider=${encodeURIComponent(data.sliderObj)}`,
-				url: `/pages/login/login?telNum=${indexData.phoneNumber}&data=`+JSON.stringify(sliderObj)
+			url: `/pages/login/login?telNum=${indexData.phoneNumber}`
 		})
 	}
 	

pages/login/login.vue

@@ -17,24 +17,16 @@
 				<text class="login-text">客服电话:400-052-2130</text>
 			</view>
 		</view>
-
+		<sliderDialog ref="sliderDialogRef"></sliderDialog>
 	</view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		reactive
-	} from "vue"
-	import {
-		onLoad,
-		onReady
-	} from '@dcloudio/uni-app';
+	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"
+	import {login,sendCode} from "@/api/login.js"
+	import sliderDialog from './sliderDialog.vue'
 	const loginData = reactive({
 		phoneNumber: null,
 		yzmNumber: null,
@@ -45,19 +37,22 @@
 		isDisabled: false, // 按钮是否禁用
 		buttonText: '重新发送', // 按钮文本
 	})
-	const pageData = reactive({
-
-	})
+	const sliderData = reactive({})
+	
+	const sliderDialogRef = ref(null);
 
 	onLoad((options) => {
 		loginInit(options);
 		startCountdown();
 		getYzmBtn();
 	})
+	onReady((options) => {
+		console.log(sliderDialogRef.value,'sliderDialogRef.value');
+		sliderDialogRef.value.sliderShow();
+	})
 
 	const loginInit = (options) => {
 		loginData.phoneNumber = options.telNum;
-		Object.assign(pageData, JSON.parse(options.data))
 	}
 
 	const getYzmBtn = () => {
@@ -65,9 +60,9 @@
 			appkey: "FFFF0N00000000007EC0",
 			phone: "18640920672",
 			scene: "nc_message_h5',",
-			sessionid: pageData.sessionId,
-			sig: pageData.sig,
-			token: pageData.token,
+			sessionid: sliderData.sessionId,
+			sig: sliderData.sig,
+			token: sliderData.token,
 		}
 		sendCode(req).then(res => {
 
@@ -137,7 +132,7 @@
 	
 	const goIndex = () => {
 		uni.navigateTo({
-				url: `/pages/login/index?data=`+JSON.stringify(pageData)
+				url: `/pages/login/index?data=`+JSON.stringify(sliderData)
 		})
 	}
 </script>