PointsExchangeModal.tsx
3.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { postIntegralExchangeIntegral } from '@/services/request';
import { getUserInfo } from '@/utils';
import {
ModalForm,
ProFormInstance,
ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, Input, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import '../index.less';
interface PointsExchangeModalProps {
setVisible: (visible: boolean) => void;
record: any;
onClose: () => void;
}
const userInfo = getUserInfo();
const PointsExchangeModal: React.FC<PointsExchangeModalProps> = ({
setVisible,
record,
onClose,
}) => {
const [form] = Form.useForm<{ delta: string; remark: string }>();
const formRef = useRef<ProFormInstance>();
const [accountPoints, setAccountPoints] = useState<number>(0);
// Get account points from record
useEffect(() => {
if (record && record.delta) {
setAccountPoints(Number(record.delta) || 0);
}
}, [record]);
// Validate that delta is not greater than available points
const validateDelta = (rule: any, value: string) => {
const deltaValue = Number(value);
if (isNaN(deltaValue)) {
return Promise.reject('请输入有效的积分数值');
}
if (deltaValue <= 0) {
return Promise.reject('兑换积分必须大于0');
}
if (deltaValue > accountPoints) {
return Promise.reject('兑换积分不能大于账户积分');
}
return Promise.resolve();
};
return (
<div className="prepaid-index">
<ModalForm<{
delta: string;
remark: string;
}>
width={600}
open
title="确认兑换"
form={form}
formRef={formRef}
autoFocusFirstInput
submitter={{
searchConfig: {
submitText: '确认兑换',
resetText: '取消',
},
}}
modalProps={{
destroyOnClose: true,
onCancel: () => {
setVisible(false);
},
}}
onFinish={async (values) => {
try {
// 调用积分兑换API
await postIntegralExchangeIntegral({
data: {
id: Number(record.id),
delta: Number(values.delta),
remark: values.remark,
relationEntityType: 'RESEARCH_GROUP',
createByName: userInfo?.username,
},
});
message.success('积分兑换成功');
setVisible(false);
onClose();
return true;
} catch (error) {
console.error(error);
return false;
}
}}
onOpenChange={setVisible}
>
<Form.Item
label="兑换积分"
name="delta"
rules={[
{ required: true, message: '请输入兑换积分' },
{ validator: validateDelta },
]}
>
<Input style={{ height: '30px' }} placeholder="请输入兑换积分数量" />
</Form.Item>
<Form.Item
label="兑换说明"
name="remark"
rules={[{ required: true, message: '请输入兑换说明' }]}
>
<ProFormTextArea
style={{ height: '100px' }}
placeholder="请输入兑换说明"
/>
</Form.Item>
</ModalForm>
</div>
);
};
export default PointsExchangeModal;