修改 列表 时间格式化问题

src/login_pages/verification/index.tsx

@@ -10,8 +10,10 @@ import {
 import "./index.scss";
 
 const VerificationPage: React.FC = () => {
-  const [phone, setPhone] = useState("");
-  const [verification_code, setVerificationCode] = useState("");
+  const [phone, setPhone] = useState(""); // 存储纯数字的手机号
+  const [display_phone, setDisplayPhone] = useState(""); // 显示带空格的手机号
+  const [verification_code, setVerificationCode] = useState(""); // 存储纯数字的验证码
+  const [display_code, setDisplayCode] = useState(""); // 显示带空格的验证码
   const [countdown, setCountdown] = useState(0);
   const [can_send_code, setCanSendCode] = useState(true);
   const [is_loading, setIsLoading] = useState(false);
@@ -23,6 +25,62 @@ const VerificationPage: React.FC = () => {
     params: { redirect },
   } = useRouter();
 
+  // 格式化手机号为 3-4-4 格式
+  const formatPhone = (value: string): string => {
+    // 移除所有非数字字符
+    const numbers = value.replace(/\D/g, "");
+
+    // 按 3-4-4 格式添加空格
+    if (numbers.length <= 3) {
+      return numbers;
+    } else if (numbers.length <= 7) {
+      return `${numbers.slice(0, 3)} ${numbers.slice(3)}`;
+    } else {
+      return `${numbers.slice(0, 3)} ${numbers.slice(3, 7)} ${numbers.slice(7, 11)}`;
+    }
+  };
+
+  // 格式化验证码为 3-3 格式
+  const formatCode = (value: string): string => {
+    // 移除所有非数字字符
+    const numbers = value.replace(/\D/g, "");
+
+    // 按 3-3 格式添加空格
+    if (numbers.length <= 3) {
+      return numbers;
+    } else {
+      return `${numbers.slice(0, 3)} ${numbers.slice(3, 6)}`;
+    }
+  };
+
+  // 处理手机号输入
+  const handlePhoneInput = (e) => {
+    const inputValue = e.detail.value;
+    // 移除所有非数字字符
+    const numbers = inputValue.replace(/\D/g, "");
+    // 限制最多11位
+    const limitedNumbers = numbers.slice(0, 11);
+
+    // 保存纯数字版本用于提交
+    setPhone(limitedNumbers);
+    // 保存格式化版本用于显示
+    setDisplayPhone(formatPhone(limitedNumbers));
+  };
+
+  // 处理验证码输入
+  const handleCodeInput = (e) => {
+    const inputValue = e.detail.value;
+    // 移除所有非数字字符
+    const numbers = inputValue.replace(/\D/g, "");
+    // 限制最多6位
+    const limitedNumbers = numbers.slice(0, 6);
+
+    // 保存纯数字版本用于提交
+    setVerificationCode(limitedNumbers);
+    // 保存格式化版本用于显示
+    setDisplayCode(formatCode(limitedNumbers));
+  };
+
   // 计算登录按钮是否应该启用
   const can_login =
     phone.length === 11 && verification_code.length === 6 && !is_loading;
@@ -69,6 +127,7 @@ const VerificationPage: React.FC = () => {
           setCodeInputFocus(true);
           // 清空验证码，让用户重新输入
           setVerificationCode("");
+          setDisplayCode("");
           console.log("设置验证码输入框聚焦");
         }, 500); // 延迟500ms确保Toast显示完成后再聚焦
       } else {
@@ -232,12 +291,12 @@ const VerificationPage: React.FC = () => {
             <View className="input_container">
               <Input
                 className="phone_input"
-                type="number"
+                type="text"
                 placeholder="输入中国内地手机号"
                 placeholderClass="input_placeholder"
-                value={phone}
-                onInput={(e) => setPhone(e.detail.value)}
-                maxlength={11}
+                value={display_phone}
+                onInput={handlePhoneInput}
+                maxlength={13}
               />
               <View className="char_count">
                 <Text
@@ -262,11 +321,11 @@ const VerificationPage: React.FC = () => {
                 placeholderClass="input_placeholder"
                 placeholderStyle="color:#999999;"
                 focus={code_input_focus}
-                value={verification_code}
-                onInput={(e) => setVerificationCode(e.detail.value)}
+                value={display_code}
+                onInput={handleCodeInput}
                 onFocus={() => setCodeInputFocus(true)}
                 onBlur={() => setCodeInputFocus(false)}
-                maxlength={6}
+                maxlength={7}
               />
               <View className="char_count">
                 <Text