feat:手机号校验

src/pages/group/index.scss

@@ -0,0 +1,13 @@
+.group{
+    padding: 40px;
+
+    .formCode{
+        display: flex;
+        flex-direction: row;
+        .codeBtn{
+            background-color: aquamarine;
+            // height: 80px;
+            // color: red;
+        }
+    }
+}

src/pages/group/index.tsx

@@ -1,7 +1,8 @@
+// @ts-nocheck
 import { Component } from "react";
 import { View, Text, Image } from "@tarojs/components";
 import "./index.scss";
-import { AtTabBar } from "taro-ui";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
 import { AtGrid } from "taro-ui";
 import { Swiper, SwiperItem } from "@tarojs/components";
@@ -11,11 +12,16 @@ import Taro from "@tarojs/taro";
 import { AtAvatar } from "taro-ui";
 import { AtTag } from "taro-ui";
 import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
 
 // export default class Index extends Component {
 const Group = () => {
   const [current, setcurrent] = useState(2);
   const [wxid, setwxid] = useState(null);
+  const [phoneNum, setphoneNum] = useState(null);
+  const [vCode, setvCode] = useState(null);
+  const [waitTime, setWaitTime] = useState(0); // 等待秒数
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用
 
   useEffect(() => {}, []);
 
@@ -26,7 +32,99 @@ const Group = () => {
     });
   };
 
-  return <View className="group">qqq</View>;
+  const startTimer = () => {
+    setIsButtonDisabled(true);
+    let localWaitTime = 60; // 使用局部变量
+
+    // 更新状态的函数
+    const updateTime = () => {
+      if (localWaitTime <= 0) {
+        clearInterval(timer);
+        setIsButtonDisabled(false);
+        setWaitTime(0);
+      } else {
+        setWaitTime(localWaitTime);
+        localWaitTime -= 1;
+      }
+    };
+
+    // 设定计时器
+    const timer = setInterval(updateTime, 1000);
+    // 初始调用
+    updateTime();
+  };
+
+  const validatePhoneNumber=(phoneNum) =>{
+    // 检查是否为11位数字
+    const phoneRegex = /^[0-9]{11}$/;
+    return phoneRegex.test(phoneNum);
+  }
+
+
+  return (
+    <View className="group">
+      <AtForm
+        onSubmit={(event) => {
+          console.log("onSubmit-event--", event[0]?.detail?.value);
+        }}
+        onReset={(event) => {
+          // 重置数据
+        }}
+      >
+        <AtInput
+          name="phoneNum"
+          border={false}
+          title="手机号"
+          type="phone"
+          placeholder="请输入"
+          value={phoneNum}
+          disabled={isButtonDisabled}
+          onChange={(value) => {
+            console.log("value", value);
+            setphoneNum(value);
+          }}
+        />
+        <View className="formCode">
+          <AtInput
+            name="vCode"
+            title="验证码"
+            type="number"
+            placeholder="请输入4位数字"
+            
+            value={vCode}
+            onChange={(value) => {
+              setvCode(value);
+            }}
+          />
+          <AtButton
+            className="codeBtn"
+            onClick={() => {
+              if (!!phoneNum & !!validatePhoneNumber(phoneNum)) {
+                // 提交手机数据
+                setIsButtonDisabled(true);
+                startTimer(); // 开始防抖计时
+              } else {
+                Taro.atMessage({
+                  message: "请检查手机号",
+                  type: `warning`,
+                });
+              }
+            }}
+            // type="primary"
+            disabled={isButtonDisabled}
+          >
+            {isButtonDisabled ? `${waitTime} 秒` : "获取"}
+          </AtButton>
+        </View>
+
+        <AtButton formType="submit" type="primary">
+          {"提交"}
+        </AtButton>
+      </AtForm>
+
+      <AtMessage />
+    </View>
+  );
 };
 
 export default Group;