chuhai-payment-frontend/src/pages/bill/external_create.tsx

89 lines
3.3 KiB
TypeScript

import styles from "@/pages/pay/pay.module.less";
import {useNavigate, useSearchParams} from "react-router-dom";
import {useSetState} from "ahooks";
import {useEffect} from "react";
import {createExternalBill} from "@/service/api/bill.ts";
import {IconLoading} from "@/components/icons";
import {FailIcon} from "@/assets/images/pay/fail.tsx";
import {PayLogo} from "@/pages/pay/component";
// 获取必填参数
const RequiredParams = [
// 'application_number','student_number', 可以不设置
'source',
'amount',
'program_code',
'intake_year',
'intake_semester'
/*
'student_english_name',
'programme_chinese_name', 'student_email','student_chinese_name',
'programme_english_name', 'department_chinese_name',
'department_english_name', 'attendance_mode',
*/
]
const ExternalCreate = () => {
const [state, setState] = useSetState<{
error?: string;
params?: ExternalCreateParamsType;
loading?: boolean;
}>({
loading: true
})
const [searchParams] = useSearchParams();
const navigate = useNavigate()
const createBill = (params: ExternalCreateParamsType) => {
setState({loading: true})
const pay_channel = searchParams.get('pay_channel') || 'flywire'
createExternalBill(params).then((ret) => {
setState({loading: false})
navigate(`/pay?bill=${ret.id}&pay_channel=${pay_channel}`, {replace: true})
}).catch(() => {
setState({loading: false, 'error': 'create pay order failed'})
})
}
useEffect(() => {
if (searchParams) {
const paramsContent = searchParams.get('params');
if (!paramsContent) {
return setState({error: 'params error',loading: false})
}
const params: ExternalCreateParamsType = JSON.parse(paramsContent);
for (let i = 0; i < RequiredParams.length; i++) {
const key = RequiredParams[i];
if (!params[key]) {
return setState({error: 'params error: require ' + key,loading: false})
}
}
if (!params.application_number && !params.student_number) {
return setState({error: 'params error: require application_number or student_number',loading: false})
}
if (!params.details || params.details.length == 0) {
return setState({error: 'params error: require detail',loading: false})
}
let tempAmount = 0;
params.details.forEach((d:BillDetail) => {
tempAmount += Number(d.amount)
})
if(tempAmount != Number(params.amount)){
return setState({error: 'params error: amount not equal to detail amount',loading: false})
}
createBill(params)
return;
}
}, [searchParams])
return (<div className={`${styles.container} text-center`}>
<PayLogo/>
{state.loading && <div>
<div><IconLoading size={70} /></div>
<div></div>
</div>}
{state.error && <div>
<div style={{fontSize:100,color:'rgb(240, 86, 114)',margin:'30px 0 10px'}}><FailIcon /></div>
<h3>{state.error}</h3>
</div>}
</div>)
}
export default ExternalCreate