index.tsx 2.25 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 6
import { connect } from 'dva';
import { IStateType } from '../../model';
陈帅's avatar
陈帅 committed
7
import Result from '../Result';
8
import styles from './index.less';
9

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

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

export default Step3;