153 lines
5.5 KiB
TypeScript
153 lines
5.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Modal, Button, Form, Input, InputNumber, message, List } from 'antd';
|
|
import { useUserInfo } from '@/store/userStore';
|
|
import { ICustomer } from '@/models/types';
|
|
import axios from 'axios';
|
|
|
|
interface RechargeProps {
|
|
visible: boolean;
|
|
onCancel: () => void;
|
|
customer: ICustomer | null;
|
|
onRechargeSuccess: () => void; // 充值成功后的回调
|
|
}
|
|
|
|
const Recharge: React.FC<RechargeProps> = ({ visible, onCancel, customer, onRechargeSuccess }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [balance, setBalance] = useState<number | null>(null);
|
|
const [transactions, setTransactions] = useState<any[]>([]); // 存储交易记录
|
|
const [form] = Form.useForm();
|
|
const { 团队 } = useUserInfo();
|
|
|
|
useEffect(() => {
|
|
const fetchBalanceAndTransactions = async () => {
|
|
if (customer?._id) {
|
|
try {
|
|
// 重置状态
|
|
setBalance(null);
|
|
setTransactions([]);
|
|
form.resetFields();
|
|
|
|
// 获取客户余额
|
|
const balanceResponse = await axios.get(`/api/backstage/balance/${customer._id}`);
|
|
if (balanceResponse.status === 200) {
|
|
setBalance(balanceResponse.data.balance ?? 0); // 默认值为 0
|
|
} else {
|
|
setBalance(0); // 无法获取余额时设为 0
|
|
}
|
|
|
|
// 获取客户交易记录
|
|
const transactionsResponse = await axios.get(`/api/backstage/transactions/${customer._id}`);
|
|
if (transactionsResponse.status === 200) {
|
|
setTransactions(transactionsResponse.data.transactions);
|
|
} else {
|
|
message.error('无法获取交易记录');
|
|
}
|
|
} catch (error) {
|
|
console.error('获取数据时出错:', error);
|
|
setBalance(0); // 错误情况下设为 0
|
|
message.error('无余额交易记录');
|
|
}
|
|
}
|
|
};
|
|
|
|
if (visible) {
|
|
fetchBalanceAndTransactions();
|
|
}
|
|
}, [customer, visible]);
|
|
|
|
const handleRecharge = async () => {
|
|
if (!customer?._id) {
|
|
message.error('请先选择客户');
|
|
return;
|
|
}
|
|
try {
|
|
setLoading(true);
|
|
const values = await form.validateFields();
|
|
const { 金额, 描述 } = values;
|
|
|
|
const response = await axios.post('/api/backstage/transactions', {
|
|
团队: 团队?._id,
|
|
客户: customer?._id,
|
|
类型: '充值',
|
|
金额,
|
|
描述,
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
message.success('充值成功');
|
|
onRechargeSuccess();
|
|
onCancel();
|
|
} else {
|
|
message.error('充值失败，请重试');
|
|
}
|
|
} catch (error) {
|
|
message.error('充值失败，请检查输入并重试');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
//title="充值"
|
|
title={<div className="text-2xl">客户充值</div>}
|
|
onCancel={onCancel}
|
|
footer={[
|
|
<Button key="back" onClick={onCancel}>
|
|
取消
|
|
</Button>,
|
|
<Button key="submit" type="primary" loading={loading} onClick={handleRecharge}>
|
|
确认充值
|
|
</Button>,
|
|
]}
|
|
>
|
|
{balance !== null && balance !== undefined ? (
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<h2>当前余额: ¥ {balance.toFixed(2)}</h2>
|
|
</div>
|
|
) : (
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<strong>当前余额: ¥ 0</strong>
|
|
</div>
|
|
)}
|
|
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="金额"
|
|
label="充值金额"
|
|
rules={[{ required: true, message: '请输入充值金额' }]}
|
|
>
|
|
<InputNumber min={0.01} step={0.01} precision={2} style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="描述"
|
|
label="描述"
|
|
>
|
|
<Input placeholder="可选，填写描述信息" />
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<div style={{ marginTop: '24px' }}>
|
|
<h3>余额交易记录</h3>
|
|
<div style={{ maxHeight: '320px', overflowY: 'auto' }}>
|
|
<List
|
|
itemLayout="horizontal"
|
|
dataSource={transactions}
|
|
renderItem={item => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
title={`类型: ${item.类型}`}
|
|
description={`金额: ¥${item.金额.toFixed(2)} - 日期: ${new Date(item.日期).toLocaleDateString()} - 描述: ${item.描述}`}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default Recharge;
|