feat: 广州节水增加验证码登录

src/containers/App/store/reducer.js

@@ -94,6 +94,7 @@ const appReducer = (state = initialState, action) => {
       window.__INITIAL_STATE__.menu = 'banner-left';
       const  temp = AppConfig(window.__INITIAL_STATE__)
       temp.displayMode = window.__INITIAL_STATE__?.displayMode||''
+      temp.isVerification = action.data.isVerification || '';
       window.globalConfig = temp;
 
 

src/pages/user/login/login.js

@@ -1460,6 +1460,93 @@ class Login {
     }
   }
 
+  loginValidate(usr, pwd, userPhone, isRememberPWD, mode = SERVICE_APP_LOGIN_MODE.password, validateCode = '') {
+    this.globalConfig = getGlobalConfig();
+    const self = this;
+    if (window.globalConfig && window.globalConfig.hasGateWay) {
+      usr = userPhone ? userPhone : usr;
+      appService
+        .authorizationToken({
+          loginName: usr,
+          // password: pwd ? (params.getParams('generateType') ? pwd : sha1(pwd).toUpperCase()) : '',
+          password: pwd
+            ? params.getParams('generateType')
+              ? pwd
+              : encipher(pwd, this.globalConfig.encrypt).toUpperCase()
+            : '',
+          vCode: validateCode,
+          type: mode,
+          generateType: params.getParams('generateType') || '',
+        })
+        .then(res => {
+          if (res.code === 0) {
+            const data = res.data;
+            self.updateConfig &&
+              self.updateConfig(
+                Object.assign({}, self.globalConfig, {
+                  access_token: data.access_token,
+                  token: data.user_token,
+                }),
+              );
+            if (res.msg === '密码过期') {
+              localStorage.setItem('password_needChange', true);
+            } else {
+              localStorage.removeItem('password_needChange');
+            }
+            return data;
+          } else {
+            message.error({
+              duration: 3,
+              content: `授权失败:${res.msg}`,
+            });
+            self.hasTry = true;
+            self.handleLoginError();
+            self.events.emit('loginError', res.msg);
+            return Promise.reject(res);
+          }
+        })
+        .then(res => {
+          self.transformLoginHander(res, isRememberPWD, pwd);
+        });
+    } else {
+      appService
+        .generateToken({
+          f: 'json',
+          expiration: this.globalConfig.expiration, // token过期时间(单位：秒)
+          client: 'referer',
+          username: usr,
+          // password: pwd ? (params.getParams('generateType') ? pwd : sha1(pwd).toUpperCase()) : '',
+          password: pwd
+            ? params.getParams('generateType')
+              ? pwd
+              : encipher(pwd, this.globalConfig.encrypt).toUpperCase()
+            : '',
+          vCode: validateCode,
+          referer: this.globalConfig.client,
+          skipMenuTest: 1,
+          userPhone,
+          'request.preventCache': Date.now(),
+          ignoreSite: true,
+          loginName: usr,
+          generateType: params.getParams('generateType') || '',
+        })
+        .then(response => {
+          if (response?.msg === '密码过期') {
+            localStorage.setItem('password_needChange', true);
+          } else {
+            localStorage.removeItem('password_needChange');
+          }
+          self.transformLoginHander(response, isRememberPWD, pwd);
+        })
+        .catch(error => {
+          self.hasTry = true;
+          self.handleLoginError();
+          self.events.emit('loginError', error.message);
+          message.error('登录服务异常');
+        });
+    }
+  }
+
   loginHandler(user, pwd, userPhone, isRememberPWD, ref) {
     const self = this;
     if (user && pwd) {
@@ -1474,6 +1561,23 @@ class Login {
       }
     }
   }
+
+  loginHandlerValidate(user, pwd, userPhone, isRememberPWD, ref, validateCode = '') {
+    const self = this;
+    if(this.globalConfig?.isVerification == 1) return self.loginValidate(user, pwd, userPhone, isRememberPWD, '', validateCode);
+    if (user && pwd) {
+      if (self.loginFailed && self.captchaObj) {
+        self.captchaObj.verify();
+      } else if (self.hasTry) {
+        self.slideVerify(ref, () => {
+          self.login(user, pwd, userPhone, isRememberPWD);
+        });
+      } else {
+        self.login(user, pwd, userPhone, isRememberPWD);
+      }
+    }
+  }
+
   loginHandlerJiangXi(user, pwd, userPhone, isRememberPWD, ref) {
     const self = this;
     if (user && pwd) {

src/pages/user/login/template/energy_GZ/FormLogin.js

 /* eslint-disable */
-import { Checkbox } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useIntl } from '@wisdom-utils/components';
 import LoginForm from '../../components/Login';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+import { FieldNumberOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons';
 import LoginMessage from '../../js/loginMessage';
 import LoginContext from '../../components/Login/LoginContext';
 import styles from './index.less';
 const { UserName, Password, Submit } = LoginForm;
+
+const ValidateCode = props => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    window.share.event.on('loginError', handError);
+    return () => {
+      window.share.event.removeListener('loginError', handError);
+    };
+  }, []);
+
+  const handError = () => {
+    setCount(Date.now());
+  };
+
+  const handeRefresh = () => {
+    setCount(Date.now());
+  };
+
+  const handChange = value => {
+    props?.onChange?.(value);
+  };
+
+  return (
+    <div className={styles.validate_view}>
+      <Input
+        size={'large'}
+        prefix={<FieldNumberOutlined />}
+        className={styles.validate_input}
+        value={props.value || ''}
+        placeholder="请输入验证码"
+        onChange={handChange}
+      />
+      <div className={styles.validate_img}>
+        <img
+          src={`/PandaCore/GCK/BussinessAuth/GetVerificationCode?time=${count}`}
+          // key={count}
+        />
+        <div className={styles.validate_refresh} onClick={handeRefresh}>
+          <ReloadOutlined />
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const FormLogin = props => (
   <div className={styles.form_login}>
     <LoginContext.Provider>
@@ -54,12 +100,30 @@ const FormLogin = props => (
             },
           ]}
         />
