Your Email: {bill.student_email}
- { payChannel == 'asia_pay' ? : }
+ { payChannel == 'asia_pay' && }
+
: <>}
diff --git a/src/pages/pay/pay.module.less b/src/pages/pay/pay.module.less
index 2e46873..3300a02 100644
--- a/src/pages/pay/pay.module.less
+++ b/src/pages/pay/pay.module.less
@@ -9,7 +9,14 @@
width: 600px;
transition: width 0.1s;
}
-
+.payLoading{
+ padding: 50px 0;
+ text-align: center;
+}
+.loadingText{
+ font-size: 32px;
+ margin-top: 20px;
+}
.payAmount {
color: #fff;
background-color: #50ADA7;
diff --git a/src/pages/pay/result.tsx b/src/pages/pay/result.tsx
index 15d301f..522ea0d 100644
--- a/src/pages/pay/result.tsx
+++ b/src/pages/pay/result.tsx
@@ -9,11 +9,14 @@ import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
import {useEffect} from "react";
import {useSetState} from "ahooks";
import {FailIcon} from "@/assets/images/pay/fail.tsx";
-import {updateBillPaymentSuccess} from "@/service/api/bill.ts";
-
-type PayResult = 'fail' | 'success' | 'cancel' | 'error' | string;
+import {getBillDetail, updateBillPaymentSuccess} from "@/service/api/bill.ts";
+import {BillStatus} from "@/service/types.ts";
+import {IconLoading} from "@/components/icons";
+type PayResult = 'fail' | 'success' | 'cancel' | 'error' | 'loading' | string;
+const QUERY_MAX_COUNT = 50,
+ QUERY_DELAY = 6000;
const PayIndex = () => {
const {t} = useTranslation()
@@ -24,14 +27,48 @@ const PayIndex = () => {
id?: string;
bill?: BillModel
status?: string | null;
- }>({});
+ loading?: boolean;
+ queryCount: number;
+ }>({
+ result: 'loading',
+ queryCount: 0
+ });
+
const param = useParams<{ result: PayResult }>();
const [search] = useSearchParams(); // 参数有: from: asia_spay || flywire
- const updateBillSuccess = (billId: number, type: string, ref: string) =>{
+ const updateBillSuccess = (billId: number, type: string, ref: string) => {
+ setState({result: 'loading'})
updateBillPaymentSuccess(billId, ref, type).then(bill => {
- setState({bill})
- }).catch(()=>{
- setState({result:'fail'})
+ setState({
+ result: 'success',
+ bill: bill
+ })
+ }).catch(() => {
+ setState({result: 'fail'})
+ })
+ }
+ const checkBillSuccess = (billId: number) => {
+ setState({
+ result: 'loading',
+ queryCount: state.queryCount + 1
+ })
+
+ getBillDetail(Number(billId)).then((bill) => {
+ // 判断bill状态
+ if (bill.status != BillStatus.PAID) {
+ if(state.queryCount > QUERY_MAX_COUNT) {
+ setState({result: 'fail'})
+ }else{
+ // 重试
+ setTimeout(()=>checkBillSuccess(billId), QUERY_DELAY);
+ }
+ return;
+ }
+ setState({
+ result: 'success',
+ bill: bill
+ })
+ }).catch(() => {
})
}
useEffect(() => {
@@ -47,8 +84,13 @@ const PayIndex = () => {
return;
}
if (result == 'success') {
- updateBillSuccess(Number(bill), from , (from == 'ASIAPAY' ? search.get('Ref')! : search.get('callback_id')!));
+ if (from == 'ASIAPAY') {
+ updateBillSuccess(Number(bill), from, search.get('Ref')!);
+ } else if (from == 'FLYWIRE') {
+ checkBillSuccess(Number(bill));
+ }
}
+ return;
}
setState({result, status})
}, []);
@@ -56,33 +98,42 @@ const PayIndex = () => {
return (
{state.result == 'success' ? <>
-
-
-
+
+
+
+
+
+ {t('pay.text_success')}
+
-
- {t('pay.text_success')}
-
-
- {state.bill &&
-
{t('bill.bill_number')}: {state.bill.student_number || state.bill.application_number}
-
-
-
-
}
- :
-
-
-
-
- {state.result == 'fail' ? t('pay.text_failed') : (
- state.result == 'cancel' ? t('pay.text_canceled') : (t('pay.bill_error'))
- )}
-
-
}
+ {state.bill &&
+
{t('bill.bill_number')}: {state.bill.student_number || state.bill.application_number}
+
+
+
+
}
+
+ : (
+ state.result == 'loading' ?
+
+
{t('pay.query_pay_status')}
+
+ : (
+
+
+
+
+ {state.result == 'fail' ? t('pay.text_failed') : (
+ state.result == 'cancel' ? t('pay.text_canceled') : (t('pay.bill_error'))
+ )}
+
+
)
+ )
+ }
);
}
export default PayIndex;
\ No newline at end of file
diff --git a/src/service/api/bill.ts b/src/service/api/bill.ts
index de3457f..493ca76 100644
--- a/src/service/api/bill.ts
+++ b/src/service/api/bill.ts
@@ -42,6 +42,10 @@ export function getAsiaPayData(id: number) {
return get
(`/bills/${id}/asiapay`)
}
+export function getFlywirePayUrl(id: number, return_cta: string, return_cta_name: string) {
+ return post<{ url: string }>(`/bills/${id}/flywire`, {return_cta, return_cta_name})
+}
+
// 作废订单
export function cancelBill(id: number) {
return put(`/bills/${id}/cancel`)
@@ -51,6 +55,6 @@ export function confirmBills(bill_ids: number[]) {
return post(`/bills/apply`, {bill_ids})
}
-export function updateBillPaymentSuccess(bill_id: number, merchant_ref: string,payment_channel:string) {
- return post(`/bills/finish`, {merchant_ref,payment_channel,bill_id})
+export function updateBillPaymentSuccess(bill_id: number, merchant_ref: string, payment_channel: string) {
+ return post(`/bills/finish`, {merchant_ref, payment_channel, bill_id})
}
diff --git a/src/service/generate-pdf.ts b/src/service/generate-pdf.ts
index 7cc5c3f..b6d8626 100644
--- a/src/service/generate-pdf.ts
+++ b/src/service/generate-pdf.ts
@@ -35,7 +35,7 @@ export function GeneratePdf(bill: BillModel) {
title: 'Programme:',
content: bill.programme_english_name
}, 56)
- drawItem(doc, {title: 'Mode of Study:', content: bill.attendance_mode}, 70)
+ drawItem(doc, {title: 'Mode of Study:', content: bill.attendance_mode}, bill.programme_english_name.length > 70?70:64)
// draw table
autoTable(doc, {
startY: 80,