text: import React, { Fragment } from 'react';
  import { connect } from 'dva';
  import { Form, Input, Button, Select, Divider } from 'antd';
  import router from 'umi/router';
  import styles from './style.less';
  
  const { Option } = Select;
  
  const formItemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  
  @connect(({ form }) => ({
    data: form.step,
  }))
  @Form.create()
  class Step1 extends React.PureComponent {
    render() {
      // debugger;
      const { form, dispatch, data } = this.props;
      const { getFieldDecorator, validateFields } = form;
      const onValidateForm = () => {
        validateFields((err, values) => {
          if (!err) {
            dispatch({
              type: 'form/saveStepFormData',
              payload: values,
            });
            router.push('/form/step-form/confirm');
          }
        });
      };
      return (
        <Fragment>
          <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
            <Form.Item {...formItemLayout} label="付款账户">
              {getFieldDecorator('payAccount', {
                initialValue: data.payAccount,
                rules: [{ required: true, message: '请选择付款账户' }],
              })(
                <Select placeholder="test@example.com">
                  <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
                </Select>
              )}
            </Form.Item>
            <Form.Item {...formItemLayout} label="收款账户">
              <Input.Group compact>
                <Select defaultValue="alipay" style={{ width: 100 }}>
                  <Option value="alipay">支付宝</Option>
                  <Option value="bank">银行账户</Option>
                </Select>
                {getFieldDecorator('receiverAccount', {
                  initialValue: data.receiverAccount,
                  rules: [
                    { required: true, message: '请输入收款人账户' },
                    { type: 'email', message: '账户名应为邮箱格式' },
                  ],
                })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
              </Input.Group>
            </Form.Item>
            <Form.Item {...formItemLayout} label="收款人姓名">
              {getFieldDecorator('receiverName', {
                initialValue: data.receiverName,
                rules: [{ required: true, message: '请输入收款人姓名' }],
              })(<Input placeholder="请输入收款人姓名" />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="转账金额">
              {getFieldDecorator('amount', {
                initialValue: data.amount,
                rules: [
                  { required: true, message: '请输入转账金额' },
                  {
                    pattern: /^(\d+)((?:\.\d+)?)$/,
                    message: '请输入合法金额数字',
                  },
                ],
              })(<Input prefix="￥" placeholder="请输入金额" />)}
            </Form.Item>
            <Form.Item
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: {
                  span: formItemLayout.wrapperCol.span,
                  offset: formItemLayout.labelCol.span,
                },
              }}
              label=""
            >
              <Button type="primary" onClick={onValidateForm}>
                下一步
              </Button>
            </Form.Item>
          </Form>
          <Divider style={{ margin: '40px 0 24px' }} />
          <div className={styles.desc}>
            <h3>说明</h3>
            <h4>转账到支付宝账户</h4>
            <p>
              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
            </p>
            <h4>转账到银行卡</h4>
            <p>
              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
            </p>
          </div>
        </Fragment>
      );
    }
  }
  
  export default Step1;
  