index.tsx 1.86 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Button, Col, Row } 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
import { StateType } from '../../model';
陈帅's avatar
陈帅 committed
6
import Result from '../Result';
7
import styles from './index.less';
8

陈帅's avatar
陈帅 committed
9
interface Step3Props {
陈帅's avatar
陈帅 committed
10
  data?: StateType['step'];
陈帅's avatar
陈帅 committed
11
  dispatch?: Dispatch<any>;
陈帅's avatar
陈帅 committed
12 13
}

陈帅's avatar
陈帅 committed
14 15 16 17
const Step3: React.FC<Step3Props> = props => {
  const { data, dispatch } = props;
  if (!data) {
    return null;
WhatAKitty's avatar
WhatAKitty committed
18
  }
陈帅's avatar
陈帅 committed
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 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
  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
        payload: 'info',
      });
    }
  };
  const information = (
    <div className={styles.information}>
      <Row>
        <Col xs={24} sm={8} className={styles.label}>
          付款账户:
        </Col>
        <Col xs={24} sm={16}>
          {data.payAccount}
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={8} className={styles.label}>
          收款账户:
        </Col>
        <Col xs={24} sm={16}>
          {data.receiverAccount}
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={8} className={styles.label}>
          收款人姓名:
        </Col>
        <Col xs={24} sm={16}>
          {data.receiverName}
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={8} className={styles.label}>
          转账金额:
        </Col>
        <Col xs={24} sm={16}>
          <span className={styles.money}>{data.amount}</span>
        </Col>
      </Row>
    </div>
  );
  const actions = (
    <Fragment>
      <Button type="primary" onClick={onFinish}>
        再转一笔
      </Button>
      <Button>查看账单</Button>
    </Fragment>
  );
  return (
    <Result
      type="success"
      title="操作成功"
      description="预计两小时内到账"
      extra={information}
      actions={actions}
      className={styles.result}
    />
  );
};
lijiehua's avatar
lijiehua committed
82 83

export default Step3;