flat: 对接爱山东登录

src/pages/User/Login/index.tsx

@@ -1,6 +1,6 @@
 import Footer from '@/components/Footer';
 import { getCaptchaImg, login } from '@/services/system/auth';
-import { getFakeCaptcha } from '@/services/ant-design-pro/login';
+import { getFakeCaptcha, sancGenerateQrcode, sancAuthCheck } from '@/services/ant-design-pro/login';
 import {
   AlipayCircleOutlined,
   LockOutlined,
@@ -25,7 +25,9 @@ import { flushSync } from 'react-dom';
 import { clearSessionToken, setSessionToken } from '@/access';
 import logoImg from '@/assets/logo.svg';
 import login_imge2b033b1 from '@/assets/login_img.e2b033b1.png';
+import { use } from 'echarts';
 
+let timer: any = null;
 const ActionIcons = () => {
   const langClassName = useEmotionCss(({ token }) => {
     return {
@@ -93,7 +95,9 @@ const Login: React.FC = () => {
   const { initialState, setInitialState } = useModel('@@initialState');
   const [captchaCode, setCaptchaCode] = useState<string>('');
   const [uuid, setUuid] = useState<string>('');
-  const [qrcodeVal, setQrcodeVal] = useState<string>('7655212');
+  const [qrcodeVal, setQrcodeVal] = useState<string>('');
+  const [qrcodeTime, setQrcodeTime] = useState<string>('');
+  const [qrcodeStatus, setQrcodeStatus] = useState<string>('loading');
 
   const containerClassName = useEmotionCss(() => {
     return {
@@ -155,15 +159,81 @@ const Login: React.FC = () => {
         getCaptchaCode();
       }
     } catch (error) {
-      // message.error(response.msg);
       const defaultLoginFailureMessage = intl.formatMessage({
         id: 'pages.login.failure',
         defaultMessage: '登录失败，请重试！',
       });
-      // console.log(error);
       message.error(defaultLoginFailureMessage);
     }
   };
+
+  const generateQrcode = async () => {
+    setQrcodeStatus('loading');
+    const response = await sancGenerateQrcode();
+    if (response.code === 200) {
+      const { qrCode, validDate } = response.data;
+      setQrcodeStatus('active');
+      setQrcodeVal(qrCode);
+      setQrcodeTime(validDate);
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = setInterval(() => {
+        const timeDiff = getTimeDiff(validDate);
+        if (timeDiff > 0) {
+          clearInterval(timer);
+          setQrcodeStatus('expired');
+          return;
+        }
+        checkQrcode(qrCode as string);
+      }, 2000);
+    }
+  };
+
+  const checkQrcode = async (text: string) => {
+    const response = await sancAuthCheck(text);
+    if (response.code === 200) {
+      const { authStatus } = response.data;
+      switch (authStatus) {
+        case 'success':
+          setQrcodeStatus('scanned');
+          message.success('扫码成功');
+          const defaultLoginSuccessMessage = intl.formatMessage({
+            id: 'pages.login.success',
+            defaultMessage: '登录成功！',
+          });
+          const current = new Date();
+          const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
+          setSessionToken(response.data?.token, response.data?.token, expireTime);
+          message.success(defaultLoginSuccessMessage);
+          await fetchUserInfo();
+          const urlParams = new URL(window.location.href).searchParams;
+          history.push(urlParams.get('redirect') || '/');
+          setTimeout(() => history.go(0), 0);
+          break;
+        case 'failed':
+          setQrcodeStatus('expired');
+          message.error(response.data.errCode + '：' + response.data.errMsg);
+          break;
+        case 'pending':
+          break;
+      }
+    } else {
+      clearInterval(timer);
+      setQrcodeStatus('expired');
+    }
+  };
+
+  function getTimeDiff(validTimeStr: string): number {
+    const now = new Date();
+    const [h, m, s] = validTimeStr.split(':').map(Number);
+
+    const target = new Date();
+    target.setHours(h, m, s, 0);
+
+    return now.getTime() - target.getTime();
+  }
+
   const { code } = userLoginState;
   const loginType = type;
 
@@ -215,7 +285,15 @@ const Login: React.FC = () => {
         >
           <Tabs
             activeKey={type}
-            onChange={setType}
+            onChange={(type) => {
+              setType(type);
+              if (timer) {
+                clearInterval(timer);
+              }
+              if (type === 'scanQode') {
+                generateQrcode();
+              }
+            }}
             centered
             items={[
               {
@@ -256,7 +334,9 @@ const Login: React.FC = () => {
                     errorLevel="H"
                     size={300}
                     iconSize={300 / 5}
-                    value="https://ant.design/"
+                    status={qrcodeStatus}
+                    onRefresh={() => generateQrcode()}
+                    value={qrcodeVal}
                     icon={login_imge2b033b1}
                   />
                 </Col>