细节优化

src/user_pages/validPhone/index.scss

@@ -1,7 +1,9 @@
 .set-transaction-password-page {
-    min-height: 100vh;
     background-color: #f5f5f5;
     padding: 20px;
+    box-sizing: border-box;
+    height: 100vh;
+    overflow-y: hidden;
 
     .form-item {
         height: 50px;
@@ -18,6 +20,7 @@
     }
 
     .btn {
+        width: 78px;
         height: 24px;
         border: 1px solid rgba(0, 0, 0, 0.06);
         display: flex;
@@ -34,6 +37,10 @@
         line-height: normal;
         border-radius: 8px;
         margin-right: 0;
+
+        &.disabled {
+            color: rgba(255, 255, 255, 0.30);
+        }
     }
 
     .bottom-btn {
@@ -45,9 +52,5 @@
         border-radius: 16px;
         font-size: 16px;
         font-weight: 600;
-
-        &.disabled {
-            color: rgba(255, 255, 255, 0.30);
-        }
     }
 }

src/user_pages/validPhone/index.tsx

@@ -15,6 +15,8 @@ interface FormFields {
 const ValidPhone: React.FC = () => {
   // 使用全局键盘状态
   const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const [smsCodeSended, setSmsCodeSended] = useState(false);
+  const [smsCodeText, setSmsCodeText] = useState('获取验证码');
   // 使用全局键盘状态监听
   useEffect(() => {
     // 初始化全局键盘监听器
@@ -69,6 +71,19 @@ const ValidPhone: React.FC = () => {
     try {
       await httpService.post("/wallet/send_reset_password_sms", { phone });
       Taro.showToast({ title: "验证码已发送", icon: "none" });
+      let time = 60;
+      setSmsCodeText(`${time}秒后重发`);
+      const timer = setInterval(() => {
+        if (time > 0) {
+          time--;
+          setSmsCodeText(`${time}秒后重发`);
+        } else {
+          setSmsCodeText('获取验证码');
+          setSmsCodeSended(false);
+          clearInterval(timer);
+        }
+      }, 1000);
+      setSmsCodeSended(true);
     } catch (error) {
       console.log(error);
       Taro.showToast({ title: "获取验证码失败", icon: "none" });
@@ -84,7 +99,7 @@ const ValidPhone: React.FC = () => {
       <View className="form-item">
         <Text className="form-label">验证码</Text>
         <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
-        <Button className="btn" onClick={getSMSCode}>获取验证码</Button>
+        <Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
       </View>
       <Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
     </View>