细节优化

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>