倒计时

src/views/account/dialog/qrcode.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import http from '@src/http';
 import { Modal, Image, message } from "antd";
 import { qwGetQrCode } from '@src/http/api';
@@ -27,6 +27,8 @@ const QrCodeModal: React.FC<QrCodeModalProps> = ({
 }) => {
   const [loading, setLoading] = useState(false);
   const [qrCodeData, setQrCodeData] = useState<QrCodeData | null>(null);
+  const [countdown, setCountdown] = useState<number>(0);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
 
   // 获取二维码
   const fetchQrCode = async () => {
@@ -37,6 +39,8 @@ const QrCodeModal: React.FC<QrCodeModalProps> = ({
 
       if (res.success) {
         setQrCodeData(res.data);
+        // 设置倒计时初始值
+        setCountdown(res.data.ttl);
         // 如果有成功回调，则调用
         if (onSuccess) {
           onSuccess(res.data);
@@ -51,13 +55,45 @@ const QrCodeModal: React.FC<QrCodeModalProps> = ({
     }
   };
 
+  // 启动倒计时
+  useEffect(() => {
+    if (countdown > 0) {
+      timerRef.current = setInterval(() => {
+        setCountdown(prev => {
+          if (prev <= 1) {
+            // 倒计时结束，清除定时器
+            if (timerRef.current) {
+              clearInterval(timerRef.current);
+              timerRef.current = null;
+            }
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+
+    return () => {
+      // 组件卸载或依赖项变化时清除定时器
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [countdown]);
+
   // 当弹窗显示时获取二维码
-  React.useEffect(() => {
+  useEffect(() => {
     if (visible) {
       fetchQrCode();
     } else {
-      // 关闭弹窗时清空数据
+      // 关闭弹窗时清空数据和定时器
       setQrCodeData(null);
+      setCountdown(0);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
     }
   }, [visible, vid]);
 
@@ -84,7 +120,12 @@ const QrCodeModal: React.FC<QrCodeModalProps> = ({
             loading={loading ? 'lazy' : undefined}
           />
           <p className="mt-4 text-center">请使用企业微信扫描二维码</p>
-          <p className="text-center text-gray-500">二维码有效期 {qrCodeData.ttl} 秒</p>
+          <p className="text-center text-gray-500">
+            二维码有效期 {countdown} 秒
+            {countdown === 0 && (
+              <span className="text-red-500 ml-2">(已过期，请关闭后重试)</span>
+            )}
+          </p>
         </div>
       )}
     </Modal>