|
|
@@ -0,0 +1,208 @@
|
|
|
+import styles from './styles.module.scss';
|
|
|
+import {useSelector} from "react-redux";
|
|
|
+import {getWithdrawRecord, getWithdrawRecordStatus} from "@features/paySlice";
|
|
|
+import React, {useEffect, useState} from "react";
|
|
|
+import {REQ_STATUS} from "@api/config";
|
|
|
+import SmallLoading from "@components/SmallLoading";
|
|
|
+import Spring from "@components/Spring";
|
|
|
+import {formatCash, formatDate} from "@utils/helpers";
|
|
|
+import {CopyToClipboard} from "react-copy-to-clipboard";
|
|
|
+import {toast} from "react-toastify";
|
|
|
+import SvgIcon from "@components/SvgIcon";
|
|
|
+import Popup from "@components/Popup";
|
|
|
+import {ReactComponent as SuccssLogo} from '@assets/singlesvg/succss.svg';
|
|
|
+import {ReactComponent as PendingLogo} from '@assets/singlesvg/pending.svg';
|
|
|
+import {ReactComponent as FailedLogo} from '@assets/singlesvg/failed.svg';
|
|
|
+const i18n=global.i18n;
|
|
|
+const stateType = {
|
|
|
+ ERROR: -1, // 订单错误
|
|
|
+ CHECKING: 1, // 审核中
|
|
|
+ SUCCESS: 2, // 提现成功
|
|
|
+ FAIL: 3, // 提现失败
|
|
|
+ RECALL: 4, // 订单撤回
|
|
|
+ PROCESSING: 5, // 处理中
|
|
|
+ TTP_ERROR: 6, // 三方订单异常
|
|
|
+};
|
|
|
+const WWithdrawRecord=({close})=>{
|
|
|
+ const status=useSelector(getWithdrawRecordStatus);
|
|
|
+ const recordList=useSelector(getWithdrawRecord);
|
|
|
+ const [showDetails,setShowDetails]=useState(false);
|
|
|
+ const [detailInfo,setDetailInfo]=useState(null);
|
|
|
+ useEffect(()=>{
|
|
|
+
|
|
|
+ },[])
|
|
|
+ const getStateTxt=(state)=>{
|
|
|
+ switch(state) {
|
|
|
+ case stateType.CHECKING: {
|
|
|
+ return i18n.t("withdraw.record.wait");
|
|
|
+ }
|
|
|
+ case stateType.SUCCESS: {
|
|
|
+ return i18n.t("withdraw.record.success");
|
|
|
+ }
|
|
|
+ case stateType.PROCESSING: {
|
|
|
+ return i18n.t("withdraw.record.processing");
|
|
|
+ }
|
|
|
+ case stateType.ERROR:
|
|
|
+ case stateType.FAIL:
|
|
|
+ case stateType.TTP_ERROR:
|
|
|
+ case stateType.RECALL: {
|
|
|
+ return i18n.t("withdraw.record.fail");
|
|
|
+ }
|
|
|
+ default: return "error";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const getStateCls=(state)=>{
|
|
|
+ switch(state) {
|
|
|
+ case stateType.PROCESSING:
|
|
|
+ case stateType.CHECKING: {
|
|
|
+ return styles.status_pending;
|
|
|
+ }
|
|
|
+ case stateType.SUCCESS: {
|
|
|
+ return styles.status_success;
|
|
|
+ }
|
|
|
+ case stateType.ERROR:
|
|
|
+ case stateType.FAIL:
|
|
|
+ case stateType.RECALL: {
|
|
|
+ return styles.status_failed;
|
|
|
+ }
|
|
|
+ default: return styles.status_pending;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const getStateLogo=(state)=>{
|
|
|
+ switch(state) {
|
|
|
+ case stateType.PROCESSING:
|
|
|
+ case stateType.CHECKING: {
|
|
|
+ return PendingLogo;
|
|
|
+ }
|
|
|
+ case stateType.SUCCESS: {
|
|
|
+ return SuccssLogo;
|
|
|
+ }
|
|
|
+ case stateType.ERROR:
|
|
|
+ case stateType.FAIL:
|
|
|
+ case stateType.RECALL: {
|
|
|
+ return FailedLogo;
|
|
|
+ }
|
|
|
+ default: return PendingLogo;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const renderContent=()=>{
|
|
|
+ if (status===REQ_STATUS.LOADING)return (<SmallLoading></SmallLoading>);
|
|
|
+ if (recordList==null)return (<></>);
|
|
|
+ return (
|
|
|
+ <Spring type="slideUp" className={styles.content}>
|
|
|
+ {
|
|
|
+ recordList.map((item,index)=>{
|
|
|
+ let amount=Number(item.ExchangeScore)+Number(item.Fee);
|
|
|
+ let amount_str=global.DOLLAR+formatCash(amount);
|
|
|
+ let time_str=formatDate(item.CreateDate*1000);
|
|
|
+ let statusTxt=getStateTxt(item.State);
|
|
|
+ let status_cls=getStateCls(item.State);
|
|
|
+ return (
|
|
|
+ <button key={index} className={styles.item_con} onClick={()=>{
|
|
|
+ setDetailInfo(item);
|
|
|
+ setShowDetails(true);
|
|
|
+ }}>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div className={styles.title}>
|
|
|
+ {amount_str}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div>{time_str}</div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <CopyToClipboard text={item.OrderID} onCopy={() => {
|
|
|
+ toast.success(i18n.t("copy_success"));
|
|
|
+ }}>
|
|
|
+ <div className={styles.payment_sn_con} onClick={(event) => {
|
|
|
+ event.stopPropagation();
|
|
|
+ }}>
|
|
|
+ {item.OrderID}
|
|
|
+ <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
|
|
|
+ </div>
|
|
|
+ </CopyToClipboard>
|
|
|
+ <div className={status_cls}>
|
|
|
+ {statusTxt}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Spring>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderDetails=()=>{
|
|
|
+ let item=detailInfo;
|
|
|
+ if (item==null)return (<></>);
|
|
|
+ let ExchangeScore=Number(item.ExchangeScore);
|
|
|
+ let Fee=Number(item.Fee);
|
|
|
+ let amount=ExchangeScore+Fee;
|
|
|
+ let amount_str=global.DOLLAR+formatCash(amount);
|
|
|
+ let status=parseInt(item.State);
|
|
|
+ let statusTxt=getStateTxt(status);
|
|
|
+ let status_cls=getStateCls(status);
|
|
|
+ let Logo=getStateLogo(status);
|
|
|
+ return (
|
|
|
+ <Popup onClose={()=>{
|
|
|
+ setShowDetails(false)
|
|
|
+ }} open={showDetails}>
|
|
|
+ <div className={styles.detail}>
|
|
|
+ <div className={styles.top}>
|
|
|
+ <div>{i18n.t("withdraw.record.detail_title")}</div>
|
|
|
+ <div className={styles.status}>
|
|
|
+ <Logo className={styles.logo}></Logo>
|
|
|
+ <div className={status_cls}>
|
|
|
+ {statusTxt}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>{amount_str}</div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.line}></div>
|
|
|
+ <div className={styles.bottom}>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div
|
|
|
+ className={styles.label}>{i18n.t("withdraw.record.exchage")}</div>
|
|
|
+ <div>{global.DOLLAR + formatCash(ExchangeScore)}</div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div
|
|
|
+ className={styles.label}>{i18n.t("withdraw.record.fee")}</div>
|
|
|
+ <div>{global.DOLLAR + formatCash(Fee)}</div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div
|
|
|
+ className={styles.label}>{i18n.t("withdraw.record.time")}</div>
|
|
|
+ <div>{formatDate(item.CreateDate*1000)}</div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div
|
|
|
+ className={styles.label}>{i18n.t("withdraw.record.orderId")}</div>
|
|
|
+ <CopyToClipboard text={item.OrderID} onCopy={() => {
|
|
|
+ toast.success(i18n.t("copy_success"));
|
|
|
+ }}>
|
|
|
+ <div className={styles.number}>
|
|
|
+ {item.OrderID}
|
|
|
+ <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
|
|
|
+ </div>
|
|
|
+ </CopyToClipboard>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.line}></div>
|
|
|
+ <button className={"button-green"} onClick={() => {
|
|
|
+ setShowDetails(false);
|
|
|
+ }}>
|
|
|
+ {i18n.t("deposit.HistoryListPanel.details.btn_confirm")}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div className={styles.container}>
|
|
|
+ {renderContent()}
|
|
|
+ {renderDetails()}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+export default WWithdrawRecord;
|
