mfyx_web/src/Material/components/ApplyResult.tsx

import React from 'react'

import { Form, Modal } from 'antd'
import SuccessSvg from 'assets/success.svg'
import FailSvg from 'assets/fail.svg'

import NButton from 'components/NButton/NButton'
import { EOrderStatus, IOrderPayStatusRes } from '../Material.service'
import styles from '../css/NoPermission.module.scss'

const { Item } = Form
interface IApplyPermissionProps {
  visible: boolean
  info: IOrderPayStatusRes | null
  onCloseModel: () => void
}

/**
 * 支付结果 todo
 */
const ApplyResult: React.FC<IApplyPermissionProps> = props => {
  const { visible, info, onCloseModel } = props

  const handleToClose = () => {
    onCloseModel()
  }

  if (!info) return null
  return (
    <Modal
      open={visible}
      centered={true}
      onCancel={handleToClose}
      destroyOnClose={true}
      maskClosable={false}
      title="支付结果"
      footer={null}
    >
      <div className={styles['paymodel-content-wrapper']}>
        {(info.Source === 'article' || info.Source === 'yanxuanspecial') && (
          <>
            <div className="paymodel-title">
              {info.OrderStatus === EOrderStatus.Payed ? (
                <>
                  <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
                  <span>畅读卡购买成功</span>
                  <div className="paymodel-text">有效期至：{info.EndDate}</div>
                </>
              ) : (
                <>
                  <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
                  <span>{info.OrderStatus === EOrderStatus.Cancel ? '订单已关闭' : '支付失败'}</span>
                </>
              )}
            </div>
          </>
        )}
        {(info.Source === 'activity' || info.Source === 'activityvoice' || info.Source === 'activityvideo') && (
          <>
            <div className="paymodel-title">
              {info.OrderStatus === EOrderStatus.Payed ? (
                <div>
                  <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
                  <span>{info.IsPublicActivitie ? '畅读卡购买成功' : '支付成功'}</span>
                  {info.IsPublicActivitie && <div className="paymodel-text">有效期至：{info.EndDate}</div>}
                  {info.Source === 'activity' && (
                    <div className="paymodel-text">
                      {info.IsSignUp ? '您已成功报名此活动' : '请到活动页面选择参会方式'}
                    </div>
                  )}
                </div>
              ) : (
                <>
                  <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
                  <span>{info.OrderStatus === EOrderStatus.Cancel ? '订单已关闭' : '支付失败'}</span>
                </>
              )}
            </div>
          </>
        )}
      </div>
      <div className={styles['paymodel-footer-wrapper']}>
        {}
        <NButton type="primary" onClick={handleToClose} size="large" className="pay-btn">
          {info.Source === 'article' || info.Source === 'yanxuanspecial' ? '关闭' : '返回活动页'}
        </NButton>
      </div>
    </Modal>
  )
}

export default ApplyResult