pref: 验证码添加失效状态 和 切换标签页自动更新

src/pages/user/login/components/Login/LoginItem.js

 import 'kit_logger';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { FieldNumberOutlined, ReloadOutlined } from '@ant-design/icons';
 import { Button, Form, Input, message } from 'antd';
 import omit from 'omit.js';
@@ -9,10 +9,10 @@ import { useIntl } from '@wisdom-utils/components';
 
 import classNames from 'classnames';
 import { appService } from '@/api';
+import invalidIcon from '@/assets/images/login/已失效.png';
 import styles from './index.less';
 import LoginContext from './LoginContext';
 import ItemMap from './map';
-
 // import i18n from '../../../../../utils/share';
 // const pages = i18n.getI18n('pages');
 const FormItem = Form.Item;
@@ -33,18 +33,15 @@ const getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules })
 
 const ValidateCode = props => {
   const [count, setCount] = useState(0);
+  const [isOver, setIsOver] = useState(false);
+  const timer = useRef(null);
   const codeUrl = window?.globalConfig?.hasGateWay
     ? '/PandaCore/Identity/GetVerificationCode'
     : '/PandaCore/GCK/BussinessAuth/GetVerificationCode';
-
-  useEffect(() => {
-    // eslint-disable-next-line no-use-before-define
-    window.share.event.on('loginError', handError);
-    return () => {
-      // eslint-disable-next-line no-use-before-define
-      window.share.event.removeListener('loginError', handError);
-    };
-  }, []);
+  const onTimeOver = () => {
+    console.log('超时了');
+    setIsOver(true);
+  };
 
   const handError = () => {
     setCount(Date.now());
@@ -52,12 +49,48 @@ const ValidateCode = props => {
 
   const handeRefresh = () => {
     setCount(Date.now());
+    setTimeout(() => {
+      setIsOver(false);
+    }, 100);
   };
 
   const handChange = value => {
     props?.onChange?.(value);
   };
+  const visibilityChange = () => {
+    console.log('页面变化了');
+    handeRefresh();
+  };
 
+  useEffect(() => {
+    // eslint-disable-next-line no-use-before-define
+    window.share.event.on('loginError', handError);
+    document.onvisibilitychange = () => {
+      if (!document.hidden) visibilityChange();
+    };
+    return () => {
+      // eslint-disable-next-line no-use-before-define
+      window.share.event.removeListener('loginError', handError);
+    };
+  }, []);
+  useEffect(() => {
+    if (!isOver) {
+      console.log('开始计时');
+      if (timer.current) {
+        clearInterval(timer.current);
+        timer.current = null;
+      }
+      timer.current = setTimeout(() => {
+        onTimeOver();
+      }, 60 * 1000);
+    }
+    return () => {
+      if (timer.current) {
+        clearInterval(timer.current);
+        timer.current = null;
+      }
+    };
+  }, [isOver]);
   return (
     <div className={styles.validate_view}>
       <Input
@@ -69,7 +102,14 @@ const ValidateCode = props => {
         onChange={handChange}
       />
       <div className={classNames(styles.validate_img, 'validate_img')}>
-        <img src={`${codeUrl}?time=${count}`} alt="" />
+        {isOver ? (
+          <>
+            <img className={styles.validate_invalid} src={invalidIcon} height={35} alt="" />
+          </>
+        ) : (
+          <img src={`${codeUrl}?time=${count}`} alt="" />
+        )}
+
         <div className={styles.validate_refresh} onClick={handeRefresh}>
           <ReloadOutlined />
         </div>

src/pages/user/login/components/Login/index.less

 @root-entry-name: 'variable';
 @import (reference) '~antd/es/style/themes/index';
+
 .login {
   width: 250px;
+
   :global {
     .ant-tabs .ant-tabs-bar {
       margin-bottom: 24px;
       text-align: center;
       border-bottom: 0;
     }
+
     .ant-form-item {
       margin-bottom: 19px;
+
       // &-has-error {
       //   margin-bottom: 0px!important;
       // }
@@ -21,11 +25,13 @@
         min-height: 19px;
         font-size: 13px;
       }
+
       &-with-help {
         margin-bottom: 0;
       }
     }
   }
+
   .getCaptcha {
     color: @primary-6;
     font-weight: 400;
@@ -36,6 +42,7 @@
     height: auto !important;
     border: none !important;
   }
+
   .desc {
     width: 88px;
     font-size: 20px;
@@ -100,12 +107,24 @@
         }
       }
 
+
+
       img {
         width: 100%;
         height: 100%;
         object-fit: contain;
       }
 
+      .validate_invalid {
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+        line-height: 40px;
+        // color: #d81e06;
+        height: 30px;
+        margin-top: 5px;
+      }
+
       .validate_refresh {
         width: 100%;
         height: 100%;
@@ -122,4 +141,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

src/pages/user/login/template/project/suzhou/index.js

@@ -24,6 +24,12 @@ import logo from './images/logo.png';
 import qrcodePng from './images/1.png';
 import loginTitlePng from './images/text.png';
 import Krpano from '../../../components/Krpano';
+// 背景图在这里引入一次，避免打包时丢失
+import 背景 from './images/背景.png';
+import left from './images/left.png';
+import 标题 from './images/标题.png';
+import 登录btn from './images/登录btn.png';
+import 展开bg from './images/展开bg.png';
 
 const PopOvercontent = () => {
   const qrcodes = window.globalConfig && window.globalConfig.qrcode;
@@ -43,7 +49,7 @@ const Login = forwardRef((props, _ref) => {
   const krpanoRef = useRef(null);
   const krpanoSceneIdRef = useRef(localStorage.getItem('loginKrpanoSceneId'));
   const [status, setStatus] = useState('normal');
-  const [showList, setShowList] = useState(true);
+  const [showList, setShowList] = useState(false);
   const [autoLogin, setAutoLogin] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [type, setType] = useState('Account');

src/pages/user/login/template/project/suzhou/index.less

@@ -54,7 +54,6 @@
         position: relative;
         width: 660px;
         height: 454px;
-
         background: url(./images/背景.png) no-repeat center center;
         background-size: 100% 100%;
 
@@ -294,22 +293,23 @@
     .suzhou_krpano {
         .panda-krpano-es-preview-footer-footer-footerContainer .panda-krpano-es-preview-footer-footer-mask {
             bottom: 0;
-            background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 70%, rgba(0, 99, 163, 0.6))
+            background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 70%, rgba(0, 99, 163, 0.6));
+            // height: 0;
+            transition: all 0.3s;
         }
-        .panda-krpano-es-preview-menu-menu-itemIcon{
-            display: none!important;
+
+        .panda-krpano-es-preview-menu-menu-itemIcon {
+            display: none !important;
         }
     }
 
     .suzhou_hideList {
         .panda-krpano-es-preview-footer-footer-footerContainer .panda-krpano-es-preview-footer-footer-mask {
             bottom: -130px;
-            transition: all 0.3s;
         }
 
         .krpano_btn {
             bottom: 0px !important;
-            transition: all 0.3s;
         }
     }
 }
@@ -330,6 +330,7 @@
         background-size: 100% 100%;
         z-index: 1000;
         cursor: pointer;
+        transition: all 0.3s;
 
     }