index.tsx 3.31 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2 3 4
import { Alert, Button, Divider, Form, Input } from 'antd';

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

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

陈帅's avatar
陈帅 committed
24 25 26 27 28 29 30 31 32 33 34 35
const Step2: React.FC<Step2Props> = props => {
  const { form, data, dispatch, submitting } = props;
  if (!data) {
    return null;
  }
  const { getFieldDecorator, validateFields } = form;
  const onPrev = () => {
    if (dispatch) {
      dispatch({
        type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
        payload: 'info',
      });
陈帅's avatar
陈帅 committed
36
    }
陈帅's avatar
陈帅 committed
37 38 39 40 41 42 43 44 45 46 47 48 49
  };
  const onValidateForm = (e: React.FormEvent) => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        if (dispatch) {
          dispatch({
            type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
            payload: {
              ...data,
              ...values,
            },
          });
WhatAKitty's avatar
WhatAKitty committed
50
        }
陈帅's avatar
陈帅 committed
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
      }
    });
  };
  return (
    <Form layout="horizontal" className={styles.stepForm}>
      <Alert
        closable
        showIcon
        message="确认转账后,资金将直接打入对方账户,无法退回。"
        style={{ marginBottom: 24 }}
      />
      <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户">
        {data.payAccount}
      </Form.Item>
      <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户">
        {data.receiverAccount}
      </Form.Item>
      <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
        {data.receiverName}
      </Form.Item>
      <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
        <span className={styles.money}>{data.amount}</span>
      </Form.Item>
      <Divider style={{ margin: '24px 0' }} />
      <Form.Item {...formItemLayout} label="支付密码" required={false}>
        {getFieldDecorator('password', {
          initialValue: '123456',
          rules: [
            {
              required: true,
              message: '需要支付密码才能进行支付',
jim's avatar
jim committed
82
            },
陈帅's avatar
陈帅 committed
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
          ],
        })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
      </Form.Item>
      <Form.Item
        style={{ marginBottom: 8 }}
        wrapperCol={{
          xs: { span: 24, offset: 0 },
          sm: {
            span: formItemLayout.wrapperCol.span,
            offset: formItemLayout.labelCol.span,
          },
        }}
        label=""
      >
        <Button type="primary" onClick={onValidateForm} loading={submitting}>
          提交
        </Button>
        <Button onClick={onPrev} style={{ marginLeft: 8 }}>
          上一步
        </Button>
      </Form.Item>
    </Form>
  );
};
陈帅's avatar
陈帅 committed
107 108 109 110 111
export default connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
陈帅's avatar
陈帅 committed
112
    BLOCK_NAME_CAMEL_CASE: StateType;
陈帅's avatar
陈帅 committed
113 114 115 116 117 118
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitStepForm'],
    data: BLOCK_NAME_CAMEL_CASE.step,
陈帅's avatar
陈帅 committed
119
  }),
陈帅's avatar
陈帅 committed
120
)(Form.create<Step2Props>()(Step2));