userWalletRecord.tsx - AiToEarn

userWalletRecord.tsx

1	/*
2	* @Author: nevin
3	* @Date: 2025-02-10 22:20:15
4	* @LastEditTime: 2025-03-02 23:01:36
5	* @LastEditors: nevin
6	* @Description: 用户金额记录 userWalletRecord
7	*/
8	import {
9	Button,
10	Table,
11	Space,
12	Tag,
13	message,
14	Modal,
15	Input,
16	Form,
17	Card,
18	Typography,
19	Select,
20	} from 'antd';
21	import { useState, useEffect, useRef } from 'react';
22	import AddWalletAccount from './components/addWalletAccount';
23	import { financeApi } from '@/api/finance';
24	import { AddWalletAccountRef } from './components/addWalletAccount';
25	import { UserWalletRecord } from '@/api/types/finance';
26	import { UserWalletAccount } from '@/api/types/userWalletAccount';
27	import { PlusOutlined } from '@ant-design/icons';
28	import styles from './userWalletRecord.module.scss';
29	import moment from 'moment';
30	const { Title } = Typography;
31
32	export default function Page() {
33	const [walletAccountList, setWalletAccountList] = useState<
34	UserWalletRecord[]
35	>([]);
36	const [walletAccounts, setWalletAccounts] = useState<UserWalletAccount[]>([]);
37	const [loading, setLoading] = useState(false);
38	const [isWithdrawModalVisible, setIsWithdrawModalVisible] = useState(false);
39	const [form] = Form.useForm();
40	const Ref_AddWalletAccountRef = useRef<AddWalletAccountRef>(null);
41
42	async function getDataList() {
43	setLoading(true);
44	try {
45	const res = await financeApi.getWithdrawList({
46	page: 1,
47	pageSize: 10,
48	});
49	setWalletAccountList(res.items);
50	} catch (error) {
51	console.error('获取钱包记录列表失败:', error);
52	message.error('获取钱包记录列表失败');
53	} finally {
54	setLoading(false);
55	}
56	}
57
58	// 获取提现账户列表
59	async function getWalletAccounts() {
60	try {
61	const res = await financeApi.getUserWalletAccountList();
62	setWalletAccounts(res);
63	} catch (error) {
64	console.error('获取提现账户列表失败:', error);
65	message.error('获取提现账户列表失败');
66	}
67	}
68
69	const handleWithdraw = async (values: {
70	amount: number;
71	walletAccountId: string;
72	}) => {
73	// if (values.amount > walletAccountList.balance) {
74	// message.error('提现金额必须大于0');
75	// return;
76	// }
77
78	const res = await financeApi.getUserWalletInfo();
79	if (res.balance < values.amount) {
80	message.error('提现金额必须小于等于当前余额');
81	return;
82	}
83
84	try {
85	await financeApi.addUserWalletRecord({
86	walletAccountId: values.walletAccountId,
87	balance: values.amount,
88	});
89	message.success('提现申请提交成功');
90	setIsWithdrawModalVisible(false);
91	form.resetFields();
92	getDataList();
93	} catch (error) {
94	console.error('提现申请失败:', error);
95	message.error('提现申请失败');
96	}
97	};
98
99	useEffect(() => {
100	getDataList();
101	getWalletAccounts();
102	}, []);
103
104	const columns = [
105	{
106	title: '交易类型',
107	dataIndex: 'type',
108	key: 'type',
109	render: (type: string) => (
110	<Tag color={type === 'withdraw' ? 'red' : 'green'}>
111	{type === 'WITHDRAW' ? '提现' : '充值'}
112	</Tag>
113	),
114	},
115	{
116	title: '账户',
117	dataIndex: 'account',
118	key: 'account',
119	render: (account: any) => (
120	<Space>
121	{account.type === 'ZFB' ? '支付宝' : '微信'} - {account.account}
122	</Space>
123	),
124	},
125	{
126	title: '金额',
127	dataIndex: 'balance',
128	key: 'balance',
129	render: (amount: number, record: UserWalletRecord) => (
130	<Space>
131	{/* {amount > 9999 ? <ArrowUpOutlined style={{ color: '#52c41a' }} /> : <ArrowDownOutlined style={{ color: '#ff4d4f' }} />} */}
132	<span style={{ color: amount < 0 ? '#ff4d4f' : '#52c41a' }}>
133	{record.type === 'WITHDRAW' ? '-' : '+'} {amount}
134	</span>
135	</Space>
136	),
137	},
138	{
139	title: '状态',
140	dataIndex: 'status',
141	key: 'status',
142	render: (status: any) => (
143	<Tag color={status == 0 ? 'orange' : status == 1 ? 'green' : 'red'}>
144	{status == 0 ? '处理中' : status == 1 ? '成功' : '失败'}
145	</Tag>
146	),
147	},
148	{
149	title: '创建时间',
150	dataIndex: 'createTime',
151	key: 'createTime',
152	render: (createTime: string) => {
153	return moment(createTime).format('YYYY-MM-DD HH:mm:ss');
154	},
155	},
156	];
157
158	return (
159	<div className={styles.container}>
160	<AddWalletAccount ref={Ref_AddWalletAccountRef} />
161	<Card className={styles.headerCard} bordered={false}>
162	<div className={styles.header}>
163	<Title level={4} className={styles.title}>
164	交易记录
165	</Title>
166	<Button
167	type="primary"
168	icon={<PlusOutlined />}
169	onClick={() => setIsWithdrawModalVisible(true)}
170	className={styles.withdrawButton}
171	>
172	申请提现
173	</Button>
174	</div>
175	</Card>
176	<Card className={styles.tableCard} bordered={false}>
177	<Table
178	columns={columns}
179	dataSource={walletAccountList}
180	rowKey="id"
181	loading={loading}
182	pagination={false}
183	className={styles.table}
184	/>
185	</Card>
186	<Modal
187	title="申请提现"
188	open={isWithdrawModalVisible}
189	onCancel={() => setIsWithdrawModalVisible(false)}
190	footer={null}
191	className={styles.modal}
192	>
193	<Form form={form} onFinish={handleWithdraw}>
194	<Form.Item
195	name="walletAccountId"
196	label="提现账户"
197	rules={[{ required: true, message: '请选择提现账户' }]}
198	>
199	<Select placeholder="请选择提现账户">
200	{walletAccounts.map((account) => (
201	<Select.Option key={account.id} value={account.id}>
202	{account.type === 'ZFB' ? '支付宝' : '微信'} -{' '}
203	{account.account}
204	</Select.Option>
205	))}
206	</Select>
207	</Form.Item>
208	<Form.Item
209	name="amount"
210	label="提现金额"
211	rules={[
212	{ required: true, message: '请输入提现金额' },
213	{ min: 0, message: '提现金额必须大于0' },
214	]}
215	>
216	<Input
217	type="number"
218	placeholder="请输入提现金额"
219	className={styles.input}
220	/>
221	</Form.Item>
222	<Form.Item>
223	<Button type="primary" htmlType="submit" block>
224	提交
225	</Button>
226	</Form.Item>
227	</Form>
228	</Modal>
229	</div>
230	);
231	}
232

232 lines Plain Text