update 个人中心

Api/Ewide.Core/Service/User/SysUserService.cs

@@ -466,7 +466,7 @@ namespace Ewide.Core.Service
         ///<summary>
         ///发送验证码
         /// </summary>
-        [HttpPost("/sysUser/SendCode")]
+        [HttpPost("/sysUser/sendCode")]
         public async Task<dynamic> SendCode(Usermailphone input)
         {
             var Orgcode_Key = "ewide_Orgcode";
@@ -540,7 +540,7 @@ namespace Ewide.Core.Service
         ///<summary>
         ///检验验证码并且绑定
         /// </summary>
-        [HttpPost("/sysUser/CheckBindcode")]
+        [HttpPost("/sysUser/checkBindcode")]
         public async Task<dynamic> CheckBindcode(Usermailphone input)
         {
             var Orgcode_Key = "ewide_Orgcode";

web-react/package.json

@@ -20,6 +20,7 @@
     "photoswipe": "^4.1.3",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
+    "react-cropper": "^2.1.8",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-monaco-editor": "^0.43.0",
@@ -44,6 +45,7 @@
     "rules": {
       "eqeqeq": "off",
       "no-unused-vars": "off",
+      "no-sparse-arrays": "off",
       "array-callback-return": "off",
       "jsx-a11y/anchor-is-valid": "off"
     }

web-react/src/assets/style/lib/anchor.less

@@ -9,6 +9,3 @@
   border-radius: 0;
   background-color: @primary-color;
 }
-.ant-anchor-link-active {
-  background: linear-gradient(90deg, #fff, transparent);
-}

web-react/src/assets/style/lib/form.less

@@ -220,6 +220,23 @@
       color: fade(@black, 50%);
     }
   }
