feat: 广安爱众新 登录页

public/web5Config.json

@@ -67,6 +67,10 @@
     {
       "title": "项目 - 大足",
       "isVerificationCode": true
+    },
+    {
+      "title": "项目 - 广安爱众新",
+      "isVerificationCode": true
     }
   ]
 }

src/pages/user/login/index.js

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2022-07-08 14:28:01
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-11-29 09:12:26
+ * @LastEditTime: 2025-01-20 16:26:13
  * @FilePath: \CivWeb\src\pages\user\login\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -63,6 +63,7 @@ import DawuLogin from './template/project/dawu';
 import LeshanLogin from './template/project/leshan';
 import WuliangyeLogin from './template/project/wuliangye';
 import Aizhong from './template/project/aizhong';
+import AizhongNew from './template/project/aizhongNew';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春.html': baseLoginNewYear,
@@ -123,6 +124,7 @@ const LoginTemplate = {
   '项目 - 乐山.html': LeshanLogin,
   '项目 - 五粮液.html': WuliangyeLogin,
   '项目 - 广安爱众.html': Aizhong,
+  '项目 - 广安爱众新.html': AizhongNew,
   default: BaseLogin,
 };
 /* eslint-disable */

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

+/*
+ * 功能名称: 广安爱众登录页
+ * 功能路径:
+ * 功能参数:
+ */
+
+import React, { forwardRef, useEffect, useRef, useState, useCallback } 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 defaultSetting from '../../../../../../../config/defaultSetting';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+import bg from './images/背景.jpg';
+import imgIcon from './images/icon.png';
+
+const Login = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  const [show, setShow] = useState(false);
+  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 { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
+  const handleSubmit = useCallback(
+    values => {
+      /* 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);
+
+      setSubmitting(true);
+      props.updateCurrentIndex && props.updateCurrentIndex(-1);
+    },
+    [action, type, isValidate, autoLogin, sliVerify, setSubmitting, props.updateCurrentIndex],
+  );
+
+  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);
+      });
+    action.events.on('loginHomePage', () => {
+      props.history.push(`/homePage`);
+    });
+    action.events.on('loginIndustry', () => {
+      props.history.push(`/industry`);
+    });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
+      action && action.events && action.events.removeAllListeners('loginIndustry');
+    };
+  }, [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 onShow = () => {
+    if (!show) {
+      setShow(true);
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      onShow();
+    }, 300);
+  }, []);
+  useEffect(() => {
+    return () => {};
+  }, [show]);
+  useEffect(() => {
+    return () => {};
+  }, []);
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+
+      <div
+        className={classnames(styles.aizhongNewLogin, 'aizhongNewLogin')}
+        onClick={onShow}
+        style={{ background: `url(${bg}) no-repeat left center`, backgroundSize: 'calc(100% - 475px) auto' }}
+      >
+        {show ? (
+          <div className={classnames(styles['wrapper'])}>
+            <QueueAnim type="scale" duration={1000}>
+              <div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
+                <div className={styles['inner-center']}>
+                  <div className={styles.inner_logo_wrap}>
+                    <div className={styles.inner_logo}>
+                      <img src={imgIcon} alt="" />
+                    </div>
+                    <div className={styles['welcome-title']}>
+                      <div>全心全爱</div>
+                      <div>服务大众</div>
+                    </div>
+                  </div>
+                  <div className={styles.inner_title}>{props.global.title || defaultSetting.title}</div>
+                  <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                    {renderPlatform()}
+                  </div>
+                </div>
+              </div>
+            </QueueAnim>
+          </div>
+        ) : null}
+        <div className={classnames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" />
+
+        <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']),
+  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/aizhongNew/index.less

+.aizhongNewLogin {
+    width: 100%;
+    height: 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%;
+        height: 100%;
+
+
+        &>div {
+            width: 80%;
+            margin: 0 10% 10%;
+        }
+    }
+
+    .inner-wrapper {
+        width: 475px;
+        right: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 0px;
+        height: 100%;
+        z-index: 50;
+        background-color: #fff;
+
+    }
+
+    .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: 100%;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        z-index: 2;
+
+
+    }
+
+    .inner_logo_wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .inner_logo {
+            width: 240px;
+            height: 55px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .welcome-title {
+        font-weight: 300;
+        font-size: 18px;
+        color: #333333;
+        display: flex;
+        justify-content: space-between;
+        width: 240px;
+        margin-top: 8px;
+        line-height: 1;
+
+        div {
+            letter-spacing: 5px;
+        }
+
+
+    }
+
+    .inner_title {
+        font-weight: bold;
+        font-size: 34px;
+        color: #333333;
+        line-height: 1;
+        text-align: center;
+        margin: 66px 0;
+    }
+
+    .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: 50;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                height: 54px;
+            }
+
+            .cn-title {
+                // font-weight: bold;
+                font-size: 36px;
+                color: white;
+                // text-shadow: 0px 1px 10px #A3AFC7;
+                line-height: 1;
+                margin-left: 10px;
+                letter-spacing: 1px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 34px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: white;
+                text-align: right;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: white;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: white;
+                }
+            }
+        }
+    }
+
+    .copyright {
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        margin: 0 auto;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #F1F6FD;
+        text-align: center;
+    }
+
+    .qrcode-box {
+        position: absolute;
+        bottom: 0;
+        right: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+}
+
+
+& :global {
+    .aizhongNewLogin {
+        .panda-console-base-btn {
+            border-radius: 20px;
+        }
+
+
+        .@{ant-prefix}-input-affix-wrapper {
+            background-color: #fff !important;
+            color: #fff;
+            border: 1px solid #BBD0DB;
+        }
+
+        .@{ant-prefix}-input-affix-wrapper>input.@{ant-prefix}-input {
+            background: #fff !important;
+
+
+        }
+
+        .@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled):hover {
+            border: 1px solid #BBD0DB;
+        }
+
+        .@{ant-prefix}-input-affix-wrapper:focus,
+        .@{ant-prefix}-input-affix-wrapper-focused {
+            border: 1px solid #BBD0DB;
+        }
+
+        .@{ant-prefix}-input-prefix {
+            .anticon {
+                color: #2D3033;
+            }
+        }
+
+        .@{ant-prefix}-input-affix-wrapper input.@{ant-prefix}-input:focus {
+            box-shadow: none !important;
+        }
+
+        .@{ant-prefix}-checkbox-wrapper:hover .@{ant-prefix}-checkbox-inner,
+        .@{ant-prefix}-checkbox:hover .@{ant-prefix}-checkbox-inner,
+        .@{ant-prefix}-checkbox-input:focus+.@{ant-prefix}-checkbox-inner {
+            border-color: #C4131D !important;
+
+        }
+
+        .@{ant-prefix}-checkbox-checked::after {
+            border: 1px solid #C4131D !important;
+        }
+
+        .@{ant-prefix}-checkbox-checked {
+            .@{ant-prefix}-checkbox-inner {
+                background-color: #C4131D !important;
+                border-color: #C4131D !important;
+            }
+        }
+
+        .@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled):hover {
+            border-color: #C4131D !important;
+        }
+
+        .@{ant-prefix}-btn-primary,
+        .@{ant-prefix}-btn-primary:hover,
+        .@{ant-prefix}-btn-primary:focus {
+            background: linear-gradient(0deg, #C4131D 15%, #C4131D 80%) !important;
+            border-color: #C4131D !important;
+        }
+
+        .validate_img {
+            border: 1px solid #BBD0DB;
+        }
+    }
+
+    .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;
+        }
+    }
+}
+
+
+
+& :global {}
\ No newline at end of file