feat: 新增 宿州登录页

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

@@ -7,6 +7,7 @@ import omit from 'omit.js';
 
 import { useIntl } from '@wisdom-utils/components';
 
+import classNames from 'classnames';
 import services from '../../../../../api/service/base';
 import styles from './index.less';
 import LoginContext from './LoginContext';
@@ -67,7 +68,7 @@ const ValidateCode = props => {
         placeholder={props?.placeholder || '请输入验证码'}
         onChange={handChange}
       />
-      <div className={styles.validate_img}>
+      <div className={classNames(styles.validate_img, 'validate_img')}>
         <img src={`${codeUrl}?time=${count}`} alt="" />
         <div className={styles.validate_refresh} onClick={handeRefresh}>
           <ReloadOutlined />

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

-import PanoBaseLogin from "./PanoBaseLogin"
-import TieShanLogin from "../project/tieshan"
-import LinTao from '../project/linTao'
-import MiLe from "../project/miLe"
-import Linwei from "../project/linwei"
-import { useState , useEffect } from "react"
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-05-24 17:27:53
+ */
+import { useState, useEffect } from 'react';
+import PanoBaseLogin from './PanoBaseLogin';
+import TieShanLogin from '../project/tieshan';
+import LinTao from '../project/linTao';
+import MiLe from '../project/miLe';
+import Linwei from '../project/linwei';
+import SuzhouLogin from '../project/suzhou';
 
 const LoginTemplate = {
-    "铁山" : TieShanLogin,
-    "临洮" : LinTao,
-    "弥勒" : MiLe,
-    "临渭" : Linwei,
-    default : PanoBaseLogin
-}
+  铁山: TieShanLogin,
+  临洮: LinTao,
+  弥勒: MiLe,
+  临渭: Linwei,
+  宿州: SuzhouLogin,
+  default: PanoBaseLogin,
+};
 
 const Panorama = props => {
-    const {loginParams , ...reset} = props
+  const { loginParams, ...reset } = props;
 
-    const [params, setParams] = useState({})
+  const [params, setParams] = useState({});
 
-    useEffect(() => {
-        
-        if(!loginParams) {
-            setParams({})
-        } else {
-            const params = {}
-            loginParams.map(data => {
-                const [key , value] = data.split("=")
-                params[key] = value
-            })
-            setParams(params)
-        }
-        
-    }, [loginParams]);
+  useEffect(() => {
+    if (!loginParams) {
+      setParams({});
+    } else {
+      const params = {};
+      loginParams.map(data => {
+        const [key, value] = data.split('=');
+        params[key] = value;
+      });
+      setParams(params);
+    }
+  }, [loginParams]);
 
-   const LoginCompontnt =  params['projectName'] && LoginTemplate[params['项目']] ? LoginTemplate[params['项目']] : 
-   params['projectName'] ? LoginTemplate["default"] : LoginTemplate['default']
+  const LoginCompontnt =
+    params.projectName && LoginTemplate[params['项目']]
+      ? LoginTemplate[params['项目']]
+      : params.projectName
+      ? LoginTemplate.default
+      : LoginTemplate.default;
 
-   return (<LoginCompontnt {...reset} loginParams = {params}/>)
-}
+  return <LoginCompontnt {...reset} loginParams={params} />;
+};
 
