|
@@ -1,115 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="ezy-login-page">
|
|
|
- <view class="ezy-login-wrap" >
|
|
|
- <!-- 手机号 -->
|
|
|
- <template v-if="data.loginTel">
|
|
|
- <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="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>
|
|
|
- </template>
|
|
|
- <!-- 验证码 -->
|
|
|
- <template v-if="!data.loginTel">
|
|
|
- <view class="login-body-box">
|
|
|
- <view class="login-title-img"></view>
|
|
|
- <view class="phone-prefix">验证码已发送至:{{data.phoneNumber}}</view>
|
|
|
- <view class="phone-input-box">
|
|
|
- <input class="phone-input" type="text" v-model="data.yzmNumber" placeholder="请输入验证码"
|
|
|
- maxlength="6" :value="data.yzmNumber" @input="clearYzmInput" />
|
|
|
- <view class="close-btn" v-if="data.clearYzmIcon" @click="clearYzm"></view>
|
|
|
- </view>
|
|
|
- <view class="yzm-btn-disabled" @click="loginBtn" :class="data.yzmStatus"></view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
- import {
|
|
|
- ref,
|
|
|
- reactive
|
|
|
- } from "vue"
|
|
|
-
|
|
|
- const data = reactive({
|
|
|
- loginTel: true,
|
|
|
- phoneNumber: null,
|
|
|
- clearTelIcon: false,
|
|
|
- telStatus:'',
|
|
|
- isAgreed: false,
|
|
|
- yzmNumber: null,
|
|
|
- clearYzmIcon: false,
|
|
|
- yzmStatus:'',
|
|
|
- })
|
|
|
-
|
|
|
- /********* 手机号部分 *********/
|
|
|
- const getYzmBtn = () => {
|
|
|
- console.log('123');
|
|
|
- data.loginTel =false;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 手机号校验规则
|
|
|
- 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 loginBtn = () => {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- });
|
|
|
- /* uni.navigateTo({
|
|
|
- url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
|
|
|
- }) */
|
|
|
- }
|
|
|
-
|
|
|
- const clearYzmInput = (event) => {
|
|
|
- if (event.detail.value.length > 0) {
|
|
|
- data.clearYzmIcon = true;
|
|
|
- } else {
|
|
|
- data.clearYzmIcon = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const clearYzm = () => {
|
|
|
- data.yzmNumber = '';
|
|
|
- data.clearYzmIcon = false;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-</script>
|