+  &.yo-form--no-border {
+    .ant-form-item {
+      padding: @padding-md 0;
+
+      border-right: 0;
+      border-left: 0;
+      &:first-child {
+        border-top: 0;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+    .yo-form-group {
+      margin-bottom: 0;
+    }
+  }
 }
 .yo-modal-form {
   .ant-modal-body {

web-react/src/common/api/requests/sys/userManage.js

@@ -78,12 +78,12 @@ const urls = {
     /**
     * 发送验证码
     */
-    SendCode: ['/sysUser/SendCode', 'post'],
+    sysUserSendCode: ['/sysUser/sendCode', 'post'],
 
     /**
     * 绑定/验证
     */
-    CheckBindcode: ['/sysUser/CheckBindcode', 'post'],
+    sysUserCheckBindcode: ['/sysUser/checkBindcode', 'post'],
 
 }
 

web-react/src/components/container/index.jsx

@@ -1,29 +1,23 @@
 import React, { Component } from 'react'
 
 export default class Container extends Component {
-
     getMode(mode) {
         const c = 'container'
-        switch (mode) {
+        const modes = ['xxs', 'xs', 'sm', 'md', 'fluid']
-            case 'sm':
+        if (modes.includes(mode)) {
-                return c + '-sm'
+            return `${c}-${mode}`
-            case 'md':
-                return c + '-md'
-            case 'fluid':
-                return c + '-fluid'
-            default:
-                return c
         }
+        return c
     }
 
     render() {
-        let className = this.getMode(this.props.mode)
+        const { mode, className, children } = this.props
-        if (this.props.className) {
+
-            className += ` ${this.props.className}`
+        let containerName = this.getMode(mode)
+        if (className) {
+            containerName = [containerName, className].join(' ')
         }
 
-        return (
+        return <section className={containerName}>{children}</section>
-            <section className={className}>{this.props.children}</section>
-        )
     }
 }

web-react/src/components/image/index.jsx

@@ -3,7 +3,7 @@ import { Avatar } from 'antd'
 import { isEqual } from 'lodash'
 import { PreviewFileBase64 } from 'util/file'
 
-const getSrc = async (id) => {
+const getSrc = async id => {
     if (id) {
         const base64 = await PreviewFileBase64(id)
         return base64
@@ -12,9 +12,8 @@ const getSrc = async (id) => {
 }
 
 export default class Image extends Component {
-
     state = {
-        src: ''
+        src: '',
     }
 
     id = ''
@@ -25,9 +24,9 @@ export default class Image extends Component {
         this.setSrc()
     }
 
-    shouldComponentUpdate(props) {
+    shouldComponentUpdate(props, state) {
         // props变更或state.src变更时进行渲染
-        return !isEqual(this.props, props) || !this.state.src
+        return !isEqual(this.props, props) || this.state.src !== state.src
     }
 
     componentDidUpdate() {
@@ -46,13 +45,9 @@ export default class Image extends Component {
 
     render() {
         if (this.props.type === 'avatar') {
-            return (
+            return <Avatar src={this.state.src} {...this.props} />
-                <Avatar src={this.state.src} {...this.props} />
-            )
         } else {
-            return (
+            return <img src={this.state.src} {...this.props} alt="" />
-                <img src={this.state.src} {...this.props} alt="" />
-            )
         }
     }
 }

web-react/src/components/index.js

@@ -1,4 +1,4 @@
-export { default as AntIcon } from 'components/ant-icon'
+export { default as AntIcon } from './ant-icon'
 export { default as AuthorityView } from './authority-view'
 export { default as Auth } from './authorized'
 export { default as ColorSelector } from './form/color-selector'

web-react/src/pages/system/account/base.jsx

@@ -0,0 +1,186 @@
+import React, { Component } from 'react'
+import { Button, Card, Col, Descriptions, Modal, Row, Spin, Tooltip, Upload } from 'antd'
+import { AntIcon, Image } from 'components'
+import { Cropper } from 'react-cropper'
+import 'cropperjs/dist/cropper.css'
+import { BlobToFile } from 'util/file'
+
+import './base.less'
+import { api } from 'common/api'
+
+export default class base extends Component {
+    state = {
+        img: true,
+
+        cropperVisible: false,
+        loadingAvatar: false,
+    }
+
+    cropper = React.createRef()
+
+    avatarFile = null
+
+    async onOpenAvatarCropper() {
+        this.setState({ cropperVisible: true })
+    }
+
+    onCloseAvatarCropper() {
+        this.setState({ cropperVisible: false }, () => {
+            setTimeout(() => {
+                const cropper = this.cropper.current && this.cropper.current.cropper
+                if (cropper) {
+                    cropper.destroy()
+                }
+                this.avatarFile = null
+                this.setState({ img: true })
+            }, 300)
+        })
+    }
+
+    onUploadAvatar() {
+        this.setState({ loadingAvatar: true })
+        const canvas = this.cropper.current.cropper.getCroppedCanvas()
+        canvas.toBlob(async data => {
+            try {
+                const file = BlobToFile(data, this.avatarFile.name, this.avatarFile.type)
+                const fd = new FormData()
+                fd.append('file', file)
+                const { data: avatar } = await api.sysFileInfoUpload(fd)
+                await api.sysUserUpdateInfo({ avatar })
+                this.onCloseAvatarCropper()
+                this.props.loadData()
+            } finally {
+                this.setState({ loadingAvatar: false })
+            }
+        })
+    }
+
+    render() {
+        const { user } = this.props
+
+        const { img, cropperVisible, loadingAvatar } = this.state
+
+        const cropper = this.cropper.current && this.cropper.current.cropper
+
+        return (
+            <>
+                <Card title="我的信息">
+                    <div className="yo-avatar-info">
+                        <Image id={user.avatar} type="avatar" size={128} />
+                        <div
+                            onClick={() => this.onOpenAvatarCropper()}
+                            className="yo-avatar-info--cover"
+                        >
+                            <AntIcon type="sync" />
+                        </div>
+                    </div>
+                    <br />
+                    <Descriptions column={1} labelStyle={{ width: '100px' }}>
+                        <Descriptions.Item label="用户名">{user.name}</Descriptions.Item>
+                        <Descriptions.Item label="昵称">{user.nickName}</Descriptions.Item>
+                        <Descriptions.Item label="帐号">{user.account}</Descriptions.Item>
+                        <Descriptions.Item label="性别">{user.sex}</Descriptions.Item>
+                        <Descriptions.Item label="生日">
+                            {user.birthday &&
+                                (typeof user.birthday === 'string'
+                                    ? user.birthday
+                                    : user.birthday.format('YYYY-MM-DD'))}
+                        </Descriptions.Item>
+                    </Descriptions>
+                </Card>
+                <Modal
+                    visible={cropperVisible}
+                    width={800}
+                    footer={false}
+                    destroyOnClose
+                    onCancel={() => this.onCloseAvatarCropper()}
+                >
+                    <Spin spinning={loadingAvatar} indicator={<AntIcon type="loading" />}>
+                        <Row gutter={16} align="middle">
+                            <Col span={12}>
+                                <div className="yo-avatar-cropper">
+                                    <Cropper
+                                        ref={this.cropper}
+                                        src={img}
+                                        style={{ width: '100%', height: 240 }}
+                                        cropBoxResizable={false}
+                                        aspectRatio={1}
+                                        preview=".yo-avatar-preview"
+                                    />
+                                </div>
+                            </Col>
+                            <Col span={12}>
+                                <div className="yo-avatar-preview" />
+                            </Col>
+                            <Col span={12} className="mt-md text-center">
+                                <Upload
+                                    beforeUpload={file => {
+                                        this.avatarFile = file
+                                        const reader = new FileReader()
+                                        reader.readAsDataURL(file)
+                                        reader.onload = () => {
+                                            this.setState({ img: reader.result })
+                                        }
+                                        return false
+                                    }}
+                                    showUploadList={false}
+                                    className="mr-xs"
+                                >
+                                    <Button type="primary" icon={<AntIcon type="picture" />}>
+                                        选择图片
+                                    </Button>
+                                </Upload>
+
+                                <Button.Group>
+                                    <Tooltip placement="bottom" title="放大">
+                                        <Button
+                                            disabled={!cropper}
+                                            type="text"
+                                            onClick={() => cropper.zoom(0.1)}
+                                            icon={<AntIcon type="zoom-in" />}
+                                        />
+                                    </Tooltip>
+                                    <Tooltip placement="bottom" title="缩小">
+                                        <Button
+                                            disabled={!cropper}
+                                            type="text"
+                                            onClick={() => cropper.zoom(-0.1)}
+                                            icon={<AntIcon type="zoom-out" />}
+                                        />
+                                    </Tooltip>
+                                    <Tooltip placement="bottom" title="左旋">
+                                        <Button
+                                            disabled={!cropper}
+                                            type="text"
+                                            onClick={() => cropper.rotate(-90)}
+                                            icon={<AntIcon type="undo" />}
+                                        />
+                                    </Tooltip>
+                                    <Tooltip placement="bottom" title="右旋">
+                                        <Button
+                                            disabled={!cropper}
+                                            type="text"
+                                            onClick={() => cropper.rotate(90)}
+                                            icon={<AntIcon type="redo" />}
+                                        />
+                                    </Tooltip>
+                                </Button.Group>
+                            </Col>
+                            <Col span={12} className="mt-md text-center">
+                                <Button
+                                    disabled={!cropper}
+                                    type="primary"
+                                    className="mr-xs"
+                                    onClick={() => this.onUploadAvatar()}
+                                >
+                                    确认
+                                </Button>
+                                <Button onClick={() => this.onCloseAvatarCropper()}>取消</Button>
+                            </Col>
+                        </Row>
+                    </Spin>
+                </Modal>
+            </>
+        )
+    }
+}

web-react/src/pages/system/account/base.less

@@ -0,0 +1,51 @@
+@import (reference) '~assets/style/app.less';
+.yo-avatar-info {
+  position: relative;
+
+  overflow: hidden;
+
+  width: 128px;
+  margin: 0 auto;
+
+  border-radius: 50%;
+  &--cover {
+    font-size: @font-size-lg * 2;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    cursor: pointer;
+    transition: @animation-duration-slow;
+
+    opacity: 0;
+    color: @white;
+    background-color: fade(@black, 50%);
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+.yo-avatar-cropper {
+  overflow: hidden;
+
+  border-radius: @border-radius-base;
+  background-color: #ccc;
+}
+.yo-avatar-preview {
+  overflow: hidden;
+
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+
+  border-radius: 50%;
+  background: #ccc;
+}

web-react/src/pages/system/account/index.jsx

@@ -1,41 +1,113 @@
 import React, { Component } from 'react'
-import { Anchor, Form, Input, InputNumber, Spin } from 'antd'
+import ReactDOM from 'react-dom'
-import { AntIcon, Container, IconSelector } from 'components'
+import { Anchor, Card, Col, Row, Spin } from 'antd'
-import { cloneDeep } from 'lodash'
+import { AntIcon, Container } from 'components'
-import Safety from './setting/satety/index'
+import moment from 'moment'
+import store from 'store'
+import { api } from 'common/api'
+
+import Base from './base'
 import Info from './setting/info'
-import nav from 'store/reducer/nav'
+import Safety from './setting/satety'
+
+const { getState, dispatch, subscribe } = store
+
+const navs = [
+    { title: '基本信息', component: Info },
+    { title: '安全设置', component: Safety },
+]
 
 export default class index extends Component {
-    state = {}
+    state = {
+        loading: false,
+        user: getState('user'),
+    }
+
+    container = window
+
+    constructor(props) {
+        super(props)
+
+        this.unsubscribe = subscribe('user', user => {
+            this.setState({ user })
+        })
+    }
+
+    componentDidMount() {
+        this.loadData()
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe()
+    }
+
+    loadData = async () => {
+        this.setState({ loading: true })
+        try {
+            const { data } = await api.getLoginUser()
+            if (data.birthday) {
+                data.birthday = moment(data.birthday)
+            }
+            dispatch({
+                type: 'SET_USER_ACCOUNT',
+                user: data,
+            })
+        } finally {
+            this.setState({ loading: false })
+        }
+    }
+
+    setContainer = container => {
+        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
+    }
 
     render() {
-        // let navs = [
+        const { loadData } = this
-        //     {
+
-        //         title: '我的信息',
+        const { loading, user } = this.state
-        //         component: require('./setting/info'),
-        //     },
-        //     {
-        //         title: '安全设置',
-        //         component: require('./setting/satety'),
-        //     },
-        // ]
 
-        // return (
-        //     <Container>
-        //         <Anchor offsetTop={16} className="yo-account--anchor">
-        //             {navs.map(item => {
-        //                 return <Anchor.Link key={item.title} title={nav.title}></Anchor.Link>
-        //             })}
-        //         </Anchor>
-        //         <br />
-        //     </Container>
-        // )
         return (
-            <div>
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />} ref={this.setContainer}>
-                <Info></Info>
+                <Container mode="fluid">
-                <Safety></Safety>
+                    <Row gutter={16}>
-            </div>
+                        <Col flex="200px">
+                            <Anchor
+                                getContainer={() => this.container}
+                                offsetTop={24}
+                                targetOffset={100}
+                                wrapperStyle={{ backgroundColor: 'transparent' }}
+                                onClick={e => e.preventDefault()}
+                            >
+                                {navs.map((item, i) => (
+                                    <Anchor.Link
+                                        key={i}
+                                        href={`#account-setting-${i}`}
+                                        title={item.title}
+                                    />
+                                ))}
+                            </Anchor>
+                        </Col>
+                        <Col flex="1">
+                            <Row gutter={16}>
+                                <Col xl={{ span: 10, order: 2 }}>
+                                    <br />
+                                    <Base user={user} loadData={loadData} />
+                                </Col>
+                                <Col xl={{ span: 14, order: 1 }}>
+                                    {navs.map((item, i) => (
+                                        <section key={i} id={`account-setting-${i}`}>
+                                            <br />
+                                            <Card title={item.title}>
+                                                <item.component user={user} loadData={loadData} />
+                                            </Card>
+                                        </section>
+                                    ))}
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                </Container>
+            </Spin>
         )
     }
 }

web-react/src/pages/system/account/setting/info.jsx

@@ -1,127 +1,87 @@
 import React, { Component } from 'react'
-import { Button, DatePicker, Form, Input, message, Radio, Spin } from 'antd'
+import { Button, DatePicker, Form, Input, message as Message, Radio } from 'antd'
+import { AntIcon } from 'components'
 import { api } from 'common/api'
-import { cloneDeep } from 'lodash'
-import { AntIcon, Container, IconSelector, Image } from 'components'
-import store from 'store'
 import moment from 'moment'
 
-const { getState } = store
-
 export default class index extends Component {
     state = {
-        info: getState('user'),
         saving: false,
-        loading: false,
     }
+
     form = React.createRef()
+
     componentDidMount() {
-        this.setState({
+        const { user } = this.props
-            loading: true,
+        if (user.birthday) {
-        })
+            user.birthday = moment(user.birthday)
-        api.getLoginUser()
+        }
-            .then(({ data }) => {
+        this.form.current.setFieldsValue(user)
-                delete data.apps
-                delete data.menus
-                this.setState({
-                    info: data,
-                })
-                let birthday = data.birthday
-                birthday = moment(birthday)
-                data = {
-                    ...data,
-                    birthday: birthday,
-                }
-                this.form.current.setFieldsValue(data)
-            })
-            .finally(() => {
-                this.setState({
-                    loading: false,
-                })
-            })
     }
-    onSvaeInfo(data) {
+
-        this.setState({
+    async onSvaeInfo() {
-            saving: true,
+        this.setState({ saving: true })
-        })
+        try {
-        let { birthday } = data.current.getFieldsValue()
+            await api.sysUserUpdateInfo(this.form.current.getFieldsValue())
-        let { nickName } = data.current.getFieldsValue()
+            await this.props.loadData()
-        let { sex } = data.current.getFieldsValue()
+            Message.success('更新个人信息成功')
-        let { tel } = data.current.getFieldsValue()
+        } finally {
-        api.sysUserUpdateInfo({
+            this.setState({ saving: false })
-            nickName: nickName,
+        }
-            birthday: birthday,
-            sex: sex,
-            tel: tel,
-        }).then(() => {
-            message.success('更新个人信息成功')
-            this.setState({
-                saving: false,
-            })
-        })
     }
     onAvatarStart() {}
 
     render() {
-        const { info } = this.state
+        const { user } = this.props
+
+        const { saving } = this.state
+
         return (
-            <Container mode="xxs">
+            <>
-                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                <Form className="yo-form yo-form--no-border" ref={this.form}>
-                    <Form className="yo-form" ref={this.form}>
+                    <div className="yo-form-group yo-form--short">
-                        <h4 className="h4">我的信息</h4>
+                        <Form.Item label="昵称" name="nickName">
-                        <div className="yo-avatar-info">
+                            <Input autoComplete="off" placeholder="请输入昵称" />
-                            <Image
+                        </Form.Item>
-                                id={info.avatar}
+                        <Form.Item label="用户名">
-                                size={128}
+                            <span>{user.name}</span>
-                                icon={<AntIcon type="user" />}
+                        </Form.Item>
-                                type="avatar"
+                        <Form.Item label="生日" name="birthday">
-                            />
+                            <DatePicker className="w-100-p" placeholder="请选择生日" />
-                        </div>
+                        </Form.Item>
-                        <br />
+                        <Form.Item label="性别" name="sex">
-                        <div className="yo-form-group yo-form--short">
+                            <Radio.Group>
-                            <Form.Item label="昵称" name="nickName">
+                                <Radio.Button value={0}>
-                                <Input placeholder="请输入昵称"></Input>
+                                    <AntIcon className="mr-xxs" type="stop" />
-                            </Form.Item>
+                                    <span>保密</span>
-                            <Form.Item label="用户名">
+                                </Radio.Button>
-                                <span>{info.name}</span>
+                                <Radio.Button value={1}>
-                            </Form.Item>
+                                    <AntIcon
-                            <Form.Item label="生日" name="birthday">
+                                        style={{ color: '#1890ff' }}
-                                <DatePicker
+                                        className="mr-xxs"
-                                    onChange={this.onChange}
+                                        type="man"
-                                    className="w-100-p"
+                                    />
-                                    placeholder="请选择生日"
+                                    <span>男</span>
-                                />
+                                </Radio.Button>
-                            </Form.Item>
+                                <Radio.Button value={2}>
-                            <Form.Item label="性别" name="sex">
+                                    <AntIcon
-                                <Radio.Group>
+                                        style={{ color: '#eb2f96' }}
-                                    <Radio.Button value={0}>
+                                        className="mr-xxs"
-                                        <AntIcon className="mr-xxs" type="stop" />
+                                        type="woman"
-                                        <span>保密</span>
+                                    />
-                                    </Radio.Button>
+                                    <span>女</span>
-                                    <Radio.Button value={1}>
+                                </Radio.Button>
-                                        <AntIcon color="#1890ff" className="mr-xxs" type="man" />
+                            </Radio.Group>
-                                        <span>男</span>
+                        </Form.Item>
-                                    </Radio.Button>
+                        <Form.Item label="电话" name="tel">
-                                    <Radio.Button value={2}>
+                            <Input autoComplete="off" placeholder="请输入电话" />
-                                        <AntIcon color="#eb2f96" className="mr-xxs" type="woman" />
+                        </Form.Item>
-                                        <span>女</span>
+                    </div>
-                                    </Radio.Button>
+                </Form>
-                                </Radio.Group>
+                <Button loading={saving} onClick={() => this.onSvaeInfo()} block type="text">
-                            </Form.Item>
-                            <Form.Item label="电话" name="tel">
-                                <Input placeholder="请输入电话" />
-                            </Form.Item>
-                        </div>
-                    </Form>
-                </Spin>
-                <Button
-                    loading={this.state.saving}
-                    onClick={() => this.onSvaeInfo(this.form)}
-                    block
-                >
                     更新个人信息
                 </Button>
-            </Container>
+            </>
         )
     }
 }

web-react/src/pages/system/account/setting/satety/index.jsx

@@ -1,179 +1,126 @@
 import React, { Component } from 'react'
-import { Button, DatePicker, Form, Input, List, message as Message, Spin } from 'antd'
+import { List } from 'antd'
 import { api } from 'common/api'
-import { cloneDeep } from 'lodash'
+import { AntIcon, ModalForm, QueryTableActions } from 'components'
-import { AntIcon, Container, IconSelector, Image, ModalForm } from 'components'
-import store from 'store'
-import moment from 'moment'
-import Item from 'antd/lib/list/Item'
 import PasswordForm from './password'
+
 import Mail from './mail'
 import Phone from './phone'
-const { getState } = store
+
 const apiAction = {
-    update: api.sysUserUpdatePwd,
+    updatePwd: api.sysUserUpdatePwd,
 }
 
 export default class form extends Component {
-    state = {
+    updatePwdForm = React.createRef()
-        saving: false,
+    mailForm = React.createRef()
-        info: [],
+    mhoneForm = React.createRef()
-        loading: true,
+
-    }
+    onOpen(modal) {
-    form = React.createRef()
+        modal.current.open()
-    // 新增窗口实例
-    updateForm = React.createRef()
-    MailForm = React.createRef()
-    PhoneForm = React.createRef()
-    /**
-     * 对表格上的操作进行统一处理
-     * [异步]
-     * @param {*} action
-     * @param {*} successMessage
-     */
-    async onAction(action, successMessage) {
-        const { onLoading, onLoaded, onReloadData } = this.table.current
-        onLoading()
-        try {
-            if (action) {
-                await action
-            }
-            if (successMessage) {
-                Message.success(successMessage)
-            }
-            onReloadData()
-        } catch {
-            onLoaded()
-        }
     }
 
-    /**
-     * 打开新增/编辑弹窗
-     * @param {*} modal
-     * @param {*} record
-     */
-    onOpen(modal, record) {
-        modal.current.open({
-            record,
-        })
-    }
-
-    componentDidMount() {
-        api.getLoginUser().then(({ data }) => {
-            this.setState({
-                loading: true,
-            })
-            let index = []
-            //密码
-            index.push({
-                title: '登录密码',
-                description:
-                    '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。',
-                extra: (
-                    <div>
-                        当前密码强度为:
-                        {
-                            [
-                                <span class="text-error">弱</span>,
-                                <span class="text-warning">中</span>,
-                                <span class="text-success">强</span>,
-                            ][data.securityLevel - 1]
-                        }
-                    </div>
-                ),
-                done: true,
-                action: () => {
-                    this.onOpen(this.updateForm)
-                },
-            })
-            //手机
-            index.push({
-                title: '手机绑定(发送验证码到手机,未实现)',
-                description: (
-                    <div>
-                        手机号可以直接用于登录、找回密码等。
-                        {data.phone && (
-                            <span>
-                                您已绑定了手机<b>{data.phone}</b>
-                            </span>
-                        )}
-                    </div>
-                ),
-                done: !!data.phone,
-                action: () => {
-                    this.onOpen(this.PhoneForm)
-                },
-            })
-            //邮箱
-            index.push({
-                title: '邮箱绑定(发送验证码到邮箱,未实现)',
-                description: (
-                    <div>
-                        安全邮箱可以直接用于登录、找回密码等。
-                        {data.email && (
-                            <span>
-                                您已绑定了邮箱<b>{data.email}</b>
-                            </span>
-                        )}
-                    </div>
-                ),
-                done: !!data.email,
-                action: () => {
-                    this.onOpen(this.MailForm)
-                },
-            })
-            this.setState({
-                info: index,
-                loading: false,
-            })
-        })
-    }
     render() {
+        const { user, loadData } = this.props
+
+        const index = []
+        //密码
+        index.push({
+            title: '登录密码',
+            description:
+                '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。',
+            // extra: (
+            //     <div>
+            //         当前密码强度为:
+            //         {
+            //             [
+            //                 <span class="text-error">弱</span>,
+            //                 <span class="text-warning">中</span>,
+            //                 <span class="text-success">强</span>,
+            //             ][user.securityLevel - 1]
+            //         }
+            //     </div>
+            // ),
+            done: true,
+            action: () => {
+                this.onOpen(this.updatePwdForm)
+            },
+        })
+        //手机
+        index.push({
+            title: '手机绑定',
+            description: (
+                <div>
+                    手机号可以直接用于登录、找回密码等。
+                    {user.phone && (
+                        <>
+                            您已绑定了手机<b>{user.phone}</b>
+                        </>
+                    )}
+                </div>
+            ),
+            done: !!user.phone,
+            action: () => {
+                this.onOpen(this.mhoneForm)
+            },
+        })
+        //邮箱
+        index.push({
+            title: '邮箱绑定',
+            description: (
+                <div>
+                    安全邮箱可以直接用于登录、找回密码等。
+                    {user.email && (
+                        <>
+                            您已绑定了邮箱<b>{user.email}</b>
+                        </>
+                    )}
+                </div>
+            ),
+            done: !!user.email,
+            action: () => {
+                this.onOpen(this.mailForm)
+            },
+        })
+
         return (
-            <Container mode="xxs">
+            <>
-                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                <List
-                    <div className="yo-form">
+                    dataSource={index}
-                        <h4 className="h4">安全设置</h4>
+                    itemLayout="vertical"
-                    </div>
+                    renderItem={item => (
-                    <List
+                        <List.Item
-                        dataSource={this.state.info}
+                            extra={item.extra}
-                        bordered
+                            actions={[
-                        item-layout="vertical"
+                                item.done == true ? (
-                        renderItem={item => (
+                                    <QueryTableActions>
-                            <List.Item extra={item.extra} slot="renderItem" slot-scope="item">
+                                        <span className="text-success">
-                                {item.done == true ? (
-                                    <>
-                                        <span className="text-success" slot="actions">
                                             <AntIcon className="mr-xxs" type="check-circle" />
                                             已设置
                                         </span>
-                                        <a onClick={item.action} slot="actions">
+                                        <a onClick={item.action}>修改</a>
-                                            修改
+                                    </QueryTableActions>
-                                        </a>
-                                    </>
                                 ) : (
-                                    <>
+                                    <QueryTableActions>
-                                        <span className="text-warning" slot="actions">
+                                        <span className="text-warning">
                                             <AntIcon className="mr-xxs" type="exclamation-circle" />
                                             未设置
                                         </span>
-                                        <a onClick={item.action} slot="actions">
+                                        <a onClick={item.action}>设置</a>
-                                            设置
+                                    </QueryTableActions>
-                                        </a>
+                                ),
-                                    </>
+                            ]}
-                                )}
+                        >
-                                <List.Item.Meta description={item.description} title={item.title} />
+                            <List.Item.Meta description={item.description} title={item.title} />
-                            </List.Item>
+                        </List.Item>
-                        )}
+                    )}
-                    />
+                />
-                    <br />
+                <ModalForm title={`更新密码`} action={apiAction.updatePwd} ref={this.updatePwdForm}>
-                    <ModalForm title={`更新密码`} action={apiAction.update} ref={this.updateForm}>
+                    <PasswordForm loadData={loadData} />
-                        <PasswordForm />
+                </ModalForm>
-                    </ModalForm>
+                <Phone ref={this.mhoneForm} loadData={loadData} />
-                    <Mail ref={this.MailForm} />
+                <Mail ref={this.mailForm} loadData={loadData} />
-                    <Phone ref={this.PhoneForm} />
+            </>
-                </Spin>
-            </Container>
         )
     }
 }

web-react/src/pages/system/account/setting/satety/mail.jsx

@@ -1,454 +1,376 @@
 import React, { Component } from 'react'
-import {
+import { Form, Input, Modal, Spin, Steps, Button, Row, Col, message as Message, Select } from 'antd'
-    Form,
+import { AntIcon } from 'components'
-    Input,
-    InputNumber,
-    Modal,
-    Spin,
-    Steps,
-    Button,
-    Row,
-    Col,
-    message,
-    Select,
-} from 'antd'
-import { AntIcon, Container, IconSelector } from 'components'
-import { cloneDeep, indexOf } from 'lodash'
 import { api } from 'common/api'
 import { COUNT_DWON_KEY } from 'common/storage'
-import { Option } from 'antd/lib/mentions'
+import store from 'store'
-import { set } from 'nprogress'
+import { cloneDeep } from 'lodash'
-import { getKeyThenIncreaseKey } from 'antd/lib/message'
 
-const initialValues = {
+const { getState } = store
-    orgcode: '',
+
-    target: '',
+const steps = [
-    code: '',
+    {
-    type: null,
+        title: '验证',
+    },
+    {
+        title: '绑定',
+    },
+]
+
+const reg = /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
+
+const initState = {
+    visible: false,
+    loading: false,
+
+    // 可用于验证的类型
+    types: [],
+    // 当前步骤
+    currentStep: 0,
+
+    nextDisabled: true,
+    // 正在发送验证码
+    sendingCode: false,
+    // 冷却时间
+    countDown: 0,
 }
-var tempcode = ''
+
-const { Step } = Steps
 export default class form extends Component {
-    state = {
+    state = cloneDeep(initState)
-        buttondisabled: true,
+
-        visible: false,
-        loading: false,
-        codeLoading: false,
-        current: 0,
-        countdown: 0,
-        sendOrNo: true,
-        type: [],
-    }
     form = React.createRef()
-    //发送验证码
+
-    sendcode(data) {
+    orgCode = ''
-        this.setState({
+
-            codeLoading: true,
+    //打开窗口
-        })
+    open = () => {
-        var reg = /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
+        this.setState({ visible: true })
-        let { target } = data.current.getFieldsValue()
+
-        let { type } = data.current.getFieldsValue()
+        this.showCountDown()
-        let { code } = data.current.getFieldsValue()
+
-        let { orgcode } = data.current.getFieldsValue()
+        const data = getState('user')
-        if (!reg.test(target) && type != '1' && type != '2') {
+        const types = []
-            message.warn('请输入正确的邮箱')
+        data.phone &&
-            this.setState({
+            types.push({
-                codeLoading: true,
+                title: `使用手机号${data.phone}进行验证`,
+                value: 1,
             })
-            return
+        data.email &&
-        }
+            types.push({
-        api.SendCode({
+                title: `使用邮箱${data.email}进行验证`,
-            target: target,
+                value: 2,
-            type: type,
-            code: code,
-            orgcode: orgcode,
-        })
-            .then(res => {
-                if (res.success) {
-                    this.addTime()
-                    this.showcountdown()
-                }
-            })
-            .finally(() => {
-                this.setState({
-                    codeLoading: false,
-                })
             })
+
+        this.setState({ types })
     }
-    //进入下一步
+
-    next(data) {
+    close() {
-        this.setState({
+        this.setState(cloneDeep(initState))
-            loading: true,
-        })
-        let { target } = data.current.getFieldsValue()
-        let { type } = data.current.getFieldsValue()
-        let { code } = data.current.getFieldsValue()
-        let { orgcode } = data.current.getFieldsValue()
-        tempcode = data.current.getFieldsValue()
-        let form = {
-            target: target,
-            type: type,
-            code: code,
-            orgcode: orgcode,
-        }
-        api.CheckBindcode(form)
-            .then(res => {
-                if (res.data) {
-                    window.localStorage.removeItem(COUNT_DWON_KEY)
-                    let current = this.state.current + 1
-                    this.setState({
-                        form: {
-                            ...form,
-                            type: null,
-                        },
-                        buttondisabled: true,
-                        current: current,
-                    })
-                }
-            })
-            .finally(() => {
-                this.setState({
-                    loading: false,
-                })
-            })
     }
+
     /**
      * 将倒计时添加入到本地
      */
     addTime() {
-        const now = Date.now()
+        const now = Date.now() + 60 * 1000
-        var date = now + 60 * 1000 + 500
+        window.localStorage.setItem(COUNT_DWON_KEY, now)
-        window.localStorage.setItem(COUNT_DWON_KEY, date)
     }
     /**
      * 显示倒计时
      */
-    showcountdown() {
+    showCountDown() {
-        let _this = this
+        const surplusTime = window.localStorage.getItem(COUNT_DWON_KEY)
-        var Furdate = window.localStorage.getItem(COUNT_DWON_KEY)
+        const nowTime = Date.now()
-        var nowdate = new Date().getTime()
+        if (surplusTime >= nowTime) {
-        if (Furdate >= nowdate) {
             this.setState({
-                sendOrNo: false,
+                countDown: parseInt((surplusTime - nowTime) / 1000),
-                countdown: parseInt((Furdate - nowdate) / 1000),
             })
             setTimeout(() => {
-                _this.showcountdown()
+                this.showCountDown()
             }, 1000)
         } else {
-            this.setState({
+            this.setState({ countDown: 0 })
-                sendOrNo: true,
-            })
         }
     }
-    //打开窗口
+
-    open = (data = {}) => {
+    //发送验证码
-        this.setState({ visible: true, loading: true })
+    async onSendCode() {
-        api.getLoginUser().then(({ data }) => {
+        const form = this.form.current
-            let index = []
+
-            data.phone &&
+        const valid = await form.validateFields()
-                index.push({
+        if (!valid) {
-                    Title: '使用手机号' + data.phone + '进行验证 ',
+            return
-                    Value: 1,
+        }
-                })
+
-            data.email &&
+        this.setState({ sendingCode: true })
-                index.push({
+
-                    Title: '使用邮箱' + data.email + '进行验证',
+        const data = form.getFieldsValue()
-                    Value: 2,
+        try {
-                })
+            await api.sysUserSendCode(data)
+            const typeName = data.type ? [, '手机', '邮箱'][data.type] : '手机'
+            Message.success(`已发送验证码到${typeName}，请注意查收`)
+            this.addTime()
+            this.showCountDown()
+        } finally {
+            this.setState({ sendingCode: false })
+        }
+    }
+
+    // 下一步
+    async onNext() {
+        this.setState({ loading: true })
+        const data = this.form.current.getFieldsValue()
+        this.orgCode = data.orgCode
+
+        try {
+            await api.sysUserCheckBindcode(data)
+            window.localStorage.removeItem(COUNT_DWON_KEY)
             this.setState({
-                type: index,
+                nextDisabled: true,
+                currentStep: this.state.currentStep + 1,
             })
-            if (index.length > 0) {
+        } finally {
-                this.form.current.setFieldsValue({
-                    type: index[0].Value,
-                })
-            }
             this.setState({ loading: false })
-        })
-    }
-    // 前一步
-    prev() {
-        window.localStorage.removeItem(COUNT_DWON_KEY)
-        let current = this.state.current - 1
-        this.setState({
-            current: current,
-        })
-    }
-    //完成
-    complete(data) {
-        let { target } = data.current.getFieldsValue()
-        let { code } = data.current.getFieldsValue()
-        let { orgcode } = tempcode
-        api.CheckBindcode({
-            target: target,
-            type: null,
-            code: code,
-            orgcode: orgcode,
-        }).then(res => {
-            if (res.data) {
-                window.localStorage.removeItem(COUNT_DWON_KEY)
-                message.success('改绑完成')
-                this.onResetFields()
-            }
-        })
-    }
-    onResetFields() {
-        setTimeout(() => {
-            this.setState({ visible: false })
-            this.setState({ current: 0 })
-            //window.localStorage.removeItem(COUNT_DWON_KEY)
-            /** 在这里可以初始化当前组件中其他属性 */
-            /* ... */
-        }, 300)
-    }
-    render() {
-        let steps = [
-            {
-                title: '验证',
-            },
-            {
-                title: '绑定',
-            },
-        ]
-        const close = () => {
-            this.setState({
-                visible: false,
-                current: 0,
-            })
         }
+    }
+
+    // 上一步
+    onPrev() {
+        window.localStorage.removeItem(COUNT_DWON_KEY)
+        this.setState({
+            currentStep: this.state.currentStep - 1,
+        })
+    }
+
+    //完成
+    async onComplete() {
+        this.setState({ loading: true })
+        try {
+            await api.sysUserCheckBindcode({
+                ...this.form.current.getFieldsValue(),
+                orgCode: this.orgCode,
+            })
+            await this.props.loadData()
+            window.localStorage.removeItem(COUNT_DWON_KEY)
+            Message.success('绑定邮箱成功')
+            this.close()
+        } finally {
+            this.setState({ loading: false })
+        }
+    }
+
+    renderForm() {
+        const { nextDisabled, sendingCode, countDown } = this.state
+
         return (
-            <Container mode="xxs">
+            <div className="yo-form-group">
-                <Modal
+                <Form
-                    footer={false}
+                    ref={this.form}
-                    onCancel={close}
+                    onValuesChange={(changedValues, allValues) => {
-                    destroyOnClose
+                        this.setState({
-                    visible={this.state.visible}
+                            nextDisabled: !(allValues.target && allValues.code),
-                    className="yo-modal-form"
+                        })
-                    title="绑定邮箱"
+                    }}
                 >
-                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <Form.Item
-                        <div className="yo-form">
+                        label="邮箱"
-                            {this.state.type.length !== 0 ? (
+                        name="target"
-                                <div className="yo-form-group">
+                        required={false}
-                                    <br />
+                        rules={[
-                                    <Row>
+                            { required: true, message: '请输入邮箱' },
-                                        <Col flex="1" />
+                            { pattern: reg, message: '邮箱格式错误' },
-                                        <Col flex="3">
+                        ]}
-                                            <Steps current={this.state.current}>
+                    >
-                                                {steps.map(item => (
+                        <Input autoComplete="off" placeholder="请输入邮箱" />
-                                                    <Steps.Step
+                    </Form.Item>
-                                                        key={item.title}
+                    <Form.Item label="验证码">
-                                                        title={item.title}
+                        <Row gutter={16} align="middle">
-                                                    />
+                            <Col flex="1">
-                                                ))}
+                                <Form.Item name="code" noStyle>
-                                            </Steps>
+                                    <Input autoComplete="off" placeholder="请输入验证码" />
-                                        </Col>
+                                </Form.Item>
-                                        <Col flex="1" />
+                            </Col>
-                                    </Row>
+                            <Col>
-                                    <br />
+                                {countDown ? (
-                                    <Form
+                                    <Button disabled>{countDown}秒后重新发送</Button>
-                                        ref={this.form}
+                                ) : (
-                                        initialValues={initialValues}
+                                    <Button onClick={() => this.onSendCode()} loading={sendingCode}>
-                                        onValuesChange={(changedValues, allValues) => {
+                                        发送验证码
-                                            this.setState({
+                                    </Button>
-                                                buttondisabled: !(
+                                )}
-                                                    allValues.orgcode ||
+                            </Col>
-                                                    (allValues.target && allValues.code)
+                        </Row>
-                                                ),
+                    </Form.Item>
-                                            })
+                </Form>
-                                        }}
+                <div className="text-center pt-md pb-md">
-                                    >
+                    <Button
-                                        <div>
+                        disabled={nextDisabled}
-                                            {this.state.current == 0 && (
+                        onClick={() => this.onComplete()}
-                                                <div>
+                        type="primary"
-                                                    <Form.Item label="选择验证方式" name="type">
+                    >
-                                                        <Select placeholder="请选择验证方式">
+                        绑定
-                                                            {this.state.type.map(item => (
+                    </Button>
-                                                                <Select.Option
+                </div>
-                                                                    key={item.Title}
+            </div>
-                                                                    value={item.Value}
+        )
-                                                                >
+    }
-                                                                    {item.Title}
+
-                                                                </Select.Option>
+    renderStepForm() {
-                                                            ))}
+        const { types, currentStep, sendingCode, countDown } = this.state
-                                                        </Select>
+
-                                                    </Form.Item>
+        return (
-                                                    <Form.Item label="验证码" name="orgcode">
+            <div className="yo-form-group">
-                                                        <Row gutter={16}>
+                <Row>
-                                                            <Col flex="1">
+                    <Col span={12} offset={6} className="pt-md pb-md">
-                                                                <Input placeholder="请输入验证码" />
+                        <Steps current={currentStep}>
-                                                            </Col>
+                            {steps.map(item => (
-                                                            <Col>
+                                <Steps.Step key={item.title} title={item.title} />
-                                                                {this.state.sendOrNo ? (
+                            ))}
-                                                                    <Button
+                        </Steps>
-                                                                        onClick={() => {
+                    </Col>
-                                                                            this.sendcode(this.form)
+                </Row>
-                                                                        }}
+                <Form
-                                                                    >
+                    ref={this.form}
-                                                                        <Spin
+                    onValuesChange={(changedValues, allValues) => {
-                                                                            spinning={
+                        this.setState({
-                                                                                this.state
+                            nextDisabled: !(
-                                                                                    .codeLoading
+                                allValues.orgCode ||
-                                                                            }
+                                (allValues.target && allValues.code)
-                                                                            indicator={
+                            ),
-                                                                                <AntIcon type="loading" />
+                        })
-                                                                            }
+                    }}
-                                                                        />
+                >
-                                                                        发送验证码
+                    {currentStep === 0 && (
-                                                                    </Button>
+                        <>
-                                                                ) : (
+                            <Form.Item
-                                                                    <Button disabled>
+                                label="选择验证方式"
-                                                                        {this.state.countdown}
+                                name="type"
-                                                                        秒后重新发送
+                                required={false}
-                                                                    </Button>
+                                rules={[{ required: true, message: '请选择一种验证方式' }]}
-                                                                )}
+                            >
-                                                            </Col>
+                                <Select placeholder="请选择验证方式">
-                                                        </Row>
+                                    {types.map(item => (
-                                                    </Form.Item>
+                                        <Select.Option key={item.value} value={item.value}>
-                                                </div>
+                                            {item.title}
-                                            )}
+                                        </Select.Option>
-                                            {this.state.current == 1 && (
+                                    ))}
-                                                <div>
+                                </Select>
-                                                    <Form.Item label="新邮箱号码" name="target">
+                            </Form.Item>
-                                                        <Input placeholder="请输入邮箱账号" />
+                            <Form.Item label="验证码">
-                                                    </Form.Item>
+                                <Row gutter={16}>
-                                                    <Form.Item label="验证码" name="code">
+                                    <Col flex="1">
-                                                        <Row gutter={16}>
+                                        <Form.Item name="orgCode" noStyle>
-                                                            <Col flex="1">
+                                            <Input autoComplete="off" placeholder="请输入验证码" />
-                                                                <Input placeholder="请输入六位验证码" />
-                                                            </Col>
-                                                            <Col>
-                                                                {this.state.sendOrNo ? (
-                                                                    <Button
-                                                                        onClick={() => {
-                                                                            this.sendcode(this.form)
-                                                                        }}
-                                                                    >
-                                                                        <Spin
-                                                                            spinning={
-                                                                                this.state
-                                                                                    .codeLoading
-                                                                            }
-                                                                            indicator={
-                                                                                <AntIcon type="loading" />
-                                                                            }
-                                                                        />
-                                                                        发送验证码
-                                                                    </Button>
-                                                                ) : (
-                                                                    <Button disabled>
-                                                                        {this.state.countdown}
-                                                                        秒后重新发送
-                                                                    </Button>
-                                                                )}
-                                                            </Col>
-                                                        </Row>
-                                                    </Form.Item>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </Form>
-                                    <br />
-                                    <div className="text-center">
-                                        {this.state.current == 0 && (
-                                            <>
-                                                <div>
-                                                    <Button
-                                                        onClick={() => this.next(this.form)}
-                                                        type="primary"
-                                                        disabled={this.state.buttondisabled}
-                                                    >
-                                                        下一步
-                                                    </Button>
-                                                </div>
-                                                <br />
-                                            </>
-                                        )}
-                                        {this.state.current == 1 && (
-                                            <>
-                                                {this.state.current > 0 && (
-                                                    <Button onClick={() => this.prev()}>
-                                                        前一步
-                                                    </Button>
-                                                )}
-                                                <Button
-                                                    disabled={this.state.buttondisabled}
-                                                    onClick={() => this.complete(this.form)}
-                                                    type="primary"
-                                                >
-                                                    完成
-                                                </Button>
-                                            </>
-                                        )}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div className="yo-form-group">
-                                    <Form
-                                        initialValues={initialValues}
-                                        ref={this.form}
-                                        onValuesChange={(changedValues, allValues) => {
-                                            this.setState({
-                                                buttondisabled: !(
-                                                    allValues.target && allValues.code
-                                                ),
-                                            })
-                                        }}
-                                    >
-                                        <Form.Item label="请输入邮箱" name="target">
-                                            <Input placeholder="请输入邮箱号码" />
                                         </Form.Item>
-                                        <Form.Item label="验证码" name="code">
+                                    </Col>
-                                            <Row gutter={16} align="middle">
+                                    <Col>
-                                                <Col flex="1">
+                                        {countDown ? (
-                                                    <Input placeholder="请输入验证码" />
+                                            <Button disabled>
-                                                </Col>
+                                                {countDown}
-                                                <Col>
+                                                秒后重新发送
-                                                    {this.state.sendOrNo ? (
-                                                        <Button
-                                                            onClick={() => {
-                                                                this.sendcode(this.form)
-                                                            }}
-                                                        >
-                                                            <Spin
-                                                                spinning={this.state.codeLoading}
-                                                                indicator={
-                                                                    <AntIcon type="loading" />
-                                                                }
-                                                            />
-                                                            发送验证码
-                                                        </Button>
-                                                    ) : (
-                                                        <Button disabled>
-                                                            {this.state.countdown}秒后重新发送
-                                                        </Button>
-                                                    )}
-                                                </Col>
-                                            </Row>
-                                        </Form.Item>
-                                    </Form>
-                                    <br />
-                                    <Row>
-                                        <Col flex="1" />
-                                        <Col flex="1" align="middle">
-                                            <Button
-                                                disabled={this.state.buttondisabled}
-                                                onClick={() => this.complete(this.form)}
-                                                type="primary"
-                                            >
-                                                绑定
                                             </Button>
-                                        </Col>
+                                        ) : (
-                                        <Col flex="1" />
+                                            <Button
-                                    </Row>
+                                                onClick={() => this.onSendCode()}
-                                    <br />
+                                                loading={sendingCode}
-                                </div>
+                                            >
-                            )}
+                                                发送验证码
-                        </div>
+                                            </Button>
-                    </Spin>
+                                        )}
-                </Modal>
+                                    </Col>
-            </Container>
+                                </Row>
+                            </Form.Item>
+                        </>
+                    )}
+                    {currentStep === 1 && (
+                        <>
+                            <Form.Item
+                                label="新邮箱"
+                                name="target"
+                                required={false}
+                                rules={[
+                                    { required: true, message: '请输入邮箱' },
+                                    { pattern: reg, message: '邮箱格式错误' },
+                                ]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入邮箱" />
+                            </Form.Item>
+                            <Form.Item label="验证码">
+                                <Row gutter={16}>
+                                    <Col flex="1">
+                                        <Form.Item name="code" noStyle>
+                                            <Input autoComplete="off" placeholder="请输入验证码" />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col>
+                                        {countDown ? (
+                                            <Button disabled>
+                                                {countDown}
+                                                秒后重新发送
+                                            </Button>
+                                        ) : (
+                                            <Button
+                                                onClick={() => this.onSendCode()}
+                                                loading={sendingCode}
+                                            >
+                                                发送验证码
+                                            </Button>
+                                        )}
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </>
+                    )}
+                </Form>
+                <div className="text-center pt-md pb-md">
+                    {currentStep === 0 && (
+                        <>
+                            <Button
+                                onClick={() => this.onNext(this.form)}
+                                type="primary"
+                                disabled={this.state.nextDisabled}
+                            >
+                                下一步，绑定
+                            </Button>
+                        </>
+                    )}
+                    {currentStep === 1 && (
+                        <>
+                            <Button onClick={() => this.onPrev()} className="mr-sm">
+                                上一步，验证
+                            </Button>
+                            <Button
+                                disabled={this.state.nextDisabled}
+                                onClick={() => this.onComplete()}
+                                type="primary"
+                            >
+                                完成
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </div>
+        )
+    }
+
+    render() {
+        const { visible, loading, types } = this.state
+
+        return (
+            <Modal
+                destroyOnClose
+                footer={false}
+                onCancel={() => this.close()}
+                visible={visible}
+                className="yo-modal-form"
+                title="绑定邮箱"
+            >
+                <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form">
+                        {types.length ? this.renderStepForm() : this.renderForm()}
+                    </div>
+                </Spin>
+            </Modal>
         )
     }
 }

web-react/src/pages/system/account/setting/satety/password.jsx

@@ -1,15 +1,9 @@
 import React, { Component } from 'react'
-import { Form, Input, InputNumber, Spin } from 'antd'
+import { Form, Input } from 'antd'
-import { AntIcon, IconSelector } from 'components'
-import { cloneDeep } from 'lodash'
 
-const initialValues = {
-    sort: 100,
-}
 export default class form extends Component {
     state = {
         // 加载状态
-        loading: true,
         exist: false,
     }
     // 表单实例
@@ -31,25 +25,7 @@ export default class form extends Component {
      * [异步,必要]
      * @param {*} params
      */
-    async fillData(params) {
+    async fillData() {}
-        this.record = cloneDeep(params.record)
-        //#region 从后端转换成前段所需格式
-        const exist = !!params.record
-        this.setState({
-            exist,
-        })
-
-        this.record = {
-            ...this.record,
-        }
-        //#endregion
-
-        this.form.current.setFieldsValue(this.record)
-
-        this.setState({
-            loading: false,
-        })
-    }
 
     /**
      * 获取数据
@@ -63,9 +39,6 @@ export default class form extends Component {
         const valid = await form.validateFields()
         if (valid) {
             const postData = form.getFieldsValue()
-            if (this.record) {
-                postData.id = this.record.id
-            }
             //#region 从前段转换后端所需格式
             //#endregion
             return postData
@@ -75,32 +48,39 @@ export default class form extends Component {
     render() {
         return (
             <Form className="yo-form" ref={this.form}>
-                <Spin spinning={this.state.loading}>
+                <div className="yo-form-group">
-                    {/* <AntIcon slot="indicator" spin type="loading" /> */}
+                    <Form.Item
-                    <div className="yo-form-group">
+                        label="旧密码"
-                        <Form.Item
+                        rules={[{ required: true, message: '请输入旧密码' }]}
-                            label="旧密码"
+                        name="password"
-                            rules={[{ required: true, message: '请输入旧密码' }]}
+                    >
-                            name="password"
+                        <Input.Password autoComplete="off" placeholder="请输入旧密码" />
-                        >
+                    </Form.Item>
-                            <Input placeholder="请输入旧密码" />
+                    <Form.Item
-                        </Form.Item>
+                        label="新密码"
-                        <Form.Item
+                        rules={[{ required: true, message: '请输入新密码' }]}
-                            label="新密码"
+                        name="newPassword"
-                            rules={[{ required: true, message: '请输入新密码' }]}
+                    >
-                            name="newPassword"
+                        <Input.Password autoComplete="off" placeholder="请输入新密码" />
-                        >
+                    </Form.Item>
-                            <Input placeholder="请输入新密码" />
+                    <Form.Item
-                        </Form.Item>
+                        label="确认新密码"
-                        <Form.Item
+                        rules={[
-                            label="确认新密码"
+                            { required: true, message: '请确认新密码' },
-                            rules={[{ required: true, message: '确认新密码' }]}
+                            ({ getFieldValue }) => ({
-                            name="confirm"
+                                validator(_, value) {
-                        >
+                                    if (!value || getFieldValue('newPassword') === value) {
-                            <Input placeholder="请确认新密码" />
+                                        return Promise.resolve()
-                        </Form.Item>
+                                    }
-                    </div>
+                                    return Promise.reject(new Error('确认新密码不匹配'))
-                </Spin>
+                                },
+                            }),
+                        ]}
+                        name="confirm"
+                    >
+                        <Input.Password autoComplete="off" placeholder="请确认新密码" />
+                    </Form.Item>
+                </div>
             </Form>
         )
     }

web-react/src/pages/system/account/setting/satety/phone.jsx

@@ -1,455 +1,376 @@
 import React, { Component } from 'react'
-import {
+import { Form, Input, Modal, Spin, Steps, Button, Row, Col, message as Message, Select } from 'antd'
-    Form,
+import { AntIcon } from 'components'
-    Input,
-    InputNumber,
-    Modal,
-    Spin,
-    Steps,
-    Button,
-    Row,
-    Col,
-    message,
-    Select,
-} from 'antd'
-import { AntIcon, Container, IconSelector } from 'components'
-import { cloneDeep, indexOf } from 'lodash'
 import { api } from 'common/api'
 import { COUNT_DWON_KEY } from 'common/storage'
-import { Option } from 'antd/lib/mentions'
+import store from 'store'
-import { set } from 'nprogress'
+import { cloneDeep } from 'lodash'
-import { getKeyThenIncreaseKey } from 'antd/lib/message'
 
-const initialValues = {
+const { getState } = store
-    orgcode: '',
+
-    target: '',
+const steps = [
-    code: '',
+    {
-    type: null,
+        title: '验证',
+    },
+    {
+        title: '绑定',
+    },
+]
+
+const reg = /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/
+
+const initState = {
+    visible: false,
+    loading: false,
+
+    // 可用于验证的类型
+    types: [],
+    // 当前步骤
+    currentStep: 0,
+
+    nextDisabled: true,
+    // 正在发送验证码
+    sendingCode: false,
+    // 冷却时间
+    countDown: 0,
 }
-var tempcode = ''
+
-const { Step } = Steps
 export default class form extends Component {
-    state = {
+    state = cloneDeep(initState)
-        buttondisabled: true,
+
-        visible: false,
-        loading: false,
-        codeLoading: false,
-        current: 0,
-        countdown: 0,
-        sendOrNo: true,
-        type: [],
-    }
     form = React.createRef()
-    //发送验证码
+
-    sendcode(data) {
+    orgCode = ''
-        this.setState({
+
-            codeLoading: true,
+    //打开窗口
-        })
+    open = () => {
-        var reg =
+        this.setState({ visible: true })
-            /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/
+
-        let { target } = data.current.getFieldsValue()
+        this.showCountDown()
-        let { type } = data.current.getFieldsValue()
+
-        let { code } = data.current.getFieldsValue()
+        const data = getState('user')
-        let { orgcode } = data.current.getFieldsValue()
+        const types = []
-        if (!reg.test(target) && type != '1' && type != '2') {
+        data.phone &&
-            message.warn('请输入正确的手机号码')
+            types.push({
-            this.setState({
+                title: `使用手机号${data.phone}进行验证`,
-                codeLoading: true,
+                value: 1,
             })
-            return
+        data.email &&
-        }
+            types.push({
-        api.SendCode({
+                title: `使用邮箱${data.email}进行验证`,
-            target: target,
+                value: 2,
-            type: type,
-            code: code,
-            orgcode: orgcode,
-        })
-            .then(res => {
-                if (res.success) {
-                    this.addTime()
-                    this.showcountdown()
-                }
-            })
-            .finally(() => {
-                this.setState({
-                    codeLoading: false,
-                })
             })
+
+        this.setState({ types })
     }
-    //进入下一步
+
-    next(data) {
+    close() {
-        this.setState({
+        this.setState(cloneDeep(initState))
-            loading: true,
-        })
-        let { target } = data.current.getFieldsValue()
-        let { type } = data.current.getFieldsValue()
-        let { code } = data.current.getFieldsValue()
-        let { orgcode } = data.current.getFieldsValue()
-        tempcode = data.current.getFieldsValue()
-        let form = {
-            target: target,
-            type: type,
-            code: code,
-            orgcode: orgcode,
-        }
-        api.CheckBindcode(form)
-            .then(res => {
-                if (res.data) {
-                    window.localStorage.removeItem(COUNT_DWON_KEY)
-                    let current = this.state.current + 1
-                    this.setState({
-                        form: {
-                            ...form,
-                            type: null,
-                        },
-                        buttondisabled: true,
-                        current: current,
-                    })
-                }
-            })
-            .finally(() => {
-                this.setState({
-                    loading: false,
-                })
-            })
     }
+
     /**
      * 将倒计时添加入到本地
      */
     addTime() {
-        const now = Date.now()
+        const now = Date.now() + 60 * 1000
-        var date = now + 60 * 1000 + 500
+        window.localStorage.setItem(COUNT_DWON_KEY, now)
-        window.localStorage.setItem(COUNT_DWON_KEY, date)
     }
     /**
      * 显示倒计时
      */
-    showcountdown() {
+    showCountDown() {
-        let _this = this
+        const surplusTime = window.localStorage.getItem(COUNT_DWON_KEY)
-        var Furdate = window.localStorage.getItem(COUNT_DWON_KEY)
+        const nowTime = Date.now()
-        var nowdate = new Date().getTime()
+        if (surplusTime >= nowTime) {
-        if (Furdate >= nowdate) {
             this.setState({
-                sendOrNo: false,
+                countDown: parseInt((surplusTime - nowTime) / 1000),
-                countdown: parseInt((Furdate - nowdate) / 1000),
             })
             setTimeout(() => {
-                _this.showcountdown()
+                this.showCountDown()
             }, 1000)
         } else {
-            this.setState({
+            this.setState({ countDown: 0 })
-                sendOrNo: true,
-            })
         }
     }
-    //打开窗口
+
-    open = (data = {}) => {
+    //发送验证码
-        this.setState({ visible: true, loading: true })
+    async onSendCode() {
-        api.getLoginUser().then(({ data }) => {
+        const form = this.form.current
-            let index = []
+
-            data.phone &&
+        const valid = await form.validateFields()
-                index.push({
+        if (!valid) {
-                    Title: '使用手机号' + data.phone + '进行验证 ',
+            return
-                    Value: 1,
+        }
-                })
+
-            data.email &&
+        this.setState({ sendingCode: true })
-                index.push({
+
-                    Title: '使用邮箱' + data.email + '进行验证',
+        const data = form.getFieldsValue()
-                    Value: 2,
+        try {
-                })
+            await api.sysUserSendCode(data)
+            const typeName = data.type ? [, '手机', '邮箱'][data.type] : '手机'
+            Message.success(`已发送验证码到${typeName}，请注意查收`)
+            this.addTime()
+            this.showCountDown()
+        } finally {
+            this.setState({ sendingCode: false })
+        }
+    }
+
+    // 下一步
+    async onNext() {
+        this.setState({ loading: true })
+        const data = this.form.current.getFieldsValue()
+        this.orgCode = data.orgCode
+
+        try {
+            await api.sysUserCheckBindcode(data)
+            window.localStorage.removeItem(COUNT_DWON_KEY)
             this.setState({
-                type: index,
+                nextDisabled: true,
+                currentStep: this.state.currentStep + 1,
             })
-            if (index.length > 0) {
+        } finally {
-                this.form.current.setFieldsValue({
-                    type: index[0].Value,
-                })
-            }
             this.setState({ loading: false })
-        })
-    }
-    // 前一步
-    prev() {
-        window.localStorage.removeItem(COUNT_DWON_KEY)
-        let current = this.state.current - 1
-        this.setState({
-            current: current,
-        })
-    }
-    //完成
-    complete(data) {
-        let { target } = data.current.getFieldsValue()
-        let { code } = data.current.getFieldsValue()
-        let { orgcode } = tempcode
-        api.CheckBindcode({
-            target: target,
-            type: null,
-            code: code,
-            orgcode: orgcode,
-        }).then(res => {
-            if (res.data) {
-                window.localStorage.removeItem(COUNT_DWON_KEY)
-                message.success('改绑完成')
-                this.onResetFields()
-            }
-        })
-    }
-    onResetFields() {
-        setTimeout(() => {
-            this.setState({ visible: false })
-            this.setState({ current: 0 })
-            //window.localStorage.removeItem(COUNT_DWON_KEY)
-            /** 在这里可以初始化当前组件中其他属性 */
-            /* ... */
-        }, 300)
-    }
-    render() {
-        let steps = [
-            {
-                title: '验证',
-            },
-            {
-                title: '绑定',
-            },
-        ]
-        const close = () => {
-            this.setState({
-                visible: false,
-                current: 0,
-            })
         }
+    }
+
+    // 上一步
+    onPrev() {
+        window.localStorage.removeItem(COUNT_DWON_KEY)
+        this.setState({
+            currentStep: this.state.currentStep - 1,
+        })
+    }
+
+    //完成
+    async onComplete() {
+        this.setState({ loading: true })
+        try {
+            await api.sysUserCheckBindcode({
+                ...this.form.current.getFieldsValue(),
+                orgCode: this.orgCode,
+            })
+            await this.props.loadData()
+            window.localStorage.removeItem(COUNT_DWON_KEY)
+            Message.success('绑定手机号成功')
+            this.close()
+        } finally {
+            this.setState({ loading: false })
+        }
+    }
+
+    renderForm() {
+        const { nextDisabled, sendingCode, countDown } = this.state
+
         return (
-            <Container mode="xxs">
+            <div className="yo-form-group">
-                <Modal
+                <Form
-                    footer={false}
+                    ref={this.form}
-                    onCancel={close}
+                    onValuesChange={(changedValues, allValues) => {
-                    destroyOnClose
+                        this.setState({
-                    visible={this.state.visible}
+                            nextDisabled: !(allValues.target && allValues.code),
-                    className="yo-modal-form"
+                        })
-                    title="绑定手机"
+                    }}
                 >
-                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <Form.Item
-                        <div className="yo-form">
+                        label="手机号码"
-                            {this.state.type.length !== 0 ? (
+                        name="target"
-                                <div className="yo-form-group">
+                        required={false}
-                                    <br />
+                        rules={[
-                                    <Row>
+                            { required: true, message: '请输入手机号码' },
-                                        <Col flex="1" />
+                            { pattern: reg, message: '手机号码格式错误' },
-                                        <Col flex="3">
+                        ]}
-                                            <Steps current={this.state.current}>
+                    >
-                                                {steps.map(item => (
+                        <Input autoComplete="off" placeholder="请输入手机号码" />
-                                                    <Steps.Step
+                    </Form.Item>
-                                                        key={item.title}
+                    <Form.Item label="验证码">
-                                                        title={item.title}
+                        <Row gutter={16} align="middle">
-                                                    />
+                            <Col flex="1">
-                                                ))}
+                                <Form.Item name="code" noStyle>
-                                            </Steps>
+                                    <Input autoComplete="off" placeholder="请输入验证码" />
-                                        </Col>
+                                </Form.Item>
-                                        <Col flex="1" />
+                            </Col>
-                                    </Row>
+                            <Col>
-                                    <br />
+                                {countDown ? (
-                                    <Form
+                                    <Button disabled>{countDown}秒后重新发送</Button>
-                                        ref={this.form}
+                                ) : (
-                                        initialValues={initialValues}
+                                    <Button onClick={() => this.onSendCode()} loading={sendingCode}>
-                                        onValuesChange={(changedValues, allValues) => {
+                                        发送验证码
-                                            this.setState({
+                                    </Button>
-                                                buttondisabled: !(
+                                )}
-                                                    allValues.orgcode ||
+                            </Col>
-                                                    (allValues.target && allValues.code)
+                        </Row>
-                                                ),
+                    </Form.Item>
-                                            })
+                </Form>
-                                        }}
+                <div className="text-center pt-md pb-md">
-                                    >
+                    <Button
-                                        <div>
+                        disabled={nextDisabled}
-                                            {this.state.current == 0 && (
+                        onClick={() => this.onComplete()}
-                                                <div>
+                        type="primary"
-                                                    <Form.Item label="选择验证方式" name="type">
+                    >
-                                                        <Select placeholder="请选择验证方式">
+                        绑定
-                                                            {this.state.type.map(item => (
+                    </Button>
-                                                                <Select.Option
+                </div>
-                                                                    key={item.Title}
+            </div>
-                                                                    value={item.Value}
+        )
-                                                                >
+    }
-                                                                    {item.Title}
+
-                                                                </Select.Option>
+    renderStepForm() {
-                                                            ))}
+        const { types, currentStep, sendingCode, countDown } = this.state
-                                                        </Select>
+
-                                                    </Form.Item>
+        return (
-                                                    <Form.Item label="验证码" name="orgcode">
+            <div className="yo-form-group">
-                                                        <Row gutter={16}>
+                <Row>
-                                                            <Col flex="1">
+                    <Col span={12} offset={6} className="pt-md pb-md">
-                                                                <Input placeholder="请输入验证码" />
+                        <Steps current={currentStep}>
-                                                            </Col>
+                            {steps.map(item => (
-                                                            <Col>
+                                <Steps.Step key={item.title} title={item.title} />
-                                                                {this.state.sendOrNo ? (
+                            ))}
-                                                                    <Button
+                        </Steps>
-                                                                        onClick={() => {
+                    </Col>
-                                                                            this.sendcode(this.form)
+                </Row>
-                                                                        }}
+                <Form
-                                                                    >
+                    ref={this.form}
-                                                                        <Spin
+                    onValuesChange={(changedValues, allValues) => {
-                                                                            spinning={
+                        this.setState({
-                                                                                this.state
+                            nextDisabled: !(
-                                                                                    .codeLoading
+                                allValues.orgCode ||
-                                                                            }
+                                (allValues.target && allValues.code)
-                                                                            indicator={
+                            ),
-                                                                                <AntIcon type="loading" />
+                        })
-                                                                            }
+                    }}
-                                                                        />
+                >
-                                                                        发送验证码
+                    {currentStep === 0 && (
-                                                                    </Button>
+                        <>
-                                                                ) : (
+                            <Form.Item
-                                                                    <Button disabled>
+                                label="选择验证方式"
-                                                                        {this.state.countdown}
+                                name="type"
-                                                                        秒后重新发送
+                                required={false}
-                                                                    </Button>
+                                rules={[{ required: true, message: '请选择一种验证方式' }]}
-                                                                )}
+                            >
-                                                            </Col>
+                                <Select placeholder="请选择验证方式">
-                                                        </Row>
+                                    {types.map(item => (
-                                                    </Form.Item>
+                                        <Select.Option key={item.value} value={item.value}>
-                                                </div>
+                                            {item.title}
-                                            )}
+                                        </Select.Option>
-                                            {this.state.current == 1 && (
+                                    ))}
-                                                <div>
+                                </Select>
-                                                    <Form.Item label="新手机号码" name="target">
+                            </Form.Item>
-                                                        <Input placeholder="请输入手机账号" />
+                            <Form.Item label="验证码">
-                                                    </Form.Item>
+                                <Row gutter={16}>
-                                                    <Form.Item label="验证码" name="code">
+                                    <Col flex="1">
-                                                        <Row gutter={16}>
+                                        <Form.Item name="orgCode" noStyle>
-                                                            <Col flex="1">
+                                            <Input autoComplete="off" placeholder="请输入验证码" />
-                                                                <Input placeholder="请输入六位验证码" />
-                                                            </Col>
-                                                            <Col>
-                                                                {this.state.sendOrNo ? (
-                                                                    <Button
-                                                                        onClick={() => {
-                                                                            this.sendcode(this.form)
-                                                                        }}
-                                                                    >
-                                                                        <Spin
-                                                                            spinning={
-                                                                                this.state
-                                                                                    .codeLoading
-                                                                            }
-                                                                            indicator={
-                                                                                <AntIcon type="loading" />
-                                                                            }
-                                                                        />
-                                                                        发送验证码
-                                                                    </Button>
-                                                                ) : (
-                                                                    <Button disabled>
-                                                                        {this.state.countdown}
-                                                                        秒后重新发送
-                                                                    </Button>
-                                                                )}
-                                                            </Col>
-                                                        </Row>
-                                                    </Form.Item>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </Form>
-                                    <br />
-                                    <div className="text-center">
-                                        {this.state.current == 0 && (
-                                            <>
-                                                <div>
-                                                    <Button
-                                                        onClick={() => this.next(this.form)}
-                                                        type="primary"
-                                                        disabled={this.state.buttondisabled}
-                                                    >
-                                                        下一步
-                                                    </Button>
-                                                </div>
-                                                <br />
-                                            </>
-                                        )}
-                                        {this.state.current == 1 && (
-                                            <>
-                                                {this.state.current > 0 && (
-                                                    <Button onClick={() => this.prev()}>
-                                                        前一步
-                                                    </Button>
-                                                )}
-                                                <Button
-                                                    disabled={this.state.buttondisabled}
-                                                    onClick={() => this.complete(this.form)}
-                                                    type="primary"
-                                                >
-                                                    完成
-                                                </Button>
-                                            </>
-                                        )}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div className="yo-form-group">
-                                    <Form
-                                        initialValues={initialValues}
-                                        ref={this.form}
-                                        onValuesChange={(changedValues, allValues) => {
-                                            this.setState({
-                                                buttondisabled: !(
-                                                    allValues.target && allValues.code
-                                                ),
-                                            })
-                                        }}
-                                    >
-                                        <Form.Item label="请输入手机" name="target">
-                                            <Input placeholder="请输入手机号码" />
                                         </Form.Item>
-                                        <Form.Item label="验证码" name="code">
+                                    </Col>
-                                            <Row gutter={16} align="middle">
+                                    <Col>
-                                                <Col flex="1">
+                                        {countDown ? (
-                                                    <Input placeholder="请输入验证码" />
+                                            <Button disabled>
-                                                </Col>
+                                                {countDown}
-                                                <Col>
+                                                秒后重新发送
-                                                    {this.state.sendOrNo ? (
-                                                        <Button
-                                                            onClick={() => {
-                                                                this.sendcode(this.form)
-                                                            }}
-                                                        >
-                                                            <Spin
-                                                                spinning={this.state.codeLoading}
-                                                                indicator={
-                                                                    <AntIcon type="loading" />
-                                                                }
-                                                            />
-                                                            发送验证码
-                                                        </Button>
-                                                    ) : (
-                                                        <Button disabled>
-                                                            {this.state.countdown}秒后重新发送
-                                                        </Button>
-                                                    )}
-                                                </Col>
-                                            </Row>
-                                        </Form.Item>
-                                    </Form>
-                                    <br />
-                                    <Row>
-                                        <Col flex="1" />
-                                        <Col flex="1" align="middle">
-                                            <Button
-                                                disabled={this.state.buttondisabled}
-                                                onClick={() => this.complete(this.form)}
-                                                type="primary"
-                                            >
-                                                绑定
                                             </Button>
-                                        </Col>
+                                        ) : (
-                                        <Col flex="1" />
+                                            <Button
-                                    </Row>
+                                                onClick={() => this.onSendCode()}
-                                    <br />
+                                                loading={sendingCode}
-                                </div>
+                                            >
-                            )}
+                                                发送验证码
-                        </div>
+                                            </Button>
-                    </Spin>
+                                        )}
-                </Modal>
+                                    </Col>
-            </Container>
+                                </Row>
+                            </Form.Item>
+                        </>
+                    )}
+                    {currentStep === 1 && (
+                        <>
+                            <Form.Item
+                                label="新手机号码"
+                                name="target"
+                                required={false}
+                                rules={[
+                                    { required: true, message: '请输入手机号码' },
+                                    { pattern: reg, message: '手机号码格式错误' },
+                                ]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入手机号码" />
+                            </Form.Item>
+                            <Form.Item label="验证码">
+                                <Row gutter={16}>
+                                    <Col flex="1">
+                                        <Form.Item name="code" noStyle>
+                                            <Input autoComplete="off" placeholder="请输入验证码" />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col>
+                                        {countDown ? (
+                                            <Button disabled>
+                                                {countDown}
+                                                秒后重新发送
+                                            </Button>
+                                        ) : (
+                                            <Button
+                                                onClick={() => this.onSendCode()}
+                                                loading={sendingCode}
+                                            >
+                                                发送验证码
+                                            </Button>
+                                        )}
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </>
+                    )}
+                </Form>
+                <div className="text-center pt-md pb-md">
+                    {currentStep === 0 && (
+                        <>
+                            <Button
+                                onClick={() => this.onNext(this.form)}
+                                type="primary"
+                                disabled={this.state.nextDisabled}
+                            >
+                                下一步，绑定
+                            </Button>
+                        </>
+                    )}
+                    {currentStep === 1 && (
+                        <>
+                            <Button onClick={() => this.onPrev()} className="mr-sm">
+                                上一步，验证
+                            </Button>
+                            <Button
+                                disabled={this.state.nextDisabled}
+                                onClick={() => this.onComplete()}
+                                type="primary"
+                            >
+                                完成
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </div>
+        )
+    }
+
+    render() {
+        const { visible, loading, types } = this.state
+
+        return (
+            <Modal
+                destroyOnClose
+                footer={false}
+                onCancel={() => this.close()}
+                visible={visible}
+                className="yo-modal-form"
+                title="绑定手机"
+            >
+                <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form">
+                        {types.length ? this.renderStepForm() : this.renderForm()}
+                    </div>
+                </Spin>
+            </Modal>
         )
     }
 }

web-react/src/views/main/_layout/header/user.jsx

@@ -94,9 +94,10 @@ class User extends Component {
                         <AntIcon type="user" className="mr-sm" />
                         个人中心
                     </Menu.Item>
-                    <Menu.Item key="2">其他菜单</Menu.Item>
+                    <Menu.Item key="2">
-                    <Menu.Item key="3">其他菜单</Menu.Item>
+                        <AntIcon type="file-text" className="mr-sm" />
-                    <Menu.Item key="4">其他菜单</Menu.Item>
+                        操作手册
+                    </Menu.Item>
                     <Menu.Divider />
                     <Menu.Item key="-1" onClick={() => this.onLogout()}>
                         <AntIcon type="logout" className="mr-sm" />

web-react/yarn.lock

@@ -3762,6 +3762,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cropperjs@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.nlark.com/cropperjs/download/cropperjs-1.5.12.tgz?cache=0&sync_timestamp=1623485718941&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcropperjs%2Fdownload%2Fcropperjs-1.5.12.tgz#d9c0db2bfb8c0d769d51739e8f916bbc44e10f50"
+  integrity sha1-2cDbK/uMDXadUXOej5FrvEThD1A=
+
 cross-fetch@^3.0.4:
   version "3.1.4"
   resolved "https://registry.npm.taobao.org/cross-fetch/download/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
@@ -9686,6 +9691,13 @@ react-color@^2.19.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-cropper@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.nlark.com/react-cropper/download/react-cropper-2.1.8.tgz?cache=0&sync_timestamp=1624865139834&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-cropper%2Fdownload%2Freact-cropper-2.1.8.tgz#bf35a7de65769f8ad357e8ae884e791fe3fe9212"
+  integrity sha1-vzWn3mV2n4rTV+iuiE55H+P+khI=
+  dependencies:
+    cropperjs "^1.5.12"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.npm.taobao.org/react-dev-utils/download/react-dev-utils-11.0.4.tgz?cache=0&sync_timestamp=1615231838520&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dev-utils%2Fdownload%2Freact-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"