-export default Panorama
\ No newline at end of file
+export default Panorama;

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

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-11-28 14:47:37
+ */
+import { Form, Checkbox } from 'antd';
+import React from 'react';
+import { useIntl } from '@wisdom-utils/components';
+import LoginForm from '../../../components/Login';
+import LoginMessage from '../../../js/loginMessage';
+import iconValidate from './images/验证码.png';
+import passIcon from './images/密码.png';
+import userIcon from './images/账号.png';
+
+import styles from './index.less';
+/* 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 && (
+      <LoginMessage
+        content={useIntl().formatMessage({
+          id: 'pages.login.accountLogin.errorMessage',
+        })}
+      />
+    )}
+    <UserName
+      name="userName"
+      placeholder={useIntl().formatMessage({
+        id: 'pages.login.username.placeholder',
+      })}
+      prefix={<img src={passIcon} width={15} />}
+      rules={[
+        {
+          required: true,
+          message: useIntl().formatMessage({
+            id: 'pages.login.username.required',
+          }),
+        },
+      ]}
+    />
+    <Password
+      name="password"
+      placeholder={useIntl().formatMessage({
+        id: 'pages.login.password.placeholder',
+      })}
+      prefix={<img src={userIcon} width={15} />}
+      rules={[
+        {
+          required: true,
+          message: useIntl().formatMessage({
+            id: 'pages.login.password.required',
+          }),
+        },
+      ]}
+    />
+    {props?.isValidate ? <Validate name="validate" prefix={<img src={iconValidate} width={15} />} /> : null}
+    <div>
+      <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+        {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
+      </Checkbox>
+    </div>
+
+    <Submit className={styles.submitBtn} loading={props.submitting} rest={{ type: 'text' }}>
+      {useIntl().formatMessage({ id: 'pages.login.submit' })}
+    </Submit>
+  </LoginForm>
+);
+
+export default useAccount;

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

+/*
+ * 功能名称: 宿州登录页
+ * 功能路径:
+ * 功能参数:
+ */
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal, Popover } from 'antd';
+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 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 './Account';
+import { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png';
+import qrcodePng from './images/1.png';
+import loginTitlePng from './images/text.png';
+import Krpano from '../../../components/Krpano';
+
+const PopOvercontent = () => {
+  const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+  if (qrcodes) {
+    return <QRCode value={qrcodes} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+const welcomeList = ['诚信为基', '合作共赢', '以人为本', '效益优先'];
+
+const Login = forwardRef((props, _ref) => {
+  // const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
+  const isValidate = true;
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [type, setType] = useState('Account');
+  const [visible, setVisible] = useState(false);
+  const history = useHistory();
+  const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+  const [dateObj, setDateObj] = useState({});
+  const { projectName } = props.loginParams;
+  const handleSubmit = values => {
+    /* eslint-disable */
+    action &&
+      (type === 'Account'
+        ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, 'none', values?.validate)
+        : type === 'Mobile'
+        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
+        : null);
+
+    setSubmitting(true);
+    props.updateCurrentIndex && props.updateCurrentIndex(-1);
+  };
+
+  useEffect(() => {
+    action &&
+      action.events.on('loginSuccess', event => {
+        setSubmitting(false);
+        props.updateCurrentIndex && props.updateCurrentIndex(0);
+        props.history.push(`/?client=${props.global.client}`);
+
+        defaultApp();
+      });
+    action &&
+      action.events.on('loginError', event => {
+        setVisible(false);
+        setSubmitting(false);
+      });
+    action &&
+      action.events.on('loginVisible', status => {
+        setVisible(status);
+      });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+    };
+  }, [props.loginMode]);
+
+  useEffect(() => {
+    setSubmitting(false);
+  }, [visible]);
+
+  const renderPlatform = () => {
+    const template = props.global.loginTemplate;
+    const params = {
+      fromRef: formRef,
+      type,
+      setType,
+      status,
+      submitting,
+      autoLogin,
+      setAutoLogin,
+      action,
+      onSubmit: handleSubmit,
+      loginMode: props.loginMode,
+      updateLoginMode: props.updateLoginMode,
+      welcome: null,
+    };
+    return <Account {...params} isValidate={isValidate} />;
+  };
+  /* eslint-disable */
+
+  const handleWeek = () => {
+    const weekOfDay = Number(moment().format('E'));
+
+    let weekDayName = '';
+    switch (weekOfDay) {
+      case 1:
+        weekDayName = '周一';
+        break;
+      case 2:
+        weekDayName = '周二';
+        break;
+      case 3:
+        weekDayName = '周三';
+        break;
+      case 4:
+        weekDayName = '周四';
+        break;
+      case 5:
+        weekDayName = '周五';
+        break;
+      case 6:
+        weekDayName = '周六';
+        break;
+      case 7:
+        weekDayName = '周日';
+        break;
+      default:
+        weekDayName = '';
+    }
+    return weekDayName;
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateObj({
+        curTime: moment().format('HH:mm:ss'),
+        week: handleWeek(),
+        date: moment().format('YYYY/MM/DD'),
+      });
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+
+      <div className={classnames(styles.suzhoulogin, 'suzhoulogin')}>
+        <div className={classnames(styles['wrapper'])}>
+          <QueueAnim type="scale" duration={1000}>
+            <div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
+              <div className={classnames(styles['inner-center'])}>
+                <div className={styles['welcome-title']}>
+                  <img src={loginTitlePng} alt="login-title" className={styles['welcome-title-img']} />
+                </div>
+                <div className={styles['welcome-list']}>
+                  {welcomeList.map(item => (
+                    <div className={styles['welcome-list_item']} key={item}>
+                      {item}
+                    </div>
+                  ))}
+                </div>
+                <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                  {renderPlatform()}
+                </div>
+              </div>
+              <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']}>
+                <div>
+                  <img src={logo} alt="logo" />
+                </div>
+                <div className={styles['cn-title']} />
+              </div>
+            </QueueAnim>
+            <QueueAnim type="right">
+              <div key="logintime" className={styles['right-timebox']}>
+                <div className={styles['curr-time']}>{dateObj.curTime}</div>
+                <div className={styles['curr-week-date']}>
+                  <div className={styles['curr-week']}>{dateObj.week}</div>
+                  <div className={styles['curr-date']}>{dateObj.date}</div>
+                </div>
+              </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>
+        <div className={styles['krpano']}>
+          <Krpano projectName={projectName} />
+        </div>
+      </div>
+    </HelmetProvider>
+  );
+});
+
+const mapStateToProps = state => ({
+  global: state.getIn(['global', 'globalConfig']),
+  loginMode: state.getIn(['global', 'loginMode']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+  createContext(data) {
+    dispatch(actionCreators.createContext(data));
+  },
+  updateLoginMode(mode) {
+    dispatch(actionCreators.changeLoginMode(mode));
+  },
+  updateCurrentIndex(index) {
+    dispatch(actionCreators.updateCurrentIndex(index));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withRouter(Login));

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

+.suzhoulogin {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(#fff 5%, rgba(162, 215, 245, 1) 100%);
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .caseHide {
+        display: none !important;
+    }
+
+
+    .inner-bg {
+        width: 100%;
+
+        &>div {
+            width: 400px;
+            margin: 0 auto;
+        }
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 220px;
+        left: calc(50% - 330px);
+        z-index: 100;
+
+
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+
+    .inner-center {
+        position: relative;
+        width: 660px;
+        height: 454px;
+
+        background: url(./images/背景.png) no-repeat center center;
+        background-size: 100% 100%;
+
+    }
+
+    .welcome-title {
+        text-align: center;
+        padding: 30px 0 10px;
+
+    }
+
+    .welcome-title-img {
+        width: 583px;
+    }
+
+    .welcome-list {
+        width: 584px;
+        margin: auto;
+        display: flex;
+        background: url(./images/left.png) no-repeat left center, url(./images/right.png) no-repeat right center;
+        background-size: 16px 25px, 16px 25px;
+        margin-bottom: 25px;
+        padding: 0 30px;
+        justify-content: space-between;
+
+    }
+
+    .welcome-list_item {
+        width: 120px;
+        height: 32px;
+        background: rgba(18, 150, 235, 0.85);
+        border-radius: 16px;
+        border: 2px solid rgba(18, 150, 235, 0.85);
+        font-weight: bold;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 28px;
+        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
+        text-align: center;
+    }
+
+    .formgroup2 {
+        display: flex;
+        align-items: center;
+        display: flex;
+        margin: 0px 5.5%;
+        margin-bottom: 10%;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+
+    .APPcodeBox {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .APPCtext {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        line-height: 30px;
+        opacity: 0.75;
+    }
+
+    .login-header {
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 82px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 22px;
+        z-index: 100;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                width: 40px;
+            }
+
+            .cn-title {
+                width: 438px;
+                height: 36px;
+                background: url(./images/标题.png) no-repeat center center;
+                background-size: 100% 100%;
+                margin-left: 10px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 36px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #fff;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #fff;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .copyright {
+        position: absolute;
+        bottom: 1%;
+        margin: 0 auto;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #9d9d9d;
+        text-align: center;
+        transform: translateX(-50%);
+        left: 50%;
+    }
+
+    .qrcode-box {
+        position: absolute;
+        bottom: 15px;
+        right: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+    .krpano {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.submitBtn {
+    width: 306px !important;
+    height: 52px;
+    background: url(./images/登录btn.png) no-repeat center center;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 18px;
+    color: #FFFFFF;
+    text-align: center;
+    // line-height: 45px;
+    letter-spacing: 20px;
+    cursor: pointer;
+    // margin: auto 0;
+    margin-left: 47px;
+    padding-left: 40px;
+    padding-top: 0;
+    border: none;
+
+}
+
+.submitBtn:active,
+.submitBtn:hover,
+.submitBtn:focus {
+    background: url(./images/登录btn.png) no-repeat center center !important;
+    background-size: 100% 100%;
+    opacity: 0.8 !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+& :global {
+
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+:global {
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .suzhoulogin {
+        .validate_img {
+            background-color: #fff;
+        }
+    }
+}
\ No newline at end of file