新增忘记密码

config/router.ts

@@ -33,6 +33,10 @@ const router = [
             path: '/user/policy',
             component: '@/pages/user/policy'
           },
+          {
+            path: '/user/forget',
+            component: '@/pages/user/forgetPwd'
+          }
         ]
       },
       {

src/app.tsx

@@ -19,6 +19,7 @@ setup()
 const userLoginLists = [
   '/user/login',
   '/user/register',
+  '/user/forget'
 ]
 // let routeAuthUrls: any[] = []
 // 路由白名单
@@ -106,10 +107,10 @@ export function render(oldRender: Function) {
 export function onRouteChange({ routes, matchedRoutes, location, action }) {
   console.log('onRouteChange')
 
-  if (isDev) {
+  // if (isDev) {
 
-    return;
-  }
+  //   return;
+  // }
 
   // 是否登录
   if (getAuth()) {

src/pages/user/forgetPwd.tsx

+import React, { useState, useEffect } from 'react'
+import { Form, Steps, Button, Row, Col, Radio, Divider, Tooltip, Upload, message, Input as AntdInput } from 'antd'
+import {
+  UploadOutlined,
+  QuestionCircleOutlined
+} from '@ant-design/icons';
+import styles from './index.less'
+import './index.less'
+import globalStyles from '@/global/styles/global.less'
+import cx from 'classnames'
+import { Link, history } from 'umi'
+import im_success from '../../../mockStatic/im_success.png'
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import useCountDown from '@/utils/hooks';
+import { GlobalConfig } from '@/global/config';
+import { omit, transFormSchema } from '@/utils';
+import { PATTERN_MAPS } from '@/constants/regExp';
+import { PublicApi } from '@/services/api';
+import NiceForm from '@/components/NiceForm';
+import schemas from './schema';
+
+const { onFieldValueChange$ } = FormEffectHooks
+
+let formCache: any = {}
+
+const CustomInput = props => {
+  const { help, ...restProps } = props
+  return (
+    <AntdInput
+      {...restProps}
+      addonAfter={help ? <Tooltip title={help}><QuestionCircleOutlined style={{color: '#6B778C', marginLeft: 5}}/></Tooltip> : undefined}
+    />
+  )
+}
+
+// 检验联动
+const useLinkageValidateEffects = () => {
+  const { setFieldState, getFieldState } = createFormActions()
+  onFieldValueChange$('*(password,confirmPassword)').subscribe(fieldState => {
+    const selfName = fieldState.name
+    const selfValue = fieldState.value
+    const otherName = selfName == 'password' ? 'confirmPassword' : 'password'
+    const otherValue = getFieldState(otherName, state => state.value)
+    setFieldState(otherName, state => {
+      if (selfValue && otherValue && selfValue !== otherValue) {
+        state.errors = ['两次密码输入不一致']
+      } else {
+        state.errors = ['']
+      }
+    })
+    setFieldState(selfName, state => {
+      if (selfValue && otherValue && selfValue !== otherValue) {
+        state.errors = ['两次密码输入不一致']
+      } else {
+        state.errors = ['']
+      }
+    })
+  })
+}
+
+let timeChange: any;  // 定时器
+
+const actions = createFormActions()
+
+const UserForgetPwd = () => {
+  const [current, setCurrent] = useState(0)
+  const [subStep, setSubStep] = useState(false)
+  const stepList = [
+    { title: '填写信息', key: 'message', name: 'message' },
+    { title: '完善资料', key: 'over', name: 'over' },
+    { title: '等待审核', key: 'wait', name: 'wait' },
+    { title: '注册成功', key: 'success', name: 'success' },
+  ]
+
+  const [time, setTime] = useState(5); // timer
+  // useEffect(() => {
+  //   clearInterval(timeChange)
+  //   handleRegisterTypeList()
+  // }, [])
+  const [asyncSchema, setAsyncSchema] = useState(() => {
+    return schemas[`schema${current}`]
+  })
+  useEffect(() => {
+    setAsyncSchema(schemas[`schema${current}`])
+    if(current === 2) runTimerJump()
+  }, [current, actions])
+  useEffect(() => {
+    if(time === 0){
+      clearInterval(timeChange)
+      setTime(60)
+      history.push('/user/login')
+      console.log('执行登录跳转！')
+    }
+  }, [time])
+  const runTimerJump = () => {
+    timeChange = setInterval(() => setTime(t => --t), 1000)
+  }
+
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e;
+    }
+    return e && e.fileList;
+  }
+
+  const checkoutFile = (rule: any, value: any) => {
+    if(value && value.length){
+      let length = value.length
+      let obj = value[length-1]
+      const isLt5M = obj.size / 1024 / 1024 < 5;
+      if (isLt5M) {
+        return Promise.resolve();
+      }else{
+        return Promise.reject('附件大小不能超过5M!');
+      }
+    }else{
+      return Promise.reject();
+    }
+  }
+
+  const beforeUpload = (file: any) => {
+    const isLt5M = file.size / 1024 / 1024 < 5;
+    if (!isLt5M) {
+      message.error('附件大小不能超过5M!');
+    }
+    console.log(isLt5M)
+    return isLt5M;
+  }
+
+  const {text, isActive, start} = useCountDown({
+    maxTime: 60,
+    minTime: 0,
+    initText: '获取验证码',
+    onEnd: () => {},
+    decayRate: 1,
+    delay: 1 * 1000
+  })
+
+  const handleActionBtn = () => {
+    // 校验后触发跳转
+    actions.submit(data => {
+      actions.dispatch('onFormStepNext', {})
+      formCache = Object.assign({}, formCache, data)
+    }).then(() => {
+      setCurrent(current + 1)
+    })
+  }
+
+  const nextStepAction = () => {
+    actions.submit().then(data => {
+      const { values } = data
+      formCache = Object.assign({}, values, formCache)
+      const { businessTypeId, typeId } = values
+      PublicApi.getMemberMenuRegisterDetail({
+        businessTypeId,
+        memberTypeId: typeId
+      }).then(res => {
+        const { data } = res
+        // 动态渲染第三步
+        setAsyncSchema(transFormSchema(data))
+        setSubStep(true)
+      })
+    })
+  }
+
+  // @todo 注册成功后 交互功能未完成
+  const submitForm = () => {
+    actions.submit().then(data => {
+      const { values } = data
+      formCache = Object.assign({}, values, formCache)
+      // 写死传入的区号
+      formCache.countryCode = '+86'
+      const params = omit(formCache, ['isRead', 'confirmPassword'])
+      PublicApi.postMemberRegister(params).then(() => {
+        actions.dispatch('onFormStepNext', {})
+        setCurrent(current + 1)
+      })
+    })
+  }
+
+  return (
+    <div className={cx(styles.register, globalStyles.lingxiBusinessContent1024)}>
+      <h3>找回密码</h3>
+      <div className={cx(styles.registerBox, globalStyles.lingxiBusinessMarginContent)}>
+        <NiceForm
+          id='registerForm'
+          schema={asyncSchema}
+          actions={actions}
+          components={{
+            CustomInput
+          }}
+          effects={() => {
+            useLinkageValidateEffects()
+          }}
+          expressionScope={{
+            current: false,
+            phoneBefore: <div className={styles.formBefore}>+86</div>,
+            smsCodeAfter: <Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} size='large' onClick={start}>{text}</Button>,
+            checkBoxChildren: <span style={{fontSize: 12}}>阅读并同意<span className='commonPickColor'>《会员服务协议》《法律条款》《隐私政策》</span></span>,
+            memberTypeTitle: <span className={styles.commonPanelTitle}>请选择您的身份</span>,
+            businessTypeTitle: <span className={styles.commonPanelTitle}>请选择您要开展的业务</span>,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserForgetPwd
\ No newline at end of file

src/pages/user/index.less

@@ -13,6 +13,11 @@
   padding: 141px 0 102px;
 }
 
+.readyLogin {
+  text-align: center;
+  margin-top: 24px;
+}
+
 .loginMain {
   position: relative;
   background: @white;

src/pages/user/register.tsx

@@ -235,6 +235,7 @@ const UserRegistry = () => {
               </p>
             </div>
           }
+          <p className={styles.readyLogin}>已有平台账号? <Link to="/user/login">去登陆</Link></p>
       </div>
     </div>
   )

src/pages/user/schema/index.ts

@@ -162,6 +162,38 @@ export const registerStep1Schema: ISchema = {
   }
 }
 
+
+// 忘记密码 TODO
+export const forgetPwdSchema: ISchema = {
+  type: 'object',
+  properties: {
+    FORGET_PWD: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      "x-component-props": {
+        className: 'registerForm',
+        full: true
+      },
+      properties: {
+        email: {
+          type: 'string',
+          "x-rules": [
+            {
+              pattern: PATTERN_MAPS.email,
+              message: '请输入正确的邮箱'
+            }
+          ],
+          "x-component-props": {
+            placeholder: '请输入你的邮箱（选填）',
+            size: 'large',
+            type: 'email'
+          }
+        },
+      }
+    }
+  }
+}
+
 export default {
   schema0: registerStep0Schema,
   schema1: registerStep1Schema