index.tsx 4.52 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Button, Divider, Form, Input, Select } from 'antd';
陈帅's avatar
陈帅 committed
2
import React, { Fragment } from 'react';
陈帅's avatar
陈帅 committed
3

陈帅's avatar
陈帅 committed
4
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
5 6
import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
7
import { IStateType } from '../../model';
陈帅's avatar
陈帅 committed
8
import styles from './index.less';
9

afc163's avatar
afc163 committed
10
const { Option } = Select;
11

WhatAKitty's avatar
WhatAKitty committed
12 13 14 15 16 17 18 19
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};
陈帅's avatar
陈帅 committed
20 21
interface Step1Props extends FormComponentProps {
  data?: IStateType['step'];
陈帅's avatar
陈帅 committed
22
  dispatch?: Dispatch<any>;
陈帅's avatar
陈帅 committed
23
}
WhatAKitty's avatar
WhatAKitty committed
24

陈帅's avatar
陈帅 committed
25
class Step1 extends React.PureComponent<Step1Props> {
WhatAKitty's avatar
WhatAKitty committed
26 27
  render() {
    const { form, dispatch, data } = this.props;
陈帅's avatar
陈帅 committed
28 29 30
    if (!data) {
      return;
    }
WhatAKitty's avatar
WhatAKitty committed
31 32 33
    const { getFieldDecorator, validateFields } = form;
    const onValidateForm = () => {
      validateFields((err, values) => {
陈帅's avatar
陈帅 committed
34
        if (!err && dispatch) {
WhatAKitty's avatar
WhatAKitty committed
35
          dispatch({
36
            type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
WhatAKitty's avatar
WhatAKitty committed
37 38
            payload: values,
          });
39 40 41 42
          dispatch({
            type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
            payload: 'confirm',
          });
WhatAKitty's avatar
WhatAKitty committed
43 44 45 46
        }
      });
    };
    return (
陈帅's avatar
陈帅 committed
47
      <Fragment>
WhatAKitty's avatar
WhatAKitty committed
48
        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
jim's avatar
jim committed
49
          <Form.Item {...formItemLayout} label="付款账户">
WhatAKitty's avatar
WhatAKitty committed
50 51 52 53 54 55
            {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>
陈帅's avatar
陈帅 committed
56
              </Select>,
WhatAKitty's avatar
WhatAKitty committed
57 58
            )}
          </Form.Item>
jim's avatar
jim committed
59
          <Form.Item {...formItemLayout} label="收款账户">
WhatAKitty's avatar
WhatAKitty committed
60 61 62 63 64 65 66 67 68 69 70
            <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: '账户名应为邮箱格式' },
                ],
jim's avatar
jim committed
71
              })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
WhatAKitty's avatar
WhatAKitty committed
72 73
            </Input.Group>
          </Form.Item>
jim's avatar
jim committed
74
          <Form.Item {...formItemLayout} label="收款人姓名">
WhatAKitty's avatar
WhatAKitty committed
75 76 77
            {getFieldDecorator('receiverName', {
              initialValue: data.receiverName,
              rules: [{ required: true, message: '请输入收款人姓名' }],
jim's avatar
jim committed
78
            })(<Input placeholder="请输入收款人姓名" />)}
WhatAKitty's avatar
WhatAKitty committed
79
          </Form.Item>
jim's avatar
jim committed
80
          <Form.Item {...formItemLayout} label="转账金额">
WhatAKitty's avatar
WhatAKitty committed
81 82
            {getFieldDecorator('amount', {
              initialValue: data.amount,
83
              rules: [
WhatAKitty's avatar
WhatAKitty committed
84
                { required: true, message: '请输入转账金额' },
jim's avatar
jim committed
85 86 87 88
                {
                  pattern: /^(\d+)((?:\.\d+)?)$/,
                  message: '请输入合法金额数字',
                },
89
              ],
jim's avatar
jim committed
90
            })(<Input prefix="¥" placeholder="请输入金额" />)}
WhatAKitty's avatar
WhatAKitty committed
91 92 93 94
          </Form.Item>
          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
jim's avatar
jim committed
95 96 97 98
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
WhatAKitty's avatar
WhatAKitty committed
99 100 101 102 103 104 105 106 107 108 109 110
            }}
            label=""
          >
            <Button type="primary" onClick={onValidateForm}>
              下一步
            </Button>
          </Form.Item>
        </Form>
        <Divider style={{ margin: '40px 0 24px' }} />
        <div className={styles.desc}>
          <h3>说明</h3>
          <h4>转账到支付宝账户</h4>
jim's avatar
jim committed
111 112 113
          <p>
            如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。
          </p>
WhatAKitty's avatar
WhatAKitty committed
114
          <h4>转账到银行卡</h4>
jim's avatar
jim committed
115 116 117
          <p>
            如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。
          </p>
WhatAKitty's avatar
WhatAKitty committed
118
        </div>
陈帅's avatar
陈帅 committed
119
      </Fragment>
WhatAKitty's avatar
WhatAKitty committed
120 121 122
    );
  }
}
lijiehua's avatar
lijiehua committed
123

陈帅's avatar
陈帅 committed
124 125
export default connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: IStateType }) => ({
  data: BLOCK_NAME_CAMEL_CASE.step,
陈帅's avatar
陈帅 committed
126
}))(Form.create<Step1Props>()(Step1));