PointsExchangeModal.tsx
2.7 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
import { postIntegralExchangeIntegral } from '@/services/request';
import {
ModalForm,
ProFormInstance,
ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, Input, message } from 'antd';
import React, { useRef } from 'react';
import '../index.less';
interface PointsExchangeModalProps {
setVisible: (visible: boolean) => void;
userInfoObj: {
uid: string;
nickname?: string;
realName?: string;
[key: string]: any;
};
onClose: () => void;
}
const PointsExchangeModal: React.FC<PointsExchangeModalProps> = ({
setVisible,
userInfoObj,
onClose,
}) => {
const [form] = Form.useForm<{ delta: string; remark: string }>();
const formRef = useRef<ProFormInstance>();
const uid = userInfoObj?.uid;
const userName = userInfoObj?.nickname || userInfoObj?.realName || '';
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(uid), // 使用用户的uid作为id参数
delta: values.delta, // 将delta设为负数
remark: values.remark, // 兑换说明
createByName: userName, // 使用昵称或真实姓名作为createByName
},
});
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: '请输入兑换积分' }]}
>
<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;