|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-login-page">
|
|
|
+ <view class="ezy-login-wrap" >
|
|
|
+ <!-- 手机号 -->
|
|
|
+ <view class="login-body-box">
|
|
|
+ <view class="login-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" :value="data.phoneNumber" @input="clearTelInput" />
|
|
|
+ <view class="close-btn" v-if="data.clearTelIcon" @click="clearTel"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 协议勾选框和按钮 -->
|
|
|
+ <view class="agreement-checkbox-box">
|
|
|
+ <checkbox class="agreement-checkbox" color="#FFFFFF" :checked="data.isAgreed" @change="handleAgreementChange">
|
|
|
+ 我已阅读并同意<view class="agreement-text">《用户协议》</view>和<view class="agreement-text">《隐私政策》</view>
|
|
|
+ </checkbox>
|
|
|
+ </view>
|
|
|
+ <view class="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"
|
|
|
+
|
|
|
+ const data = reactive({
|
|
|
+ phoneNumber: null,
|
|
|
+ clearTelIcon: false,
|
|
|
+ telStatus:'',
|
|
|
+ isAgreed: false,
|
|
|
+ })
|
|
|
+
|
|
|
+ const getYzmBtn = () => {
|
|
|
+ console.log('123');
|
|
|
+ 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.clearTelIcon = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleAgreementChange= () => {
|
|
|
+ console.log(data.isAgreed,'data.isAgreed');
|
|
|
+ if(data.isAgreed){
|
|
|
+ data.isAgreed = !data.isAgreed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|