diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js index 94ebc8889cf619adb2a1cab74db57f038590eb60..1c3a426576b185d4fdb24bb9b997852ab19adfbf 100644 --- a/src/routes/User/Register.js +++ b/src/routes/User/Register.js @@ -30,7 +30,8 @@ export default class Register extends Component { confirmDirty: false, visible: false, help: '', - } + prefix: '86', + }; componentWillReceiveProps(nextProps) { if (nextProps.register.status === 'ok') { @@ -52,7 +53,7 @@ export default class Register extends Component { clearInterval(this.interval); } }, 1000); - } + }; getPasswordStatus = () => { const { form } = this.props; @@ -64,26 +65,27 @@ export default class Register extends Component { return 'pass'; } return 'pool'; - } + }; handleSubmit = (e) => { e.preventDefault(); - this.props.form.validateFields({ force: true }, - (err, values) => { - if (!err) { - this.props.dispatch({ - type: 'register/submit', - payload: values, - }); - } + this.props.form.validateFields({ force: true }, (err, values) => { + if (!err) { + this.props.dispatch({ + type: 'register/submit', + payload: { + ...values, + prefix: this.state.prefix, + }, + }); } - ); - } + }); + }; handleConfirmBlur = (e) => { const { value } = e.target; this.setState({ confirmDirty: this.state.confirmDirty || !!value }); - } + }; checkConfirm = (rule, value, callback) => { const { form } = this.props; @@ -92,7 +94,7 @@ export default class Register extends Component { } else { callback(); } - } + }; checkPassword = (rule, value, callback) => { if (!value) { @@ -120,13 +122,19 @@ export default class Register extends Component { callback(); } } - } + }; + + changePrefix = (value) => { + this.setState({ + prefix: value, + }); + }; renderPasswordProgress = () => { const { form } = this.props; const value = form.getFieldValue('password'); const passwordStatus = this.getPasswordStatus(); - return value && value.length ? + return value && value.length ? (
100 ? 100 : value.length * 10} showInfo={false} /> -
: null; - } + + ) : null; + }; render() { const { form, register } = this.props; const { getFieldDecorator } = form; - const { count } = this.state; + const { count, prefix } = this.state; return (

注册

{getFieldDecorator('mail', { - rules: [{ - required: true, message: '请输入邮箱地址!', - }, { - type: 'email', message: '邮箱地址格式错误!', - }], - })( - - )} + rules: [ + { + required: true, + message: '请输入邮箱地址!', + }, + { + type: 'email', + message: '邮箱地址格式错误!', + }, + ], + })()} {passwordStatusMap[this.getPasswordStatus()]} {this.renderPasswordProgress()} -
请至少输入 6 个字符。请不要使用容易被猜到的密码。
+
+ 请至少输入 6 个字符。请不要使用容易被猜到的密码。 +
} overlayStyle={{ width: 240 }} @@ -171,9 +185,11 @@ export default class Register extends Component { visible={this.state.visible} > {getFieldDecorator('password', { - rules: [{ - validator: this.checkPassword, - }], + rules: [ + { + validator: this.checkPassword, + }, + ], })( {getFieldDecorator('confirm', { - rules: [{ - required: true, message: '请确认密码!', - }, { - validator: this.checkConfirm, - }], - })( - - )} + rules: [ + { + required: true, + message: '请确认密码!', + }, + { + validator: this.checkConfirm, + }, + ], + })()} - - - {getFieldDecorator('prefix', { - initialValue: '86', - })( - - )} - - - {getFieldDecorator('mobile', { - rules: [{ - required: true, message: '请输入手机号!', - }, { - pattern: /^1\d{10}$/, message: '手机号格式错误!', - }], - })( - - )} - + + + {getFieldDecorator('mobile', { + rules: [ + { + required: true, + message: '请输入手机号!', + }, + { + pattern: /^1\d{10}$/, + message: '手机号格式错误!', + }, + ], + })( + + )} {getFieldDecorator('captcha', { - rules: [{ - required: true, message: '请输入验证码!', - }], - })( - - )} + rules: [ + { + required: true, + message: '请输入验证码!', + }, + ], + })()} - 使用已有账户登录 + + 使用已有账户登录 + diff --git a/src/routes/User/Register.less b/src/routes/User/Register.less index a0afad7526b74a7be6e682c160f83c536effe438..f6d48208ab71a547ded69b4dfd8d08abcfbc5e0f 100644 --- a/src/routes/User/Register.less +++ b/src/routes/User/Register.less @@ -15,26 +15,6 @@ margin-bottom: 20px; } - .mobileGroup { - :global { - .ant-form-item { - margin-bottom: 0; - vertical-align: top; - - &:first-child .ant-select-selection { - border-right-width: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &:last-child .ant-input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - } - } - .getCaptcha { display: block; width: 100%; @@ -50,8 +30,10 @@ } } -.success, .warning, .error { - transition: color .3s; +.success, +.warning, +.error { + transition: color 0.3s; } .success { @@ -73,4 +55,3 @@ } } } -