pref: 部分登录页支持验证码

public/web5Config.json

 {
   "loginTemplate": [
     {
-      "title": "Dark"
+      "title": "Dark",
+      "isVerificationCode": true
     },
     {
-      "title": "Water"
+      "title": "Water",
+      "isVerificationCode": true
     },
     {
       "title": "Water2"
@@ -46,7 +48,8 @@
       "title": "项目 - 德庆"
     },
     {
-      "title": "项目 - 瑞云"
+      "title": "项目 - 瑞云",
+      "isVerificationCode": true
     },
     {
       "title": "项目 - 大悟"

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

@@ -14,27 +14,27 @@ import { actionCreators } from '@/containers/App/store';
 import classnames from 'classnames';
 import moment from 'moment';
 import QueueAnim from 'rc-queue-anim';
+import QRCode from 'qrcode.react';
 import defaultSetting from '../../../../../../../config/defaultSetting';
 import LoginAction from '../../../login';
 import styles from './index.less';
 import Account from '../../../js/useAccount';
 import { defaultApp } from '../../../../../../micro';
 import logo from './images/logo.png';
-import qrcodePng from './images/1.png'
-import QRCode from 'qrcode.react';
+import qrcodePng from './images/1.png';
 import loginTitlePng from './images/text.png';
 
-
-const PopOvercontent = () =>{
+const PopOvercontent = () => {
   const qrcodes = window.globalConfig && window.globalConfig.qrcode;
   if (qrcodes) {
-        return <QRCode value={qrcodes}/>;
+    return <QRCode value={qrcodes} />;
   }
   return <span>手持APP下载未配置</span>;
-}
+};
 
 const Login = forwardRef((props, _ref) => {
-  const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   const sliVerify = useRef();
   const videoRef = useRef();
   const loginFormRef = useRef();
@@ -54,7 +54,9 @@ const Login = forwardRef((props, _ref) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
-        ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, sliVerify, values?.validate)
+        ? isValidate
+          ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
         : type === 'Mobile'
         ? action.phoneLoginFormHandler(values.mobile, values.captcha)
         : null);
@@ -214,15 +216,17 @@ const Login = forwardRef((props, _ref) => {
                     {renderPlatform()}
                   </div>
                 </div>
-                <Popover content={PopOvercontent} title="扫码下载APP" placement='right'  overlayClassName={'popover-style'}>
-                    <img src={qrcodePng} alt="APP" className={styles['qrcode-box']}/>
+                <Popover
+                  content={PopOvercontent}
+                  title="扫码下载APP"
+                  placement="right"
+                  overlayClassName={'popover-style'}
+                >
+                  <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
                 </Popover>
               </div>
             </QueueAnim>
 
-            
-
-
             <div key="loginheader" className={classnames(styles['login-header'])}>
               <QueueAnim type="left">
                 <div key="logintitle" className={styles['left-title']}>
@@ -242,7 +246,12 @@ const Login = forwardRef((props, _ref) => {
                 </div>
               </QueueAnim>
             </div>
-            <div className={styles['copyright']}>Copyright ©重庆泽足水务投资建设有限公司All Rights Reserved <a target="_blank" id="IndexCaseNumber" href="https://beian.miit.gov.cn">渝ICP备20000008号-2</a></div> 
+            <div className={styles['copyright']}>
+              Copyright ©重庆泽足水务投资建设有限公司All Rights Reserved{' '}
+              <a target="_blank" id="IndexCaseNumber" href="https://beian.miit.gov.cn">
+                渝ICP备20000008号-2
+              </a>
+            </div>
           </div>
         ) : null}
         {videoShow ? (

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

@@ -26,7 +26,8 @@ const renderQRCode = props => {
 };
 
 const MiLeLogin = forwardRef((props, _ref) => {
-  const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   const sliVerify = useRef();
   const loginFormRef = useRef();
   const formRef = useRef(null);
@@ -47,14 +48,9 @@ const MiLeLogin = forwardRef((props, _ref) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
-        ? action.loginHandlerValidate(
-          values.userName,
-          values.password,
-          null,
-          autoLogin,
-          sliVerify,
-          values?.validate,
-        )
+        ? isValidate
+          ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
         : type === 'Mobile'
         ? action.phoneLoginFormHandler(values.mobile, values.captcha)
         : null);
@@ -97,7 +93,7 @@ const MiLeLogin = forwardRef((props, _ref) => {
       action && action.events && action.events.removeAllListeners('loginVisible');
       action && action.events && action.events.removeAllListeners('loginHomePage');
       action && action.events && action.events.removeAllListeners('loginIndustry');
-    }
+    };
   }, [props.loginMode]);
 
   useEffect(() => {
@@ -125,48 +121,47 @@ const MiLeLogin = forwardRef((props, _ref) => {
 
   const handleWeek = () => {
     const weekOfDay = Number(moment().format('E'));
-    let weekDayName = ''
+    let weekDayName = '';
     switch (weekOfDay) {
       case 1:
-        weekDayName = '周一'
-        break
+        weekDayName = '周一';
+        break;
       case 2:
-        weekDayName = '周二'
-        break
+        weekDayName = '周二';
+        break;
       case 3:
-        weekDayName = '周三'
-        break
+        weekDayName = '周三';
+        break;
       case 4:
-        weekDayName = '周四'
-        break
+        weekDayName = '周四';
+        break;
       case 5:
-        weekDayName = '周五'
-        break
+        weekDayName = '周五';
+        break;
       case 6:
-        weekDayName = '周六'
-        break
+        weekDayName = '周六';
+        break;
       case 0:
-        weekDayName = '周日'
-        break
+        weekDayName = '周日';
+        break;
       default:
-        weekDayName = ''
-    }
-    return weekDayName
+        weekDayName = '';
     }
+    return weekDayName;
+  };
 
   useEffect(() => {
     const timer = setInterval(() => {
       setDateObj({
         curTime: moment().format('HH:mm:ss'),
         week: handleWeek(),
-        date: moment().format('YYYY/MM/DD')
+        date: moment().format('YYYY/MM/DD'),
       });
     }, 1000);
     return () => {
       clearInterval(timer);
     };
-  }, [])
-
+  }, []);
 
   return (
     <HelmetProvider>
@@ -184,9 +179,7 @@ const MiLeLogin = forwardRef((props, _ref) => {
               {renderPlatform()}
             </div>
           </div>
-          {
-              qrcodes.length > 0 && qrcodes[0]
-                ?
+          {qrcodes.length > 0 && qrcodes[0] ? (
             <div className={styles.loginCcode}>
               <img
                 src={
@@ -198,8 +191,9 @@ const MiLeLogin = forwardRef((props, _ref) => {
               />
               <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
             </div>
-                : ''
-            }
+          ) : (
+            ''
+          )}
         </div>
         <div className={styles['login-header-wrapper']}>
           <div className={styles['login-header']}>
@@ -207,7 +201,7 @@ const MiLeLogin = forwardRef((props, _ref) => {
               <div>
                 <img src={`${window.location.origin}/${logoImage}`} />
               </div>
-              <div className={styles['cn-title']}>{props.global.title || "弥勒诚正自来水智慧水务平台"}</div>
+              <div className={styles['cn-title']}>{props.global.title || '弥勒诚正自来水智慧水务平台'}</div>
             </div>
             <div className={styles['right-timebox']}>
               <div className={styles['curr-time']}>{dateObj.curTime}</div>
@@ -218,22 +212,19 @@ const MiLeLogin = forwardRef((props, _ref) => {
             </div>
           </div>
         </div>
-        {
-          projectName?<div className={styles['krpano']}>
+        {projectName ? (
+          <div className={styles['krpano']}>
             <Krpano projectName={projectName} />
-        </div>:null
-        }
+          </div>
+        ) : null}
 
         <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
           <div ref={sliVerify} />
         </Modal>
-
-
       </div>
     </HelmetProvider>
-  )
-
-})
+  );
+});
 
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),

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

@@ -53,7 +53,8 @@ const imgList = [
   },
 ];
 const Login = forwardRef((props, _ref) => {
-  const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   // const isValidate = true;
   const sliVerify = useRef();
   const loginFormRef = useRef();

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

@@ -41,8 +41,8 @@ const PopOvercontent = () => {
 const welcomeList = ['诚信为基', '合作共赢', '以人为本', '效益优先'];
 
 const Login = forwardRef((props, _ref) => {
-  // const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
-  const isValidate = true;
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   const loginFormRef = useRef();
   const formRef = useRef(null);
   const krpanoObjRef = useRef(null);
@@ -63,7 +63,9 @@ const Login = forwardRef((props, _ref) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
+        ? isValidate
           ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
         : type === 'Mobile'
         ? action.phoneLoginFormHandler(values.mobile, values.captcha)
         : null);

src/pages/user/login/template/water/index.js

@@ -9,6 +9,7 @@ import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { connect } from 'react-redux';
 import { useHistory, withRouter } from '@wisdom-utils/runtime';
 import { actionCreators } from '@/containers/App/store';
+import QRCode from 'qrcode.react';
 import defaultSetting from '../../../../../../config/defaultSetting';
 import LoginAction from '../../login';
 import styles from './index.less';
@@ -16,18 +17,19 @@ import useRenderQcode from '../../js/useRenderQcode';
 import Account from '../../js/useAccount';
 import IotComponent from '../../js/useIOTComponent';
 import { defaultApp } from '../../../../../micro';
-import QRCode from 'qrcode.react';
 
 const renderQRCode = props => {
   const qrcodes = props?.qrcode?.split('|') ?? [];
   if (qrcodes.length > 0 && qrcodes[0]) {
-    let value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
+    const value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
     return <QRCode value={value} />;
   }
   return <span>手持APP下载未配置</span>;
 };
 
 const Login = forwardRef((props, _ref) => {
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   const sliVerify = useRef();
   const loginFormRef = useRef();
   const formRef = useRef(null);
@@ -45,7 +47,9 @@ const Login = forwardRef((props, _ref) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
-        ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
+        ? isValidate
+          ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
         : type === 'Mobile'
         ? action.phoneLoginFormHandler(values.mobile, values.captcha)
         : null);
@@ -75,7 +79,7 @@ const Login = forwardRef((props, _ref) => {
       });
     action.events.on('loginHomePage', () => {
       props.history.push(`/homePage`);
-    })
+    });
     action.events.on('loginIndustry', () => {
       props.history.push(`/industry`);
     });
@@ -108,7 +112,7 @@ const Login = forwardRef((props, _ref) => {
       loginMode: props.loginMode,
       updateLoginMode: props.updateLoginMode,
     };
-    return <Account {...params} />;
+    return <Account {...params} isValidate={isValidate} />;
   };
   /* eslint-disable */
 
@@ -150,9 +154,7 @@ const Login = forwardRef((props, _ref) => {
           </div>
           <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated')} ref={loginFormRef}>
             <div className={styles['login-form']}>{renderPlatform()}</div>
-            {
-              qrcodes.length > 0 && qrcodes[0]
-                ?
+            {qrcodes.length > 0 && qrcodes[0] ? (
               <div className={styles.loginCcode}>
                 <img
                   src={
@@ -164,9 +166,9 @@ const Login = forwardRef((props, _ref) => {
                 />
                 <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
               </div>
-                : ''
-            }
-
+            ) : (
+              ''
+            )}
           </div>
         </div>
 

src/pages/user/login/template/water/water.js

@@ -9,6 +9,7 @@ import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { connect } from 'react-redux';
 import { useHistory, withRouter } from '@wisdom-utils/runtime';
 import { actionCreators } from '@/containers/App/store';
+import QRCode from 'qrcode.react';
 import defaultSetting from '../../../../../../config/defaultSetting';
 import LoginAction from '../../login';
 import styles from './index.less';
@@ -16,18 +17,19 @@ import useRenderQcode from '../../js/useRenderQcode';
 import Account from '../../js/useAccount';
 import IotComponent from '../../js/useIOTComponent';
 import { defaultApp } from '../../../../../micro';
-import QRCode from 'qrcode.react';
 
 const renderQRCode = props => {
   const qrcodes = props?.qrcode?.split('|') ?? [];
   if (qrcodes.length > 0 && qrcodes[0]) {
-    let value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
+    const value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
     return <QRCode value={value} />;
   }
   return <span>手持APP下载未配置</span>;
 };
 
 const Login = forwardRef((props, _ref) => {
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
   const sliVerify = useRef();
   const loginFormRef = useRef();
   const formRef = useRef(null);
@@ -45,7 +47,9 @@ const Login = forwardRef((props, _ref) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
-        ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
+        ? isValidate
+          ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
         : type === 'Mobile'
         ? action.phoneLoginFormHandler(values.mobile, values.captcha)
         : null);
@@ -75,7 +79,7 @@ const Login = forwardRef((props, _ref) => {
       });
     action.events.on('loginHomePage', () => {
       props.history.push(`/homePage`);
-    })
+    });
     action.events.on('loginIndustry', () => {
       props.history.push(`/industry`);
     });
@@ -108,7 +112,7 @@ const Login = forwardRef((props, _ref) => {
       loginMode: props.loginMode,
       updateLoginMode: props.updateLoginMode,
     };
-    return <Account {...params} />;
+    return <Account {...params} isValidate={isValidate} />;
   };
   /* eslint-disable */
 
@@ -150,9 +154,7 @@ const Login = forwardRef((props, _ref) => {
           </div>
           <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated')} ref={loginFormRef}>
             <div className={styles['login-form']}>{renderPlatform()}</div>
-            {
-              qrcodes.length > 0 && qrcodes[0]
-                ?
+            {qrcodes.length > 0 && qrcodes[0] ? (
               <div className={styles.loginCcode}>
                 <img
                   src={
@@ -164,9 +166,9 @@ const Login = forwardRef((props, _ref) => {
                 />
                 <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
               </div>
-                : ''
-            }
-
+            ) : (
+              ''
+            )}
           </div>
         </div>