bilingo-ui/src/components/Payment/WantedPublishView/index.tsx

import React from 'react';
import classnames from 'classnames';
import { Divider, Input, Button } from 'antd';

import wantedCover from '../assets/cover_wanted@2x.png';
import styles from './WantedPublishView.less';

interface WantedPublishViewProps {
  type?: 'pop'|'modal';
  wrapperClass?: string;
  current_wanted: number|string|null;
  InputWantedValueChange: Function;
  InputWantedPressEnter: Function;
  InputWantedOnBlur: Function;
  InputWantedClear: Function;
  CloseFunction: Function;
}
interface WantedPublishViewState {
  payment?: number
}

class WantedPublishView extends React.Component<WantedPublishViewProps, WantedPublishViewState> {
  constructor(props: WantedPublishViewProps) {
    super(props);
    this.state = {};
  }

  render() {
    const { current_wanted, wrapperClass } = this.props; 
    return (
      <div className={classnames(styles.wrapper, {
        [wrapperClass ? wrapperClass : '']: true
      })}>
        <header>设置悬赏金额</header>
        <section className={styles.wanted_middle}>
          <img className={styles.wanted_cover} src={wantedCover} alt="wanted_image"/>
          <div>悬赏提问</div>
        </section>
        <Divider style={{ minWidth: 'auto', marginLeft: 'auto', marginRight: 'auto', width: '266px'}} />
        <section className={styles.wanted_bottom}>
          <div className={styles.wanted_bottom_title}>设置悬赏金额范围¥5.00～¥10000</div>
          <Input
            className={styles.wanted_input_number}
            suffix="元"
            value={current_wanted || ''}
            onChange={v => {
              if (!/^[.0-9]*$/g.test(v.target.value)) return;
              this.props.InputWantedValueChange(v.target.value);
            }}
            onPressEnter={() => {
              this.props.InputWantedPressEnter(current_wanted);
            }}
            onBlur={() => {
              this.props.InputWantedOnBlur(current_wanted);
            }}
            autoFocus
          />
          <div className={styles.wanted_bottom_tips}>
            若5天内没人回答该问题, 所支付的金额将退还至您的钱包
          </div>
        </section>
        <footer>
          <Button
            className={styles.wanted_confirm_button}
            onClick={() => this.props.CloseFunction()}
          >
            确定
          </Button>
          <div
            role="button"
            tabIndex={-1}
            onClick={() => this.props.InputWantedClear()}
            className={styles.wanted_cancel_button}
          >
            取消悬赏
          </div>
        </footer>
      </div>
    )
  }
}

export default WantedPublishView;