+        {window?.globalConfig?.isVerification == 1 ? (
+          <Form.Item shouldUpdate noStyle>
+            {({ getFieldValue, validateFields }) => (
+              <Form.Item
+                name="validateCode"
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入验证码',
+                  },
+                ]}
+              >
+                <ValidateCode />
+              </Form.Item>
+            )}
+          </Form.Item>
+        ) : null}
         <div className={styles.checkbox_wrap}>
-       { // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
-          //  {'记住密码'}
-        //  </Checkbox>
-         // <a href="#">忘记密码?</a>
-        }
+          {
+            // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+            //  {'记住密码'}
+            //  </Checkbox>
+            // <a href="#">忘记密码?</a>
+          }
         </div>
         <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
       </Form>

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

@@ -15,6 +15,7 @@ import { actionCreators } from '@/containers/App/store';
 import LoginAction from '../../login';
 import styles from './index.less';
 import { defaultApp } from '@/micro';
+import classNames from 'classnames';
 import { log } from 'kit_utils';
 let big = '广州大.png'
 let bigNew = ''
@@ -23,7 +24,6 @@ let slogan = ''
 class HuaNongLogin extends Component {
   constructor(props) {
     super(props);
-    console.log(props);
     this.state = {
       time: '16:00',
       week: '星期一',
@@ -60,7 +60,7 @@ class HuaNongLogin extends Component {
     const { action, type, autoLogin } = this.state;
     action &&
       (type === 'Account'
-        ? action.loginHandler(values.userName, values.password, null, autoLogin, this.sliVerify)
+        ? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, this.sliVerify, values.validateCode)
         : type === 'Mobile'
           ? action.phoneLoginFormHandler(values.mobile, values.captcha)
           : null);
@@ -219,8 +219,6 @@ class HuaNongLogin extends Component {
       .toUpperCase();
   }
   componentDidMount() {
-    console.log(this.props, this.props.global.logo, this.props.global.transformDevAssetsBaseURL('assets/images/广州/背景.png'));
-    console.log(this);
     this.onActinoChange(this.state.action);
     this.getCurrentTime(this.showTime);
     /* request(urlUtils.getUrl(
@@ -260,7 +258,7 @@ class HuaNongLogin extends Component {
             </div>
           </div>
           <div className={styles.wrap_content}>
-            <div className={styles.from}>
+            <div className={classNames(styles.from, this.props.global.isVerification == 1 ? styles.from_validate : '')}>
               <div className={styles.slogan}>
                 <div className={styles.slogan_back} style={{ background: `url( ${!slogan ? require("@/assets/images/login/节水/建桥宣传语.png") : this.props.global.transformDevAssetsBaseURL(slogan)}) center no-repeat` }} />
               </div>

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

 @import '~antd/es/style/themes/default.less';
+
 /* 0.5px */
 .borderSlender(@color) {
   position: absolute;
@@ -11,14 +12,16 @@
   transform: scaleY(0.5);
   content: '';
 }
+
 .quota {
   position: relative;
   width: 100%;
   height: 100%;
- // background: url('@/assets/images/login/节水/广州大.png') no-repeat;
+  // background: url('@/assets/images/login/节水/广州大.png') no-repeat;
   background-size: cover;
-  background-size:100% 100% !important;
-background-attachment:fixed;
+  background-size: 100% 100% !important;
+  background-attachment: fixed;
+
   .head {
     position: absolute;
     top: 0;
@@ -27,6 +30,7 @@ background-attachment:fixed;
     display: flex;
     justify-content: space-between;
     z-index: 10;
+
     .title {
       padding-left: 20px;
       font-size: 24px;
@@ -35,15 +39,18 @@ background-attachment:fixed;
       text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
       line-height: 66px;
     }
-    .imgs{
+
+    .imgs {
       width: 44px;
       margin-bottom: 7px;
       margin-right: 10px;
     }
+
     .time_and_date {
       padding-right: 50px;
       display: flex;
       align-items: center;
+
       .time {
         padding: 5px;
         font-size: 34px;
@@ -51,6 +58,7 @@ background-attachment:fixed;
         color: #FFFFFF;
         text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.8);
       }
+
       .date {
         padding: 5px;
         font-size: 16px;
@@ -63,13 +71,16 @@ background-attachment:fixed;
       }
     }
   }
+
   .head::after {
     .borderSlender(@color: rgb(255, 255, 255, 0.32));
   }
+
   .wrap_content {
     position: relative;
     width: 100%;
     height: 100%;
+
     .from {
       position: absolute;
       top: -94px !important;
@@ -85,16 +96,23 @@ background-attachment:fixed;
       // background: rgba(255, 255, 255, 0.8);
       background: #FFFFFF;
       border-radius: 15px;
+
+      &.from_validate {
+        height: 500px;
+      }
+
       .slogan {
         height: 118px;
-        background: linear-gradient(0deg,rgba(9,128,238,1) 0%,rgba(0,182,251,1) 100%);
-        .slogan_back{
+        background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
+
+        .slogan_back {
           width: 100%;
           height: 100%;
           background: url('@/assets/images/login/节水/建桥宣传语.png') no-repeat;
-        background-position: center;
+          background-position: center;
         }
       }
+
       .login {
         // flex: 1;
         height: calc(100% - 118px);
@@ -107,46 +125,113 @@ background-attachment:fixed;
 .form_login {
   width: 100%;
   height: 100%;
+
   .checkbox_wrap {
     margin-bottom: @margin-md;
     color: #0599F4;
+
     a {
       float: right;
     }
   }
+
+  .validate_view {
+    display: flex;
+    align-items: center;
+  }
+
+  .validate_input {
+    flex: 1;
+    margin-right: 20px;
+  }
+
+  .validate_img {
+    width: 102px;
+    height: 42px;
+    flex: none;
+    position: relative;
+    cursor: pointer;
+    border: 1px solid #0599F4;
+    border-radius: 4px;
+
+    &:hover {
+      .validate_refresh {
+        opacity: 1;
+        background-color: rgba(238, 238, 238, 0.7);
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .validate_refresh {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      display: flex;
+      opacity: 0;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #666666;
+    }
+  }
+
   :global {
-    .panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-focused {
+
+    .panda-console-base-input-affix-wrapper:focus,
+    .panda-console-base-input-affix-wrapper-focused {
       box-shadow: none;
     }
-    .panda-console-base-form-item{
+
+    .panda-console-base-form-item {
       margin-bottom: 46px;
     }
+
+    .panda-console-base-form-item-with-help {
+      margin-bottom: 24px;
+    }
+
     .panda-console-base-input-affix-wrapper {
       color: #0599F4;
       background: none;
     }
+
     .panda-console-base-input {
       background: none;
     }
-    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
+
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus,
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
       box-shadow: none;
     }
+
     .panda-console-base-input-affix-wrapper:focus .panda-console-base-input-affix-wrapper-lg {
       border-color: #0599F4 !important;
     }
+
     .panda-console-base-input-affix-wrapper:not(.panda-console-base-input-affix-wrapper-disabled):hover {
       z-index: 1;
       border-color: #0599F4;
       border-right-width: 1px;
     }
+
     .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper,
     .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:hover {
       border-color: #ff4d4f;
     }
+
     .panda-console-base-input-affix-wrapper-focused,
     .panda-console-base-input-affix-wrapper:focus {
       z-index: 0;
     }
+
     .panda-console-base-input-affix-wrapper-lg {
       background-color: none;
       border: none;
@@ -154,41 +239,50 @@ background-attachment:fixed;
       border-bottom-width: 1px;
       border-bottom-style: solid;
     }
-    .panda-console-base-input-affix-wrapper > input.panda-console-base-input {
+
+    .panda-console-base-input-affix-wrapper>input.panda-console-base-input {
       background-color: none;
     }
+
     .panda-console-base-form {
       width: 100%;
       height: 100%;
     }
+
     .panda-console-base-checkbox-wrapper {
       color: #0599F4;
     }
+
     .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox::after {
       border-color: #0599F4;
     }
+
     .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox-inner,
     .panda-console-base-checkbox:hover .panda-console-base-checkbox-inner,
-    .panda-console-base-checkbox-input:focus + .panda-console-base-checkbox-inner {
+    .panda-console-base-checkbox-input:focus+.panda-console-base-checkbox-inner {
       border-color: #0599F4;
     }
+
     .panda-console-base-checkbox-wrapper {
       .panda-console-base-checkbox-checked .panda-console-base-checkbox-inner {
         background-color: #0599F4;
         border-color: #0599F4;
       }
+
       .panda-console-base-checkbox-inner {
         border-color: #0599F4;
         border-radius: 50%;
       }
     }
+
     .panda-console-base-btn-lg {
       width: 100%;
     }
+
     .panda-console-base-btn-primary {
       background: #0599F4;
       border-color: #0599F4;
       border-radius: 23px;
     }
   }
-}
+}
\ No newline at end of file