Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

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

@@ -12,6 +12,8 @@ import { isDev } from '@/constants'
 import { setup } from '@formily/antd-components';
 import { getRouters, getAuth, asyncRouter, setAuth, setRouters, removeAuth, removeRouters } from './utils/auth';
 import { PublicApi } from './services/api';
+// 全局注册虚拟组件
+import '@/components/NiceForm/public'
 
 setup()
 
@@ -19,6 +21,7 @@ setup()
 const userLoginLists = [
   '/user/login',
   '/user/register',
+  '/user/forget'
 ]
 // let routeAuthUrls: any[] = []
 // 路由白名单

src/components/NiceForm/index.tsx

@@ -4,7 +4,6 @@ import SchemaForm, {
 } from '@formily/antd';
 import { Input } from '@formily/antd-components';
 import { Button, Space, Row, Col } from 'antd';
-import styled from 'styled-components'
 import CustomUpload from './components/CustomUpload';
 import CustomStatus from './components/CustomStatus';
 import CustomAddArray from './components/CustomAddArray';
@@ -25,62 +24,9 @@ import SearchSelect from './components/SearchSelect';
 import TableTagList from './components/TableTagList';
 import './index.less'
 import { Checkbox } from '@formily/antd-components';
-import cx from 'classnames'
 
 export interface NiceFormProps extends IAntdSchemaFormProps {}
 
-const RowLayout = styled(props => <Row justify='end' {...props}/>)`
-  .mega-layout-item {
-    margin-bottom: 20px !important;
-  }
-  .mega-layout-container {
-    margin-bottom: 0;
-  }
-`
-
-const renderCol = (schema, isLast) => {
-  const { flexcol = {} } = schema['x-component-props']
-  return <Col style={isLast ? {} : {marginRight: 24}} {...flexcol} key={schema.path}>
-    <SchemaField schema={schema.toJSON()} path={schema.path}/>
-  </Col>
-}
-
-// 自定义flex布局容器
-registerVirtualBox('flex-box', props => {
-  const childProperties = props.schema.getOrderProperties()
-  const { title, required } = props.props
-  const {labelcol, wrappercol} = props.schema.getExtendsComponentProps()
-  return <Row>
-      { title && <Col span={labelcol} className={cx(required ? 'flex-layout-label-required' : '')}>{title}</Col>}
-      <Col span={wrappercol}>
-        <Row>
-          {
-            childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
-          }
-        </Row>
-      </Col>
-  </Row>
-})
-
-registerVirtualBox('flex-layout', (_props) => {
-  const { children, props } = _props
-  const rowStyle = props['x-component-props'] ? props['x-component-props'].rowStyle : {}
-  const colStyle = props['x-component-props'] ? props['x-component-props'].colStyle : {}
-  return (
-    <RowLayout style={rowStyle}>
-      {
-        children.map((v, i) => <Col style={colStyle} key={i}>{v}</Col>)
-      }
-    </RowLayout>
-  )
-})
-registerVirtualBox('empty-layout', (_props) => {
-  const { children, props } = _props
-  return (
-    <div>{children}</div>
-  )
-})
-
 const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
 const SchemaButton = createVirtualBox('schemaButton', Button)
 const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)

src/components/NiceForm/public/index.tsx

+// 全局注册虚拟布局组件
+import React from 'react'
+import { registerVirtualBox, SchemaField } from "@formily/antd"
+import { Col, Row } from 'antd'
+import cx from 'classnames'
+import styled from 'styled-components'
+
+const RowLayout = styled(props => <Row justify='end' {...props}/>)`
+  .mega-layout-item {
+    margin-bottom: 20px !important;
+  }
+  .mega-layout-container {
+    margin-bottom: 0;
+  }
+`
+
+const renderCol = (schema, isLast) => {
+  const { flexcol = {} } = schema['x-component-props']
+  return <Col style={isLast ? {} : {marginRight: 24}} {...flexcol} key={schema.path}>
+    <SchemaField schema={schema.toJSON()} path={schema.path}/>
+  </Col>
+}
+// 自定义flex布局容器
+registerVirtualBox('flex-box', props => {
+  const childProperties = props.schema.getOrderProperties()
+  const { title, required } = props.props
+  const {labelcol, wrappercol} = props.schema.getExtendsComponentProps()
+  return <Row>
+      { title && <Col span={labelcol} className={cx(required ? 'flex-layout-label-required' : '')}>{title}</Col>}
+      <Col span={wrappercol}>
+        <Row>
+          {
+            childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
+          }
+        </Row>
+      </Col>
+  </Row>
+})
+
+registerVirtualBox('flex-layout', (_props) => {
+  const { children, props } = _props
+  const rowStyle = props['x-component-props'] ? props['x-component-props'].rowStyle : {}
+  const colStyle = props['x-component-props'] ? props['x-component-props'].colStyle : {}
+  return (
+    <RowLayout style={rowStyle}>
+      {
+        children.map((v, i) => <Col style={colStyle} key={i}>{v}</Col>)
+      }
+    </RowLayout>
+  )
+})
+registerVirtualBox('empty-layout', (_props) => {
+  const { children, props } = _props
+  return (
+    <div>{children}</div>
+  )
+})
\ No newline at end of file

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