个人设置和验证码
This commit is contained in:
@@ -1,9 +1,10 @@
|
|||||||
const SESSION_KEY = '__SESSION'
|
const SESSION_KEY = '__SESSION'
|
||||||
const SETTING_KEY = '__SETTINGS'
|
const SETTING_KEY = '__SETTINGS'
|
||||||
const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
|
const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
|
||||||
|
const COUNT_DWON_KEY = '__COUNT_DWON'
|
||||||
export {
|
export {
|
||||||
SESSION_KEY,
|
SESSION_KEY,
|
||||||
SETTING_KEY,
|
SETTING_KEY,
|
||||||
GLOBAL_INFO_KEY,
|
GLOBAL_INFO_KEY,
|
||||||
|
COUNT_DWON_KEY
|
||||||
}
|
}
|
||||||
41
web-react/src/pages/system/account/index.jsx
Normal file
41
web-react/src/pages/system/account/index.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Anchor, Form, Input, InputNumber, Spin } from 'antd'
|
||||||
|
import { AntIcon, Container, IconSelector } from 'components'
|
||||||
|
import { cloneDeep } from 'lodash'
|
||||||
|
import Safety from './setting/satety/index'
|
||||||
|
import Info from './setting/info'
|
||||||
|
import nav from 'store/reducer/nav'
|
||||||
|
|
||||||
|
export default class index extends Component {
|
||||||
|
state = {}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// let navs = [
|
||||||
|
// {
|
||||||
|
// title: '我的信息',
|
||||||
|
// 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>
|
||||||
|
<Info></Info>
|
||||||
|
<Safety></Safety>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
127
web-react/src/pages/system/account/setting/info.jsx
Normal file
127
web-react/src/pages/system/account/setting/info.jsx
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Button, DatePicker, Form, Input, message, Radio, Spin } from 'antd'
|
||||||
|
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({
|
||||||
|
loading: true,
|
||||||
|
})
|
||||||
|
api.getLoginUser()
|
||||||
|
.then(({ data }) => {
|
||||||
|
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({
|
||||||
|
saving: true,
|
||||||
|
})
|
||||||
|
let { birthday } = data.current.getFieldsValue()
|
||||||
|
let { nickName } = data.current.getFieldsValue()
|
||||||
|
let { sex } = data.current.getFieldsValue()
|
||||||
|
let { tel } = data.current.getFieldsValue()
|
||||||
|
api.sysUserUpdateInfo({
|
||||||
|
nickName: nickName,
|
||||||
|
birthday: birthday,
|
||||||
|
sex: sex,
|
||||||
|
tel: tel,
|
||||||
|
}).then(() => {
|
||||||
|
message.success('更新个人信息成功')
|
||||||
|
this.setState({
|
||||||
|
saving: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onAvatarStart() {}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { info } = this.state
|
||||||
|
return (
|
||||||
|
<Container mode="xxs">
|
||||||
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||||
|
<Form className="yo-form" ref={this.form}>
|
||||||
|
<h4 className="h4">我的信息</h4>
|
||||||
|
<div className="yo-avatar-info">
|
||||||
|
<Image
|
||||||
|
id={info.avatar}
|
||||||
|
size={128}
|
||||||
|
icon={<AntIcon type="user" />}
|
||||||
|
type="avatar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div className="yo-form-group yo-form--short">
|
||||||
|
<Form.Item label="昵称" name="nickName">
|
||||||
|
<Input placeholder="请输入昵称"></Input>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="用户名">
|
||||||
|
<span>{info.name}</span>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="生日" name="birthday">
|
||||||
|
<DatePicker
|
||||||
|
onChange={this.onChange}
|
||||||
|
className="w-100-p"
|
||||||
|
placeholder="请选择生日"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="性别" name="sex">
|
||||||
|
<Radio.Group>
|
||||||
|
<Radio.Button value={0}>
|
||||||
|
<AntIcon className="mr-xxs" type="stop" />
|
||||||
|
<span>保密</span>
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value={1}>
|
||||||
|
<AntIcon color="#1890ff" className="mr-xxs" type="man" />
|
||||||
|
<span>男</span>
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value={2}>
|
||||||
|
<AntIcon color="#eb2f96" className="mr-xxs" type="woman" />
|
||||||
|
<span>女</span>
|
||||||
|
</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
179
web-react/src/pages/system/account/setting/satety/index.jsx
Normal file
179
web-react/src/pages/system/account/setting/satety/index.jsx
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Button, DatePicker, Form, Input, List, message as Message, Spin } from 'antd'
|
||||||
|
import { api } from 'common/api'
|
||||||
|
import { cloneDeep } from 'lodash'
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class form extends Component {
|
||||||
|
state = {
|
||||||
|
saving: false,
|
||||||
|
info: [],
|
||||||
|
loading: true,
|
||||||
|
}
|
||||||
|
form = React.createRef()
|
||||||
|
// 新增窗口实例
|
||||||
|
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() {
|
||||||
|
return (
|
||||||
|
<Container mode="xxs">
|
||||||
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||||
|
<div className="yo-form">
|
||||||
|
<h4 className="h4">安全设置</h4>
|
||||||
|
</div>
|
||||||
|
<List
|
||||||
|
dataSource={this.state.info}
|
||||||
|
bordered
|
||||||
|
item-layout="vertical"
|
||||||
|
renderItem={item => (
|
||||||
|
<List.Item extra={item.extra} slot="renderItem" slot-scope="item">
|
||||||
|
{item.done == true ? (
|
||||||
|
<>
|
||||||
|
<span className="text-success" slot="actions">
|
||||||
|
<AntIcon className="mr-xxs" type="check-circle" />
|
||||||
|
已设置
|
||||||
|
</span>
|
||||||
|
<a onClick={item.action} slot="actions">
|
||||||
|
修改
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="text-warning" slot="actions">
|
||||||
|
<AntIcon className="mr-xxs" type="exclamation-circle" />
|
||||||
|
未设置
|
||||||
|
</span>
|
||||||
|
<a onClick={item.action} slot="actions">
|
||||||
|
设置
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<List.Item.Meta description={item.description} title={item.title} />
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<ModalForm title={`更新密码`} action={apiAction.update} ref={this.updateForm}>
|
||||||
|
<PasswordForm />
|
||||||
|
</ModalForm>
|
||||||
|
<Mail ref={this.MailForm} />
|
||||||
|
<Phone ref={this.PhoneForm} />
|
||||||
|
</Spin>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
454
web-react/src/pages/system/account/setting/satety/mail.jsx
Normal file
454
web-react/src/pages/system/account/setting/satety/mail.jsx
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
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 { set } from 'nprogress'
|
||||||
|
import { getKeyThenIncreaseKey } from 'antd/lib/message'
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
orgcode: '',
|
||||||
|
target: '',
|
||||||
|
code: '',
|
||||||
|
type: null,
|
||||||
|
}
|
||||||
|
var tempcode = ''
|
||||||
|
const { Step } = Steps
|
||||||
|
export default class form extends Component {
|
||||||
|
state = {
|
||||||
|
buttondisabled: true,
|
||||||
|
visible: false,
|
||||||
|
loading: false,
|
||||||
|
codeLoading: false,
|
||||||
|
current: 0,
|
||||||
|
countdown: 0,
|
||||||
|
sendOrNo: true,
|
||||||
|
type: [],
|
||||||
|
}
|
||||||
|
form = React.createRef()
|
||||||
|
//发送验证码
|
||||||
|
sendcode(data) {
|
||||||
|
this.setState({
|
||||||
|
codeLoading: true,
|
||||||
|
})
|
||||||
|
var reg = /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
|
||||||
|
let { target } = data.current.getFieldsValue()
|
||||||
|
let { type } = data.current.getFieldsValue()
|
||||||
|
let { code } = data.current.getFieldsValue()
|
||||||
|
let { orgcode } = data.current.getFieldsValue()
|
||||||
|
if (!reg.test(target) && type != '1' && type != '2') {
|
||||||
|
message.warn('请输入正确的邮箱')
|
||||||
|
this.setState({
|
||||||
|
codeLoading: true,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
api.SendCode({
|
||||||
|
target: target,
|
||||||
|
type: type,
|
||||||
|
code: code,
|
||||||
|
orgcode: orgcode,
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.addTime()
|
||||||
|
this.showcountdown()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.setState({
|
||||||
|
codeLoading: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//进入下一步
|
||||||
|
next(data) {
|
||||||
|
this.setState({
|
||||||
|
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()
|
||||||
|
var date = now + 60 * 1000 + 500
|
||||||
|
window.localStorage.setItem(COUNT_DWON_KEY, date)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 显示倒计时
|
||||||
|
*/
|
||||||
|
showcountdown() {
|
||||||
|
let _this = this
|
||||||
|
var Furdate = window.localStorage.getItem(COUNT_DWON_KEY)
|
||||||
|
var nowdate = new Date().getTime()
|
||||||
|
if (Furdate >= nowdate) {
|
||||||
|
this.setState({
|
||||||
|
sendOrNo: false,
|
||||||
|
countdown: parseInt((Furdate - nowdate) / 1000),
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
_this.showcountdown()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
sendOrNo: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//打开窗口
|
||||||
|
open = (data = {}) => {
|
||||||
|
this.setState({ visible: true, loading: true })
|
||||||
|
api.getLoginUser().then(({ data }) => {
|
||||||
|
let index = []
|
||||||
|
data.phone &&
|
||||||
|
index.push({
|
||||||
|
Title: '使用手机号' + data.phone + '进行验证 ',
|
||||||
|
Value: 1,
|
||||||
|
})
|
||||||
|
data.email &&
|
||||||
|
index.push({
|
||||||
|
Title: '使用邮箱' + data.email + '进行验证',
|
||||||
|
Value: 2,
|
||||||
|
})
|
||||||
|
this.setState({
|
||||||
|
type: index,
|
||||||
|
})
|
||||||
|
if (index.length > 0) {
|
||||||
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Container mode="xxs">
|
||||||
|
<Modal
|
||||||
|
footer={false}
|
||||||
|
onCancel={close}
|
||||||
|
destroyOnClose
|
||||||
|
visible={this.state.visible}
|
||||||
|
className="yo-modal-form"
|
||||||
|
title="绑定邮箱"
|
||||||
|
>
|
||||||
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||||
|
<div className="yo-form">
|
||||||
|
{this.state.type.length !== 0 ? (
|
||||||
|
<div className="yo-form-group">
|
||||||
|
<br />
|
||||||
|
<Row>
|
||||||
|
<Col flex="1" />
|
||||||
|
<Col flex="3">
|
||||||
|
<Steps current={this.state.current}>
|
||||||
|
{steps.map(item => (
|
||||||
|
<Steps.Step
|
||||||
|
key={item.title}
|
||||||
|
title={item.title}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Steps>
|
||||||
|
</Col>
|
||||||
|
<Col flex="1" />
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
<Form
|
||||||
|
ref={this.form}
|
||||||
|
initialValues={initialValues}
|
||||||
|
onValuesChange={(changedValues, allValues) => {
|
||||||
|
this.setState({
|
||||||
|
buttondisabled: !(
|
||||||
|
allValues.orgcode ||
|
||||||
|
(allValues.target && allValues.code)
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{this.state.current == 0 && (
|
||||||
|
<div>
|
||||||
|
<Form.Item label="选择验证方式" name="type">
|
||||||
|
<Select placeholder="请选择验证方式">
|
||||||
|
{this.state.type.map(item => (
|
||||||
|
<Select.Option
|
||||||
|
key={item.Title}
|
||||||
|
value={item.Value}
|
||||||
|
>
|
||||||
|
{item.Title}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="验证码" name="orgcode">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col flex="1">
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
{this.state.current == 1 && (
|
||||||
|
<div>
|
||||||
|
<Form.Item label="新邮箱号码" name="target">
|
||||||
|
<Input placeholder="请输入邮箱账号" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="验证码" name="code">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col flex="1">
|
||||||
|
<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">
|
||||||
|
<Row gutter={16} align="middle">
|
||||||
|
<Col flex="1">
|
||||||
|
<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>
|
||||||
|
</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" />
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</Modal>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
107
web-react/src/pages/system/account/setting/satety/password.jsx
Normal file
107
web-react/src/pages/system/account/setting/satety/password.jsx
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Form, Input, InputNumber, Spin } 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,
|
||||||
|
}
|
||||||
|
// 表单实例
|
||||||
|
form = React.createRef()
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
record = {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* mount后回调
|
||||||
|
*/
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.created && this.props.created(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 填充数据
|
||||||
|
* 可以在设置this.record之后对其作出数据结构调整
|
||||||
|
* [异步,必要]
|
||||||
|
* @param {*} params
|
||||||
|
*/
|
||||||
|
async fillData(params) {
|
||||||
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取数据
|
||||||
|
* 可以对postData进行数据结构调整
|
||||||
|
* [异步,必要]
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
async getData() {
|
||||||
|
const form = this.form.current
|
||||||
|
|
||||||
|
const valid = await form.validateFields()
|
||||||
|
if (valid) {
|
||||||
|
const postData = form.getFieldsValue()
|
||||||
|
if (this.record) {
|
||||||
|
postData.id = this.record.id
|
||||||
|
}
|
||||||
|
//#region 从前段转换后端所需格式
|
||||||
|
//#endregion
|
||||||
|
return postData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Form className="yo-form" ref={this.form}>
|
||||||
|
<Spin spinning={this.state.loading}>
|
||||||
|
{/* <AntIcon slot="indicator" spin type="loading" /> */}
|
||||||
|
<div className="yo-form-group">
|
||||||
|
<Form.Item
|
||||||
|
label="旧密码"
|
||||||
|
rules={[{ required: true, message: '请输入旧密码' }]}
|
||||||
|
name="password"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入旧密码" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="新密码"
|
||||||
|
rules={[{ required: true, message: '请输入新密码' }]}
|
||||||
|
name="newPassword"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入新密码" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="确认新密码"
|
||||||
|
rules={[{ required: true, message: '确认新密码' }]}
|
||||||
|
name="confirm"
|
||||||
|
>
|
||||||
|
<Input placeholder="请确认新密码" />
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
455
web-react/src/pages/system/account/setting/satety/phone.jsx
Normal file
455
web-react/src/pages/system/account/setting/satety/phone.jsx
Normal file
@@ -0,0 +1,455 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
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 { set } from 'nprogress'
|
||||||
|
import { getKeyThenIncreaseKey } from 'antd/lib/message'
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
orgcode: '',
|
||||||
|
target: '',
|
||||||
|
code: '',
|
||||||
|
type: null,
|
||||||
|
}
|
||||||
|
var tempcode = ''
|
||||||
|
const { Step } = Steps
|
||||||
|
export default class form extends Component {
|
||||||
|
state = {
|
||||||
|
buttondisabled: true,
|
||||||
|
visible: false,
|
||||||
|
loading: false,
|
||||||
|
codeLoading: false,
|
||||||
|
current: 0,
|
||||||
|
countdown: 0,
|
||||||
|
sendOrNo: true,
|
||||||
|
type: [],
|
||||||
|
}
|
||||||
|
form = React.createRef()
|
||||||
|
//发送验证码
|
||||||
|
sendcode(data) {
|
||||||
|
this.setState({
|
||||||
|
codeLoading: true,
|
||||||
|
})
|
||||||
|
var 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}$/
|
||||||
|
let { target } = data.current.getFieldsValue()
|
||||||
|
let { type } = data.current.getFieldsValue()
|
||||||
|
let { code } = data.current.getFieldsValue()
|
||||||
|
let { orgcode } = data.current.getFieldsValue()
|
||||||
|
if (!reg.test(target) && type != '1' && type != '2') {
|
||||||
|
message.warn('请输入正确的手机号码')
|
||||||
|
this.setState({
|
||||||
|
codeLoading: true,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
api.SendCode({
|
||||||
|
target: target,
|
||||||
|
type: type,
|
||||||
|
code: code,
|
||||||
|
orgcode: orgcode,
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.addTime()
|
||||||
|
this.showcountdown()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.setState({
|
||||||
|
codeLoading: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//进入下一步
|
||||||
|
next(data) {
|
||||||
|
this.setState({
|
||||||
|
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()
|
||||||
|
var date = now + 60 * 1000 + 500
|
||||||
|
window.localStorage.setItem(COUNT_DWON_KEY, date)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 显示倒计时
|
||||||
|
*/
|
||||||
|
showcountdown() {
|
||||||
|
let _this = this
|
||||||
|
var Furdate = window.localStorage.getItem(COUNT_DWON_KEY)
|
||||||
|
var nowdate = new Date().getTime()
|
||||||
|
if (Furdate >= nowdate) {
|
||||||
|
this.setState({
|
||||||
|
sendOrNo: false,
|
||||||
|
countdown: parseInt((Furdate - nowdate) / 1000),
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
_this.showcountdown()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
sendOrNo: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//打开窗口
|
||||||
|
open = (data = {}) => {
|
||||||
|
this.setState({ visible: true, loading: true })
|
||||||
|
api.getLoginUser().then(({ data }) => {
|
||||||
|
let index = []
|
||||||
|
data.phone &&
|
||||||
|
index.push({
|
||||||
|
Title: '使用手机号' + data.phone + '进行验证 ',
|
||||||
|
Value: 1,
|
||||||
|
})
|
||||||
|
data.email &&
|
||||||
|
index.push({
|
||||||
|
Title: '使用邮箱' + data.email + '进行验证',
|
||||||
|
Value: 2,
|
||||||
|
})
|
||||||
|
this.setState({
|
||||||
|
type: index,
|
||||||
|
})
|
||||||
|
if (index.length > 0) {
|
||||||
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Container mode="xxs">
|
||||||
|
<Modal
|
||||||
|
footer={false}
|
||||||
|
onCancel={close}
|
||||||
|
destroyOnClose
|
||||||
|
visible={this.state.visible}
|
||||||
|
className="yo-modal-form"
|
||||||
|
title="绑定手机"
|
||||||
|
>
|
||||||
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||||
|
<div className="yo-form">
|
||||||
|
{this.state.type.length !== 0 ? (
|
||||||
|
<div className="yo-form-group">
|
||||||
|
<br />
|
||||||
|
<Row>
|
||||||
|
<Col flex="1" />
|
||||||
|
<Col flex="3">
|
||||||
|
<Steps current={this.state.current}>
|
||||||
|
{steps.map(item => (
|
||||||
|
<Steps.Step
|
||||||
|
key={item.title}
|
||||||
|
title={item.title}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Steps>
|
||||||
|
</Col>
|
||||||
|
<Col flex="1" />
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
<Form
|
||||||
|
ref={this.form}
|
||||||
|
initialValues={initialValues}
|
||||||
|
onValuesChange={(changedValues, allValues) => {
|
||||||
|
this.setState({
|
||||||
|
buttondisabled: !(
|
||||||
|
allValues.orgcode ||
|
||||||
|
(allValues.target && allValues.code)
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{this.state.current == 0 && (
|
||||||
|
<div>
|
||||||
|
<Form.Item label="选择验证方式" name="type">
|
||||||
|
<Select placeholder="请选择验证方式">
|
||||||
|
{this.state.type.map(item => (
|
||||||
|
<Select.Option
|
||||||
|
key={item.Title}
|
||||||
|
value={item.Value}
|
||||||
|
>
|
||||||
|
{item.Title}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="验证码" name="orgcode">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col flex="1">
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
{this.state.current == 1 && (
|
||||||
|
<div>
|
||||||
|
<Form.Item label="新手机号码" name="target">
|
||||||
|
<Input placeholder="请输入手机账号" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="验证码" name="code">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col flex="1">
|
||||||
|
<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">
|
||||||
|
<Row gutter={16} align="middle">
|
||||||
|
<Col flex="1">
|
||||||
|
<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>
|
||||||
|
</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" />
|
||||||
|
</Row>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</Modal>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -34,7 +34,14 @@ class User extends Component {
|
|||||||
this.unsubscribe()
|
this.unsubscribe()
|
||||||
}
|
}
|
||||||
|
|
||||||
onAccountSetting = () => {}
|
onAccountSetting = () => {
|
||||||
|
window.openContentWindow({
|
||||||
|
id: 'account-home',
|
||||||
|
title: '个人设置',
|
||||||
|
icon: '',
|
||||||
|
path: '/system/account',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onLogout = () => {
|
onLogout = () => {
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
@@ -83,7 +90,7 @@ class User extends Component {
|
|||||||
</div>
|
</div>
|
||||||
<Menu selectable={false}>
|
<Menu selectable={false}>
|
||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item key="1">
|
<Menu.Item key="1" onClick={() => this.onAccountSetting()}>
|
||||||
<AntIcon type="user" className="mr-sm" />
|
<AntIcon type="user" className="mr-sm" />
|
||||||
个人中心
|
个人中心
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|||||||
Reference in New Issue
Block a user