fix: 默认登录页二维码样式修改

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

@@ -7,19 +7,22 @@ import styles from './index.less';
 
 const FormItem = Form.Item;
 
-const LoginSubmit = ({ className, ...rest }) => {
+const LoginSubmit = React.memo(
+  ({ className, renderQcode, ...rest }) => {
     const clsString = classNames(styles.submit, className);
     return (
-    <FormItem>
-      <Button
-        size="large"
-        className={clsString}
-        type="primary"
-        htmlType="submit"
-        {...rest}
-      />
+      <FormItem style={renderQcode ? { marginBottom: 15 } : {}}>
+        <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} />
       </FormItem>
     );
-};
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.className === nextProps.className &&
+      prevProps.renderQcode === nextProps.renderQcode &&
+      JSON.stringify(prevProps.rest) === JSON.stringify(nextProps.rest)
+    );
+  },
+);
 
 export default LoginSubmit;

src/pages/user/login/js/useAccount.js

+import React, { memo } from 'react';
 import { Checkbox } from 'antd';
-import React from 'react';
 import { useIntl } from '@wisdom-utils/components';
 import LoginForm from '../components/Login';
 import LoginMessage from './loginMessage';
-/* eslint-disable */
+
 const { UserName, Password, Validate, Submit } = LoginForm;
-const useAccount = props => (
-  <LoginForm onSubmit={props.onSubmit} welcome={props.welcome}>
-    {props.status === 'error' && props.type === 'account' && !props.submitting && (
+
+const AccountForm = ({
+  onSubmit,
+  welcome,
+  status,
+  type,
+  submitting,
+  autoLogin,
+  setAutoLogin,
+  isValidate,
+  renderQcode,
+}) => (
+  <LoginForm onSubmit={onSubmit} welcome={welcome}>
+    {status === 'error' && type === 'account' && !submitting && (
       <LoginMessage
         content={useIntl().formatMessage({
           id: 'pages.login.accountLogin.errorMessage',
@@ -42,14 +53,28 @@ const useAccount = props => (
         },
       ]}
     />
-    {props?.isValidate ? <Validate name="validate" /> : null}
+    {isValidate && <Validate name="validate" />}
     <div>
-      <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+      <Checkbox checked={autoLogin} onChange={e => setAutoLogin(e.target.checked)}>
         {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
       </Checkbox>
     </div>
-    <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
+    <Submit loading={submitting} renderQcode={renderQcode}>
+      {useIntl().formatMessage({ id: 'pages.login.submit' })}
+    </Submit>
   </LoginForm>
 );
 
-export default useAccount;
+export default memo(AccountForm, (prevProps, nextProps) => {
+  return (
+    prevProps.onSubmit === nextProps.onSubmit &&
+    prevProps.welcome === nextProps.welcome &&
+    prevProps.status === nextProps.status &&
+    prevProps.type === nextProps.type &&
+    prevProps.submitting === nextProps.submitting &&
+    prevProps.autoLogin === nextProps.autoLogin &&
+    prevProps.setAutoLogin === nextProps.setAutoLogin &&
+    prevProps.isValidate === nextProps.isValidate &&
+    prevProps.renderQcode === nextProps.renderQcode
+  );
+});
\ No newline at end of file

src/pages/user/login/js/useRenderQcode.js

@@ -139,43 +139,6 @@ const useRenderQcode = (props = {}) => {
         }
         break;
       default:
-        if (item && item.replace(/ /g, '').length > 0) {
-          const indexIndex = element.findIndex(
-            // eslint-disable-next-line no-shadow
-            item => item.props.className.indexOf('Android-single') > -1,
-          );
-          element.splice(indexIndex, 1);
-          element.push(
-            <div
-              className={classNames(
-                styles['quickMark-single'],
-                'Android-single',
-              )}
-              key={index}
-            >
-              <Popover
-                placement="top"
-                content={
-                  <QRCode
-                    value={item.replace(
-                      /{ip}/gi,
-                      props.ip || window.location.host,
-                    )}
-                  />
-                }
-              >
-                <div className={styles['icon-Container']}>
-                  <span className={styles.Android} />
-                  <span
-                    className={classNames(styles.iconText, styles.AndroidText)}
-                  >
-                    Android
-                  </span>
-                </div>
-              </Popover>
-            </div>,
-          );
-        }
         break;
     }
   });

src/pages/user/login/style.less

@@ -235,6 +235,10 @@
         padding: 50px 50px 50px;
         background-color: #ffffff;
       }
+      .tip-container {
+        margin: auto;
+        display: flex;
+      }
     }
   }
   .caseHide {
@@ -358,5 +362,13 @@
     cursor: pointer;
     font-size: 12px;
   }
+
+  .linkBox {
+    color: @primary-color;
+    font-size: 15px;
+    cursor: pointer;
+    margin: auto;
+    line-height: 18px;
+  }
 }
 

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

 import 'kit_utils/lib/format';
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
 
