1082 lines
47 KiB
TypeScript
1082 lines
47 KiB
TypeScript
import './payment.css';
|
||
import {
|
||
Button,
|
||
ConfigProvider,
|
||
DatePicker,
|
||
// Divider,
|
||
Flex,
|
||
Form, GetProp, Image,
|
||
Input,
|
||
InputNumber,
|
||
message,
|
||
Radio,
|
||
Spin,
|
||
Upload, UploadProps,
|
||
Tag,
|
||
Modal,
|
||
// Select,
|
||
Table
|
||
} from "antd";
|
||
import {
|
||
ReloadOutlined
|
||
} from '@ant-design/icons'
|
||
import { useEffect, useRef, useState } from "react";
|
||
import locale from 'antd/locale/zh_CN';
|
||
import dayjs from 'dayjs';
|
||
import 'dayjs/locale/zh-cn';
|
||
import { DevUserId, get, post, uploadImageUrl } from "../../util/AjaxUtils.ts";
|
||
import { UploadOutlined } from "@ant-design/icons";
|
||
import useMessage from "antd/es/message/useMessage";
|
||
import { errorImage } from "../../util/CommonUtil.ts";
|
||
import type {
|
||
TableColumnsType,
|
||
// TableProps
|
||
} from 'antd';
|
||
import wx from '../../static/wx.png';
|
||
import zfb from '../../static/zfb.png';
|
||
import dg from '../../static/dg.png';
|
||
import nodate from '../../static/nodate.png';
|
||
|
||
// import { render } from 'react-dom';
|
||
interface DataType {
|
||
key: React.Key;
|
||
packageName: string;
|
||
packageMoney: number;
|
||
packageDescription: string;
|
||
packageInfoId: string;
|
||
}
|
||
|
||
dayjs.locale('zh-cn');
|
||
|
||
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
|
||
|
||
type FormFieldType = {
|
||
thirdParty: string;
|
||
rechargeMoney: number;
|
||
orgName: string;
|
||
orgBank: string;
|
||
orgNumber: string;
|
||
rechargeFinalTime: string;
|
||
rechargeVoucher: string;
|
||
}
|
||
|
||
type PayType = {
|
||
accountRechargeId: string;
|
||
thirdPartyPayUrl: string;
|
||
}
|
||
|
||
type PaySystemBank = {
|
||
bankAccountName: string;
|
||
bankName: string;
|
||
bankNumber: string;
|
||
bankRemark: string;
|
||
bankUnionpayNumber: string;
|
||
}
|
||
|
||
enum ThirdPartyEnum {
|
||
WX = '微信',
|
||
ZFB = '支付宝',
|
||
DGZZ = '对公转账'
|
||
}
|
||
|
||
interface IPaymentProps {
|
||
handleConfirm(): void;
|
||
|
||
handleCancel(): void;
|
||
show: boolean;
|
||
}
|
||
|
||
export default function Payment(props: IPaymentProps) {
|
||
// 服务包相关
|
||
const [packPage, setPackPage] = useState(1); //服务包数据分页页码
|
||
// 开启关闭弹窗时重置页码
|
||
useEffect(() => {
|
||
setPackPage(1);
|
||
}, [props.show])
|
||
const [packTotal, setPackTotal] = useState(0); //服务包数据分页总条数
|
||
const [value, setValue] = useState('MATERIAL');//单选 服务包类型
|
||
const onChange = (e: any) => {
|
||
setValue(e.target.value);
|
||
getPackageList(e.target.value, packPage);
|
||
// setSelectedRowKeys([]);
|
||
};
|
||
const [packList, setPackList] = useState<any[]>([]);
|
||
const [packageInfoId, setPackageInfoId] = useState('');//单选 服务包id
|
||
// 获取套餐列表
|
||
const getPackageList = (value: string, page: number) => {
|
||
get<any>({
|
||
messageApi,
|
||
url: `/api/proj/servicepkg/packageinfo/listpage/${value}/self`,
|
||
config: {
|
||
params: {
|
||
page: page,
|
||
rows: 7,
|
||
|
||
}
|
||
},
|
||
onSuccess({ data }) {
|
||
setPackList(data.rows);
|
||
setPackTotal(data.total);
|
||
}
|
||
})
|
||
}
|
||
useEffect(() => {
|
||
getPackageList(value, packPage);
|
||
}, [])
|
||
const packColumns: TableColumnsType<DataType> = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'packageInfoId',
|
||
align: 'center',
|
||
// 宽度
|
||
width: 80,
|
||
render: (_text: number, _record: any, index: number) => {
|
||
return <div>{(packPage - 1) * 7 + index + 1}</div>
|
||
}
|
||
},
|
||
{
|
||
title: '套餐名称',
|
||
width: 150,
|
||
align: 'center',
|
||
dataIndex: 'packageName',
|
||
key: 'packageInfoId',
|
||
ellipsis: {
|
||
showTitle: false,
|
||
},
|
||
render: (text: string) => {
|
||
return <div title={text}>{text}</div>
|
||
}
|
||
},
|
||
{
|
||
title: '套餐说明',
|
||
width: 200,
|
||
align: 'center',
|
||
dataIndex: 'packageDescription',
|
||
key: 'packageInfoId',
|
||
ellipsis: {
|
||
showTitle: false,
|
||
},
|
||
render: (text: string) => {
|
||
return <div title={text}>{text}</div>
|
||
}
|
||
|
||
},
|
||
{
|
||
title: '套餐价格',
|
||
width: 100,
|
||
align: 'center',
|
||
dataIndex: 'packageMoney',
|
||
key: 'packageInfoId',
|
||
render: (text: number) => {
|
||
return <div>{text / 100}元</div>
|
||
}
|
||
},
|
||
{
|
||
title: '可用次数',
|
||
width: 100,
|
||
align: 'center',
|
||
dataIndex: 'packageCount',
|
||
key: 'packageInfoId',
|
||
// render: (text: number) => {
|
||
// return <div>{text / 100}元</div>
|
||
// }
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
width: 100,
|
||
dataIndex: 'operate',
|
||
key: 'packageInfoId',
|
||
render: (_value, record) => {
|
||
return (
|
||
<div>
|
||
<div
|
||
style={{
|
||
display: packageInfoId == record.packageInfoId ? 'none' : 'unset',
|
||
// 鼠标设置成禁选状态
|
||
|
||
|
||
cursor: packageInfoId ? 'not-allowed' : 'pointer',
|
||
color: packageInfoId ? '#898D91' : '#0B4AFF'
|
||
}}
|
||
onClick={() => {
|
||
if (!packageInfoId) {
|
||
setPackageInfoId(record.packageInfoId);
|
||
form.setFieldValue('rechargeMoney', (record.packageMoney) / 100);
|
||
getPay(record.packageInfoId);
|
||
}
|
||
}}
|
||
>选购</div>
|
||
<div
|
||
style={{
|
||
display: packageInfoId == record.packageInfoId ? 'unset' : 'none',
|
||
cursor: 'pointer',
|
||
color: '#0B4AFF'
|
||
}}
|
||
onClick={() => {
|
||
setPackageInfoId('');
|
||
form.setFieldValue('rechargeMoney', 280);
|
||
getPay('');
|
||
}}
|
||
>取消</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
];
|
||
|
||
|
||
|
||
|
||
const [thirdParty, setThirdParty] = useState<ThirdPartyEnum | null>();
|
||
// const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
// useEffect(() => {
|
||
// if (packageInfoId) {
|
||
// setSelectedRowKeys([packageInfoId]);
|
||
// } else {
|
||
// setSelectedRowKeys([]);
|
||
// }
|
||
// }, [packageInfoId]);
|
||
// const rowSelection: TableProps<DataType>['rowSelection'] = {
|
||
// selectedRowKeys,
|
||
// // onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
|
||
// // setSelectedRowKeys(selectedRowKeys);
|
||
// // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||
// // setPackageInfoId(selectedRows[0].packageInfoId);
|
||
// // // form.getFieldValue('rechargeMoney')
|
||
// // form.setFieldValue('rechargeMoney', (selectedRows[0].packageMoney) / 100);
|
||
|
||
// // // getPay(selectedRows[0].packageInfoId);
|
||
// // // console.log(selectedRowKeys, selectedRows);
|
||
// // // if(packageInfoId == selectedRows[0].packageInfoId){
|
||
// // // setSelectedRowKeys([]);
|
||
// // // }else{
|
||
// // // setSelectedRowKeys(selectedRowKeys);
|
||
// // // }
|
||
|
||
|
||
// // },
|
||
|
||
|
||
|
||
// };
|
||
|
||
|
||
// 是否显示完成付款按钮
|
||
const [showPay, setshowPay] = useState('unset')
|
||
// 支付完成弹窗
|
||
const [paymentModal, setPaymentModal] = useState(false)
|
||
const [mask, setMask] = useState(false)
|
||
const [form] = Form.useForm<FormFieldType>();
|
||
const [messageApi, messageApiContext] = useMessage();
|
||
const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [rechargeVoucherArray, setRechargeVoucherArray] = useState<string[]>([]);
|
||
|
||
const [accountRechargeId, setAccountRechargeId] = useState('');
|
||
const [thirdPartyPayUrl, setThirdPartyPayUrl] = useState('');
|
||
const [paySystemBank, setPaySystemBank] = useState<PaySystemBank>({
|
||
bankAccountName: '',
|
||
bankName: '',
|
||
bankNumber: '',
|
||
bankRemark: '',
|
||
bankUnionpayNumber: ''
|
||
});
|
||
const [countdownTime, setCountdownTime] = useState('');
|
||
// const [isCountdownTimeout, setIsCountdownTimeout] = useState(false);
|
||
const moneyRange: number[] = [0.01, 20000];
|
||
const countdownIntervalRef = useRef<any>();
|
||
const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0);
|
||
|
||
/**
|
||
* 倒计时
|
||
*/
|
||
const countdown = () => {
|
||
if (countdownIntervalRef.current) {
|
||
clearInterval(countdownIntervalRef.current);
|
||
}
|
||
// if (thirdParty == ThirdPartyEnum.DGZZ) {
|
||
// return;
|
||
// }
|
||
const Time = new Date().getTime();
|
||
// 设定计时器的时间为60秒
|
||
const countDownDate = new Date(Time + 270 * 1000).getTime();
|
||
// const countDownDate = new Date(Time + 5 * 1000).getTime();
|
||
// 更新计时器的秒数
|
||
const updateCountdown = () => {
|
||
const now = new Date().getTime();
|
||
const distance = countDownDate - now;
|
||
// 将毫秒数转换为分钟和秒数
|
||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||
// 渲染计时器
|
||
setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
|
||
if (distance <= 0) {
|
||
setCountdownTime('已失效');
|
||
// setIsCountdownTimeout(true);
|
||
clearInterval(countdownIntervalRef.current);
|
||
setMask(true)
|
||
}
|
||
}
|
||
// 每秒更新一次计时器
|
||
countdownIntervalRef.current = setInterval(() => {
|
||
updateCountdown();
|
||
}, 1000);
|
||
}
|
||
|
||
const getPay = (packageInfoId: string) => {
|
||
// console.log('获取订单');
|
||
|
||
post<PayType>({
|
||
messageApi,
|
||
url: '/api/pay/get-pay',
|
||
body: {
|
||
rechargeMoney: form.getFieldValue('rechargeMoney'),
|
||
thirdParty: form.getFieldValue('thirdParty'),
|
||
packageInfoId: packageInfoId
|
||
},
|
||
onBefore() {
|
||
setIsLoading(true);
|
||
},
|
||
onSuccess({ data }) {
|
||
// console.log('用户id',data.accountRechargeId);
|
||
|
||
setAccountRechargeId(data.accountRechargeId);
|
||
setThirdPartyPayUrl(data.thirdPartyPayUrl);
|
||
countdown();
|
||
},
|
||
onFinally() {
|
||
setIsLoading(false);
|
||
}
|
||
})
|
||
}
|
||
|
||
const getPaySystemBank = () => {
|
||
get<PaySystemBank>({
|
||
messageApi,
|
||
url: '/api/pay/get-pay-system-bank',
|
||
onSuccess({ data }) {
|
||
setPaySystemBank(data);
|
||
}
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!thirdParty) {
|
||
getPaySystemBank();
|
||
form.setFieldsValue({
|
||
thirdParty: ThirdPartyEnum.DGZZ,
|
||
rechargeMoney: 280
|
||
})
|
||
setThirdParty(ThirdPartyEnum.DGZZ)
|
||
return;
|
||
}
|
||
getPay(packageInfoId);
|
||
// countdown()
|
||
}, [thirdParty, refreshQrCodeCount]);
|
||
|
||
|
||
const renderMoney = () => {
|
||
if (isRechargeMoneyEdit) {
|
||
return (
|
||
<div>
|
||
<div>
|
||
<InputNumber min={0.01} max={2000} defaultValue={form.getFieldValue('rechargeMoney')} />
|
||
<Button type="link" onClick={() => {
|
||
const money = form.getFieldValue('rechargeMoney');
|
||
if (money < moneyRange[0]) {
|
||
form.setFieldValue('rechargeMoney', moneyRange[0]);
|
||
messageApi.error(`金额最小为${moneyRange[0]}`)
|
||
} else if (money > moneyRange[1]) {
|
||
form.setFieldValue('rechargeMoney', moneyRange[1]);
|
||
messageApi.error(`金额最大为${moneyRange[1]}`)
|
||
}
|
||
setIsRechargeMoneyEdit(false);
|
||
getPay(packageInfoId)
|
||
setshowPay('unset')
|
||
}}>确定</Button>
|
||
<span style={{ color: '#1677ff', cursor: 'pointer' }}
|
||
onClick={() => {
|
||
setIsRechargeMoneyEdit(false)
|
||
setshowPay('unset')
|
||
}}
|
||
>取消</span>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
// background:"pink",
|
||
alignItems: 'center',
|
||
}}>
|
||
<div>
|
||
<span style={{
|
||
color: '#FF2222'
|
||
}}>￥</span>
|
||
<span style={{ fontWeight: 'bold', color: '#FF2222', fontSize: '18px' }}>{form.getFieldValue('rechargeMoney')}</span>
|
||
<Button type="link" onClick={() => {
|
||
setIsRechargeMoneyEdit(true);
|
||
setshowPay('none')
|
||
}}>修改</Button>
|
||
</div>
|
||
<div className='moneyBox' >
|
||
<Tag style={{ cursor: 'pointer' }} onClick={() => {
|
||
form.setFieldValue('rechargeMoney', 100);
|
||
setIsRechargeMoneyEdit(false)
|
||
getPay(packageInfoId)
|
||
}} color="volcano">100</Tag>
|
||
<Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
|
||
form.setFieldValue('rechargeMoney', 200);
|
||
setIsRechargeMoneyEdit(false)
|
||
getPay(packageInfoId)
|
||
}} color="volcano">200</Tag>
|
||
<Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
|
||
form.setFieldValue('rechargeMoney', 300);
|
||
setIsRechargeMoneyEdit(false)
|
||
getPay(packageInfoId)
|
||
}} color="volcano">300</Tag>
|
||
<Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
|
||
form.setFieldValue('rechargeMoney', 400);
|
||
setIsRechargeMoneyEdit(false)
|
||
getPay(packageInfoId)
|
||
}} color="volcano">400</Tag>
|
||
<Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
|
||
form.setFieldValue('rechargeMoney', 500);
|
||
setIsRechargeMoneyEdit(false)
|
||
getPay(packageInfoId)
|
||
}} color="volcano">500</Tag>
|
||
</div>
|
||
{/* <div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
// justifyContent: 'center',
|
||
marginTop: '10px'
|
||
}}>
|
||
<div style={{
|
||
|
||
}}>
|
||
购买服务包
|
||
</div>
|
||
<Select
|
||
style={{
|
||
width: '200px',
|
||
// height: '50px', fontSize: '16px',
|
||
}}
|
||
placeholder="请选择服务包"
|
||
className=''
|
||
// defaultValue="JAVA"
|
||
options={[
|
||
{ value: '1', label: `包1(99/100)`, },
|
||
{ value: '2', label: '包2(98/100)' },
|
||
{ value: '3', label: '包3(97/100)' },
|
||
]}
|
||
allowClear
|
||
onChange={(value) => {
|
||
|
||
|
||
}}
|
||
>
|
||
</Select>
|
||
</div> */}
|
||
<div>
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const renderPayBody = () => {
|
||
if (thirdParty == '对公转账') {
|
||
return (
|
||
<div style={{
|
||
marginLeft: 80
|
||
}}>
|
||
|
||
<div>
|
||
<div className='payBoxTitle'>付款方信息</div>
|
||
<table className="pay-table">
|
||
<colgroup>
|
||
<col width="100" />
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<td className="table-label">公司名称 *</td>
|
||
<td>
|
||
<Form.Item
|
||
name="orgName"
|
||
style={{ marginBottom: '0' }}
|
||
rules={[{ required: true, message: '请输入公司名称' }]}
|
||
>
|
||
<Input placeholder="请输入公司名称" />
|
||
</Form.Item>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">开户银行 *</td>
|
||
<td>
|
||
<Form.Item
|
||
name="orgBank"
|
||
style={{ marginBottom: '0' }}
|
||
rules={[{ required: true, message: '请输入开户行' }]}
|
||
>
|
||
<Input placeholder="请输入开户行" />
|
||
</Form.Item>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">银行账号 *</td>
|
||
<td>
|
||
<Form.Item
|
||
name="orgNumber"
|
||
style={{ marginBottom: '0' }}
|
||
rules={[{ required: true, message: '请输入银行账号' }]}
|
||
>
|
||
<Input placeholder="请输入银行账号" />
|
||
</Form.Item>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">打款时间 *</td>
|
||
<td>
|
||
<Form.Item
|
||
name="rechargeFinalTime"
|
||
style={{ marginBottom: '0' }}
|
||
rules={[{ required: true, message: '请选择打款时间' }]}
|
||
>
|
||
<ConfigProvider locale={locale}>
|
||
<DatePicker showTime placeholder="请选择打款时间"
|
||
onChange={(_date, dateString) => {
|
||
form.setFieldValue('rechargeFinalTime', dateString);
|
||
}} />
|
||
</ConfigProvider>
|
||
</Form.Item>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">打款凭证 *</td>
|
||
<td>
|
||
<Form.Item
|
||
name="rechargeVoucher"
|
||
style={{ marginBottom: '0' }}
|
||
valuePropName="fileList"
|
||
getValueFromEvent={(e: any) => {
|
||
if (e.file.status === 'done') {
|
||
rechargeVoucherArray.push(e.file.response.data.fileId);
|
||
setRechargeVoucherArray(rechargeVoucherArray);
|
||
}
|
||
if (e.file.status === 'removed') {
|
||
const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId);
|
||
setRechargeVoucherArray(idArray);
|
||
}
|
||
return e.fileList;
|
||
}}
|
||
rules={[{ required: true, message: '请上传打款凭证' }]}
|
||
>
|
||
<Upload name="image"
|
||
maxCount={2}
|
||
action={uploadImageUrl()}
|
||
headers={{ 'X-USER-ID': DevUserId }}
|
||
beforeUpload={(file: FileType) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||
if (!isJpgOrPng) {
|
||
message.error('只能上传 JPG/PNG 格式文件!');
|
||
}
|
||
return isJpgOrPng;
|
||
}}
|
||
>
|
||
<Button icon={<UploadOutlined />}>上传凭证图片</Button>
|
||
</Upload>
|
||
</Form.Item>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style={{
|
||
marginTop: 25
|
||
}}>
|
||
<div className='payBoxTitle' >收款方信息</div>
|
||
<table className="pay-table">
|
||
<colgroup>
|
||
<col width="100" />
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<td className="table-label">公司名称</td>
|
||
<td>
|
||
<span id="bankAccountName">{paySystemBank.bankAccountName}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">开户银行</td>
|
||
<td>
|
||
<span id="bankName">{paySystemBank.bankName}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">银行账号</td>
|
||
<td>
|
||
<span id="bankNumber">{paySystemBank.bankNumber}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">银行联行号</td>
|
||
<td>
|
||
<span id="bankUnionpayNumber">{paySystemBank.bankUnionpayNumber}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">打款备注</td>
|
||
<td>
|
||
<div id="bankRemark">{paySystemBank.bankRemark}</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="table-label">说明</td>
|
||
<td>
|
||
<div className="mark">请打款时必须按照以上备注填写</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style={{
|
||
marginTop: '15px', textAlign: 'center',
|
||
}}>倒计时:{countdownTime}</div>
|
||
</div>
|
||
)
|
||
}
|
||
return <>
|
||
<Flex gap="middle" align="center" justify="center" vertical>
|
||
<div className="qr-code" style={{ position: 'relative' }}>
|
||
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: "rgba(0,0,0,0.6)", backdropFilter: 'blur(10px)', zIndex: 99, display: isRechargeMoneyEdit ? 'block' : 'none' }}>
|
||
<div style={{ color: '#fff', width: '100%', height: '100%', fontSize: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
正在修改,请稍后...
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
marginLeft: 90
|
||
}}>
|
||
<div className='codeTitle'>支付Pay</div>
|
||
<div style={{
|
||
background: '#FAFCFF',
|
||
height: '630px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flexDirection: 'column',
|
||
|
||
}}>
|
||
|
||
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
|
||
<div className='paytip'>{thirdParty}扫码支付</div>
|
||
<div style={{ marginTop: 10 }}>{countdownTime}</div>
|
||
</div>
|
||
|
||
</div>
|
||
{/* {
|
||
isCountdownTimeout ? (
|
||
<div className="qr-timeout" onClick={() => {
|
||
setRefreshQrCodeCount(refreshQrCodeCount + 1);
|
||
}}>
|
||
<ReloadOutlined />
|
||
<span className="label">点击刷新</span>
|
||
</div>
|
||
) : <></>
|
||
} */}
|
||
|
||
</div>
|
||
|
||
</Flex>
|
||
</>
|
||
}
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<div style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, background: 'rgba(0,0,0,0.6)', zIndex: 99, display: mask ? 'block' : 'none' }}>
|
||
<div style={{ color: '#FFF', fontSize: 16, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} >
|
||
<div style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} onClick={() => {
|
||
setMask(false)
|
||
setRefreshQrCodeCount(refreshQrCodeCount + 1);
|
||
}}>
|
||
<div style={{ fontSize: 70 }}><ReloadOutlined /></div>
|
||
已失效,点击刷新
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* <Spin tip="正在提交..." spinning={isLoading}>
|
||
<Form
|
||
name="basic"
|
||
form={form}
|
||
onFinish={() => {
|
||
setPaymentModal(true)
|
||
|
||
}}
|
||
autoComplete="off"
|
||
>
|
||
<Form.Item
|
||
label="支付方式"
|
||
name="thirdParty"
|
||
rules={[{ required: true }]}
|
||
>
|
||
<Radio.Group onChange={(e) => {
|
||
form.setFieldValue('thirdParty', e.target.value);
|
||
setThirdParty(e.target.value);
|
||
// console.log(e.target.value);
|
||
setPackageInfoId('');
|
||
setIsRechargeMoneyEdit(false)
|
||
setValue('')
|
||
form.setFieldValue('rechargeMoney', 280);
|
||
setSelectedRowKeys([]);
|
||
|
||
}}>
|
||
<Radio value="微信">微信</Radio>
|
||
<Radio value="支付宝">1支付宝</Radio>
|
||
<Radio value="对公转账">对公转账</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="充值金额"
|
||
name="rechargeMoney"
|
||
rules={[{ required: true, message: '请输入金额' }]}
|
||
>
|
||
{renderMoney()}
|
||
</Form.Item>
|
||
|
||
<div style={{
|
||
display: 'flex'
|
||
}}>
|
||
<div style={{
|
||
marginRight: 10
|
||
}}>购买服务包:</div>
|
||
<Radio.Group
|
||
onChange={onChange}
|
||
value={value}
|
||
options={[
|
||
{
|
||
value: 'ALL',
|
||
label: (
|
||
<Flex gap="small" justify="center" align="center" vertical>
|
||
全托管
|
||
</Flex>
|
||
),
|
||
},
|
||
{
|
||
value: 'MATERIAL',
|
||
label: (
|
||
<Flex gap="small" justify="center" align="center" vertical>
|
||
写材料
|
||
</Flex>
|
||
),
|
||
},
|
||
|
||
]}
|
||
/>
|
||
|
||
|
||
</div>
|
||
<div>
|
||
|
||
<div style={{
|
||
display: value ? 'unset' : 'none',
|
||
}}>
|
||
<Table
|
||
columns={packColumns}
|
||
dataSource={packList}
|
||
rowSelection={{
|
||
// ...rowSelection,
|
||
selectedRowKeys,
|
||
type: 'radio', // 设置为单选
|
||
|
||
}}
|
||
pagination={{
|
||
defaultPageSize: 5, // 设置默认一页显示 5 条数据
|
||
}}
|
||
rowKey="packageInfoId"
|
||
onRow={(record) => {
|
||
return {
|
||
onClick: (event: React.MouseEvent<HTMLTableRowElement>) => {
|
||
event.stopPropagation();
|
||
// 模拟点击单选框
|
||
//
|
||
// 判断当前行是否已经被选中
|
||
const isSelected = selectedRowKeys.includes(record.packageInfoId);
|
||
if (isSelected) {
|
||
// 处理取消选择的情况
|
||
setSelectedRowKeys([]);
|
||
setPackageInfoId('');
|
||
form.setFieldValue('rechargeMoney', 280);
|
||
getPay('');
|
||
} else {
|
||
// 处理选中的情况
|
||
setSelectedRowKeys([record.packageInfoId]);
|
||
setPackageInfoId(record.packageInfoId);
|
||
form.setFieldValue('rechargeMoney', (record.packageMoney) / 100);
|
||
getPay(record.packageInfoId);
|
||
}
|
||
},
|
||
style: { cursor: 'pointer' }
|
||
};
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{renderPayBody()}
|
||
<div style={{
|
||
display: thirdParty == '对公转账' ? 'unset' : 'none'
|
||
}}>
|
||
<div style={{ marginTop: '15px', textAlign: 'center', }}>
|
||
<Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)', display: showPay }}>
|
||
完成付款
|
||
</Button>
|
||
<Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
|
||
props.handleCancel();
|
||
}}>关闭窗口</Button>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</Spin> */}
|
||
<Spin tip="正在提交..." spinning={isLoading}>
|
||
<Form
|
||
name="basic"
|
||
form={form}
|
||
onFinish={() => {
|
||
setPaymentModal(true)
|
||
|
||
}}
|
||
autoComplete="off"
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
}}>
|
||
<div className='payBoxLeft'>
|
||
<Form.Item
|
||
label="充值金额"
|
||
name="rechargeMoney"
|
||
rules={[{ required: true, message: '请输入金额' }]}
|
||
>
|
||
{renderMoney()}
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="支付方式"
|
||
name="thirdParty"
|
||
rules={[{ required: true }]}
|
||
>
|
||
<Radio.Group onChange={(e) => {
|
||
form.setFieldValue('thirdParty', e.target.value);
|
||
setThirdParty(e.target.value);
|
||
// console.log(e.target.value);
|
||
setPackageInfoId('');
|
||
setIsRechargeMoneyEdit(false)
|
||
// setValue('')
|
||
form.setFieldValue('rechargeMoney', 280);
|
||
// setSelectedRowKeys([]);
|
||
|
||
}}>
|
||
<Radio value="微信">
|
||
<Image src={wx} width={27} height={25} preview={false} />
|
||
<span style={{ marginLeft: 5, marginRight: 20 }}>微信</span>
|
||
</Radio>
|
||
<Radio value="支付宝">
|
||
<Image src={zfb} width={27} height={25} preview={false} />
|
||
<span style={{ marginLeft: 5, marginRight: 20 }}>支付宝</span>
|
||
</Radio>
|
||
<Radio value="对公转账">
|
||
<Image src={dg} width={27} height={25}
|
||
preview={false}
|
||
/>
|
||
<span style={{ marginLeft: 5 }}>对公转账</span>
|
||
</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
|
||
<div style={{
|
||
display: 'flex'
|
||
}}>
|
||
<div style={{
|
||
marginRight: 10,
|
||
marginLeft: 25
|
||
}}>
|
||
服务包:</div>
|
||
<Radio.Group
|
||
onChange={onChange}
|
||
value={value}
|
||
options={[
|
||
{
|
||
value: 'MATERIAL',
|
||
label: (
|
||
<Flex gap="small" justify="center" align="center" vertical>
|
||
写材料
|
||
</Flex>
|
||
),
|
||
},
|
||
{
|
||
value: 'ALL',
|
||
label: (
|
||
<Flex gap="small" justify="center" align="center" vertical>
|
||
全托管
|
||
</Flex>
|
||
),
|
||
},
|
||
|
||
|
||
]}
|
||
/>
|
||
|
||
|
||
</div>
|
||
<div>
|
||
<div style={{
|
||
display: packList.length > 0 ? 'unset' : 'none',
|
||
marginLeft: 90
|
||
}}>
|
||
|
||
<Table
|
||
columns={packColumns}
|
||
dataSource={packList}
|
||
|
||
|
||
className='packTable'
|
||
bordered
|
||
style={{
|
||
width: '731px',
|
||
height: '441px',
|
||
overflow: 'hidden'
|
||
}}
|
||
|
||
pagination={
|
||
|
||
false
|
||
}
|
||
rowKey="packageInfoId"
|
||
|
||
/>
|
||
<div style={{
|
||
display: packTotal > 7 ? 'unset' : 'none',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
marginTop: 10,
|
||
}}>
|
||
<div className='clickPage'
|
||
onClick={() => {
|
||
if (packPage > 1) {
|
||
setPackPage(packPage - 1);
|
||
getPackageList(value, packPage - 1);
|
||
}else{
|
||
messageApi.error('已经是第一页了');
|
||
}
|
||
}}
|
||
style={{
|
||
cursor: packPage > 1 ? 'pointer' : 'not-allowed',
|
||
background: packPage > 1? '#abc8ff' : '#BAC8DA',
|
||
}}
|
||
>上一页</div>
|
||
<div className='clickPage' style={{
|
||
marginLeft: 10,
|
||
cursor: packPage < packTotal / 7 ? 'pointer' : 'not-allowed',
|
||
background: packPage < packTotal / 7? '#abc8ff' : '#BAC8DA',
|
||
}}
|
||
onClick={() => {
|
||
if (packPage < packTotal / 7) {
|
||
setPackPage(packPage + 1);
|
||
getPackageList(value, packPage + 1);
|
||
}else{
|
||
messageApi.error('已经是最后一页了');
|
||
}
|
||
}}
|
||
|
||
>下一页</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
display: packList.length <= 0 ? 'unset' : 'none',
|
||
marginLeft: 90
|
||
}}>
|
||
<Image
|
||
src={nodate}
|
||
// 点击禁止放大
|
||
preview={false}
|
||
></Image>
|
||
<div style={{
|
||
color: '#BAC8DA ',
|
||
fontSize: 16,
|
||
textAlign: 'center',
|
||
// background:'pink',
|
||
marginLeft: 90
|
||
}}>暂无服务包</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='payBoxRight'>
|
||
{renderPayBody()}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
display: thirdParty == '对公转账' ? 'unset' : 'none'
|
||
}}>
|
||
<div style={{ marginTop: '15px', textAlign: 'center', }}>
|
||
<Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)', display: showPay }}>
|
||
完成付款
|
||
</Button>
|
||
<Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
|
||
props.handleCancel();
|
||
}}>关闭窗口</Button>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</Spin>
|
||
{messageApiContext}
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
open={paymentModal}
|
||
okButtonProps={{
|
||
style: {
|
||
backgroundColor: 'var(--color-primary)', // 设置背景颜色
|
||
},
|
||
}}
|
||
onOk={() => {
|
||
post<any>({
|
||
messageApi,
|
||
url: `/api/pay/pay-account-recharge/${accountRechargeId}`,
|
||
body: {
|
||
thirdParty: form.getFieldValue('thirdParty'),
|
||
rechargeMoney: form.getFieldValue('rechargeMoney'),
|
||
orgName: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgName') : '',
|
||
orgBank: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgBank') : '',
|
||
orgNumber: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgNumber') : '',
|
||
rechargeFinalTime: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('rechargeFinalTime') : '',
|
||
rechargeVoucher: thirdParty == ThirdPartyEnum.DGZZ ? rechargeVoucherArray.join(',') : '',
|
||
packageInfoId: packageInfoId
|
||
},
|
||
onBefore() {
|
||
setIsLoading(true);
|
||
},
|
||
onSuccess() {
|
||
props.handleConfirm();
|
||
},
|
||
onFinally() {
|
||
setIsLoading(false);
|
||
}
|
||
});
|
||
}}
|
||
onCancel={() => {
|
||
setPaymentModal(false);
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
|
||
<div style={{ fontSize: 20, fontWeight: 700 }}>确定对公转账<span style={{ color: 'red' }}>￥<span style={{ fontSize: 30 }}>{form.getFieldValue('rechargeMoney')}</span></span> 吗？不确定请修改金额。</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
} |