import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Input } from 'antd'
|
import './index.scss'
|
|
class CodeForm extends Component {
|
static propTpyes = {
|
handleSubmit: PropTypes.func,
|
verify: PropTypes.object
|
}
|
|
state = {}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
componentDidMount () {
|
const input = document.getElementById('code')
|
if (input) {
|
input.focus()
|
}
|
}
|
|
render() {
|
const { verify } = this.props
|
const { getFieldDecorator } = this.props.form
|
|
let phone = verify.phone
|
phone = phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
|
|
return (
|
<Form style={{margin: '0px 10px'}}>
|
<Form.Item label="手机号" labelCol={{style: {width: '33%'}}} wrapperCol={{style: {display: 'inline-block', width: '55%'}}}>
|
{phone}
|
</Form.Item>
|
<Form.Item label="验证码" help={<span style={{fontSize: '12px'}}>信息已发送，请查看手机短信。</span>} labelCol={{style: {verticalAlign: 'top',width: '33%'}}} wrapperCol={{style: {display: 'inline-block', width: '55%'}}}>
|
{getFieldDecorator('code', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入验证码！',
|
}
|
]
|
})(<Input onPressEnter={(e) => {this.props.handleSubmit()}} placeholder="验证码" />)}
|
</Form.Item>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(CodeForm)
|