-import { Modal } from 'antd';
+import { Modal, Tooltip } from 'antd';
 // eslint-disable-next-line import/no-unresolved
 import classNames from 'classnames';
 import { dom } from '@wisdom-utils/utils/lib/helpers';
@@ -33,6 +33,7 @@ const Login = forwardRef((props, _ref) => {
   const [currentDate, setCurrentDate] = useState({});
   const [type, setType] = useState('Account');
   const [visible, setVisible] = useState(false);
+  const [renderQcode, setRenderQcode] = useState(false);
   const history = useHistory();
   const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
   const [showVideo, setShowVideo] = useState(false);
@@ -43,7 +44,7 @@ const Login = forwardRef((props, _ref) => {
   const loginMode = Cookies.get('loginMode') || null;
   if (loginMode && loginMode === 'iotWechat') ddCode = null;
 
-  const handleSubmit = values => {
+  const handleSubmit = useCallback((values) => {
     /* eslint-disable */
     action &&
       (type === 'Account'
@@ -56,7 +57,7 @@ const Login = forwardRef((props, _ref) => {
 
     setSubmitting(true);
     props.updateCurrentIndex && props.updateCurrentIndex(-1);
-  };
+  }, [action, type, isValidate, autoLogin, sliVerify, setSubmitting, props.updateCurrentIndex]);
 
   useEffect(() => {
     // if (props.loginMode === LOGIN_WAY.WeChart) {
@@ -145,11 +146,15 @@ const Login = forwardRef((props, _ref) => {
       videoRef && videoRef.current && videoRef.current.removeEventListener('ended', () => {});
     };
   }, [videoRef]);
+  const renderAddons = React.useMemo(() => useRenderQcode(props.global), [props.global]);
   useEffect(() => {
     setSubmitting(false);
-  }, [visible]);
-  const renderAddons = useRenderQcode(props.global);
-  const renderPlatform = () => {
+    renderAddons && renderAddons.length === 0 && setRenderQcode(true)
+  }, [visible, renderAddons]);
+  const toLink = (link) => {
+    window.open(link);
+  };
+  const renderPlatform = (renderQcode) => {
     const template = props.global.loginTemplate;
     const params = {
       fromRef: formRef,
@@ -163,6 +168,7 @@ const Login = forwardRef((props, _ref) => {
       onSubmit: handleSubmit,
       loginMode: props.loginMode,
       updateLoginMode: props.updateLoginMode,
+      renderQcode
     };
     switch (template) {
       case 'DarkCloud.html':
@@ -175,7 +181,6 @@ const Login = forwardRef((props, _ref) => {
     }
   };
   /* eslint-disable */
-
   return (
     <HelmetProvider>
       <Helmet>
@@ -216,9 +221,21 @@ const Login = forwardRef((props, _ref) => {
           </div>
           <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated')} ref={loginFormRef}>
             <div>
-              <img src={require('@/assets/images/login/dark/login.png')} />
+              <img style={renderQcode ? { height: 'calc(100% - 80px)', width: 'calc(100% - 40px)', margin: '40px 0 40px 40px' } : {}} src={require('@/assets/images/login/dark/login.png')} />
+            </div>
+            <div className={styles['login-form']} style={renderQcode ? { padding: '40px 50px' } : {}}>
+              {renderPlatform(renderQcode)}
+              {renderQcode && (
+                <div className={styles['tip-container']}>
+                  <Tooltip title="打开网站下载">
+                    <div className={styles.linkBox} onClick={() => toLink(props?.global?.qrcode)}>
+                    <img style={{ width: '14px', margin: '0 5px 0' }} src={require('./project/jiangxiNew/images/下载.png')} alt="" />
+                      点击下载APP
+                    </div>
+                  </Tooltip>
+                </div>
+              )}
             </div>
-            <div className={styles['login-form']}>{renderPlatform()}</div>
           </div>
         </div>
         <div className={classNames(styles.footerCase, styles.caseHide, 'animate__animated')} ref={footerRef}>