uniProject/pages/login/sliderDialog.vue

<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();
	}
	// 关闭弹窗
	function sliderClose() {
		sliderPopup.value.close();
	}
	defineExpose({
		sliderShow
	})
</script>

<style>
</style>