uniProject/pages/login/index.vue

<template>
  <view class="ezy-login-page">
	  <view class="ezy-login-wrap" >
			<!-- 手机号 -->
				<view class="login-body-box">
					<view class="index-title-img"></view>
				    <view class="phone-input-box">
						<view class="phone-prefix">+86</view>
						<input class="phone-input" type="text" v-model="data.phoneNumber" placeholder="请输入手机号" 
						maxlength="11" @input="clearTelInput" />
						<view class="close-btn" v-if="data.clearTelIcon" @click="clearTel"></view>
				    </view>
					<view id="yzm-slider"></view>
					<!-- 协议勾选框和按钮 -->
					<view class="agreement-checkbox-box">
						<checkbox class="agreement-checkbox-input" color="#FFFFFF" :checked="data.isAgreed" @change="handleAgreementChange"/>
						<view class="agreement-text-box">
						  我已阅读并同意<view class="agreement-text">《用户协议》</view>和<view class="agreement-text">《隐私政策》</view>
						</view>
					</view>
					<view class="login-btn yzm-btn-disabled" @click="getYzmBtn" :class="data.telStatus"></view>
				</view>
				<view class="wx-btn-img"></view>
		</view>
		  
  </view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import { onLoad,onReady } from '@dcloudio/uni-app';
	
	const data = reactive({
		phoneNumber: null,
		clearTelIcon: false,
		telStatus:'',
		isAgreed: false,
	})
	
	onLoad((options) => {
			getAWSC();
	})
	
	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 (data) {
		                window.console && console.log(data.sessionId)
		                window.console && console.log(data.sig)
		                window.console && console.log(data.token)
		            },
		            // 滑动验证失败时触发该回调参数。
		            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}`
		})
	}
	
	// 手机号校验规则
	const validatePhoneNumber = (value) => {
	  const phoneRegex = /^1[3-9]\d{9}$/;
	  if (phoneRegex.test(value)) {
		console.log('手机号格式正确');
		data.telStatus = 'yzm-btn-normal';
	  } else {
	    console.log('手机号格式不正确');
	  }
	}
	
	const clearTelInput = (event) => {
	    if (event.detail.value.length > 0) {
	        data.clearTelIcon = true;
			validatePhoneNumber(event.detail.value);
	    } else {
	        data.clearTelIcon = false;
	    }
	}
			
	const clearTel = () => {
		data.phoneNumber = '';
		data.telStatus = 'yzm-btn-disabled';
		data.clearTelIcon = false;
	}
	
	const handleAgreementChange= () => {
		console.log(data.isAgreed,'data.isAgreed');
		if(data.isAgreed){
			data.isAgreed = !data.isAgreed;
		}
	}
</script>