个人设置和验证码
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
const SESSION_KEY = '__SESSION'
|
||||
const SETTING_KEY = '__SETTINGS'
|
||||
const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
|
||||
|
||||
const COUNT_DWON_KEY = '__COUNT_DWON'
|
||||
export {
|
||||
SESSION_KEY,
|
||||
SETTING_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()
|
||||
}
|
||||
|
||||
onAccountSetting = () => {}
|
||||
onAccountSetting = () => {
|
||||
window.openContentWindow({
|
||||
id: 'account-home',
|
||||
title: '个人设置',
|
||||
icon: '',
|
||||
path: '/system/account',
|
||||
})
|
||||
}
|
||||
|
||||
onLogout = () => {
|
||||
Modal.confirm({
|
||||
@@ -83,7 +90,7 @@ class User extends Component {
|
||||
</div>
|
||||
<Menu selectable={false}>
|
||||
<Menu.Divider />
|
||||
<Menu.Item key="1">
|
||||
<Menu.Item key="1" onClick={() => this.onAccountSetting()}>
|
||||
<AntIcon type="user" className="mr-sm" />
|
||||
个人中心
|
||||
</Menu.Item>
|
||||
|
||||
Reference in New Issue
Block a user