index.tsx 2.25 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Fragment } from 'react';
WhatAKitty's avatar
WhatAKitty committed
2
import { connect } from 'dva';
3
import { Button, Row, Col } from 'antd';
陈帅's avatar
陈帅 committed
4
import Result from '../Result';
5
import styles from './index.less';
陈帅's avatar
陈帅 committed
6 7
import { IStateType } from '../../model';
import { Dispatch } from 'redux';
8

陈帅's avatar
陈帅 committed
9 10
interface Step3Props {
  data?: IStateType['step'];
陈帅's avatar
陈帅 committed
11
  dispatch?: Dispatch<any>;
陈帅's avatar
陈帅 committed
12 13 14 15 16 17 18 19 20 21 22 23
}

@connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
  }: {
    BLOCK_NAME_CAMEL_CASE: IStateType;
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    data: BLOCK_NAME_CAMEL_CASE.step,
陈帅's avatar
陈帅 committed
24
  }),
陈帅's avatar
陈帅 committed
25 26
)
class Step3 extends React.Component<Step3Props> {
WhatAKitty's avatar
WhatAKitty committed
27
  render() {
28
    const { data, dispatch } = this.props;
陈帅's avatar
陈帅 committed
29 30 31
    if (!data) {
      return;
    }
WhatAKitty's avatar
WhatAKitty committed
32
    const onFinish = () => {
陈帅's avatar
陈帅 committed
33
      if (dispatch) {
陈帅's avatar
陈帅 committed
34 35 36 37
        dispatch({
          type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
          payload: 'info',
        });
陈帅's avatar
陈帅 committed
38
      }
WhatAKitty's avatar
WhatAKitty committed
39 40 41 42
    };
    const information = (
      <div className={styles.information}>
        <Row>
jim's avatar
jim committed
43
          <Col xs={24} sm={8} className={styles.label}>
jim's avatar
jim committed
44 45
            付款账户:
          </Col>
jim's avatar
jim committed
46 47 48
          <Col xs={24} sm={16}>
            {data.payAccount}
          </Col>
WhatAKitty's avatar
WhatAKitty committed
49 50
        </Row>
        <Row>
jim's avatar
jim committed
51
          <Col xs={24} sm={8} className={styles.label}>
jim's avatar
jim committed
52 53
            收款账户:
          </Col>
jim's avatar
jim committed
54 55 56
          <Col xs={24} sm={16}>
            {data.receiverAccount}
          </Col>
WhatAKitty's avatar
WhatAKitty committed
57 58
        </Row>
        <Row>
jim's avatar
jim committed
59
          <Col xs={24} sm={8} className={styles.label}>
jim's avatar
jim committed
60 61
            收款人姓名:
          </Col>
jim's avatar
jim committed
62 63 64
          <Col xs={24} sm={16}>
            {data.receiverName}
          </Col>
WhatAKitty's avatar
WhatAKitty committed
65 66
        </Row>
        <Row>
jim's avatar
jim committed
67
          <Col xs={24} sm={8} className={styles.label}>
jim's avatar
jim committed
68 69
            转账金额:
          </Col>
jim's avatar
jim committed
70
          <Col xs={24} sm={16}>
jim's avatar
jim committed
71 72
            <span className={styles.money}>{data.amount}</span>
          </Col>
WhatAKitty's avatar
WhatAKitty committed
73 74 75 76
        </Row>
      </div>
    );
    const actions = (
陈帅's avatar
陈帅 committed
77
      <Fragment>
WhatAKitty's avatar
WhatAKitty committed
78 79 80
        <Button type="primary" onClick={onFinish}>
          再转一笔
        </Button>
jim's avatar
jim committed
81
        <Button>查看账单</Button>
陈帅's avatar
陈帅 committed
82
      </Fragment>
WhatAKitty's avatar
WhatAKitty committed
83 84 85 86 87 88 89 90 91 92 93 94 95
    );
    return (
      <Result
        type="success"
        title="操作成功"
        description="预计两小时内到账"
        extra={information}
        actions={actions}
        className={styles.result}
      />
    );
  }
}
lijiehua's avatar
lijiehua committed
96 97

export default Step3;