perf: water通用登录页添加手持二维码

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

@@ -17,6 +17,15 @@ import Account from '../../js/useAccount';
 import IotComponent from '../../js/useIOTComponent';
 import { defaultApp } from '../../../../../micro';
 
+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];
+    return <QRCode value={value} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+
 const Login = forwardRef((props, _ref) => {
   const sliVerify = useRef();
   const loginFormRef = useRef();
@@ -123,6 +132,10 @@ 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>
+            <div className={styles.loginCcode}>
+              <img src="/web4/assets/images/login/石家庄/小程序@2x.png" alt="" />
+              <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
+            </div>
           </div>
         </div>
 

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

@@ -95,6 +95,44 @@
                 height: 40px;
             }
         }
+        .loginCcode {
+            width: 34px;
+            height: 34px;
+            position: absolute;
+            right: -34px;
+            background: rgba(255, 255, 255, 0.7);
+            padding: 6px;
+            border-radius: 0 3px 3px 0;
+            cursor: pointer;
+            bottom: 3px;
+            &:hover {
+                display: block;
+                background: transparent;
+                img {
+                    display: none;
+                }
+                .codeBig {
+                    display: block;
+                }
+            }
+            img {
+                width: 23px;
+            }
+            .codeBig {
+                width: 128px;
+                height: 150px;
+                position: absolute;
+                bottom: 0;
+                left: 0px;
+                background: rgba(255, 255, 255, 0.7);
+                padding: 6px;
+                display: none;
+                span {
+                    font-size: 12px;
+                    opacity: 0.75;
+                }
+            }
+        }
     }
 }