✨ feat: Add topup billing history with admin manual completion
Implement comprehensive topup billing system with user history viewing and admin management capabilities.
## Features Added
### Frontend
- Add topup history modal with paginated billing records
- Display order details: trade number, payment method, amount, money, status, create time
- Implement empty state with proper illustrations
- Add payment method column with localized display (Stripe, Alipay, WeChat)
- Add admin manual completion feature for pending orders
- Add Coins icon for recharge amount display
- Integrate "Bills" button in RechargeCard header
- Optimize code quality by using shared utility functions (isAdmin)
- Extract constants for status and payment method mappings
- Use React.useMemo for performance optimization
### Backend
- Create GET `/api/user/topup/self` endpoint for user topup history with pagination
- Create POST `/api/user/topup/complete` endpoint for admin manual order completion
- Add `payment_method` field to TopUp model for tracking payment types
- Implement `GetUserTopUps` method with proper pagination and ordering
- Implement `ManualCompleteTopUp` with transaction safety and row-level locking
- Add application-level mutex locks to prevent concurrent order processing
- Record payment method in Epay and Stripe payment flows
- Ensure idempotency and data consistency with proper error handling
### Internationalization
- Add i18n keys for Chinese (zh), English (en), and French (fr)
- Support for billing-related UI text and status messages
## Technical Improvements
- Use database transactions with FOR UPDATE row-level locking
- Implement sync.Map-based mutex for order-level concurrency control
- Proper error handling and user-friendly toast notifications
- Follow existing codebase patterns for empty states and modals
- Maintain code quality with extracted render functions and constants
## Files Changed
- Backend: controller/topup.go, controller/topup_stripe.go, model/topup.go, router/api-router.go
- Frontend: web/src/components/topup/modals/TopupHistoryModal.jsx (new), web/src/components/topup/RechargeCard.jsx, web/src/components/topup/index.jsx
- i18n: web/src/i18n/locales/{zh,en,fr}.json
This commit is contained in:
@@ -18,7 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Button, Col, Form, Row, Spin, DatePicker, Typography, Modal } from '@douyinfe/semi-ui';
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Form,
|
||||
Row,
|
||||
Spin,
|
||||
DatePicker,
|
||||
Typography,
|
||||
Modal,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
@@ -90,40 +99,58 @@ export default function SettingsLog(props) {
|
||||
const targetTime = targetDate.format('YYYY-MM-DD HH:mm:ss');
|
||||
const currentTime = now.format('YYYY-MM-DD HH:mm:ss');
|
||||
const daysDiff = now.diff(targetDate, 'day');
|
||||
|
||||
|
||||
Modal.confirm({
|
||||
title: t('确认清除历史日志'),
|
||||
content: (
|
||||
<div style={{ lineHeight: '1.8' }}>
|
||||
<p>
|
||||
<Text>{t('当前时间')}:</Text>
|
||||
<Text strong style={{ color: '#52c41a' }}>{currentTime}</Text>
|
||||
<Text strong style={{ color: '#52c41a' }}>
|
||||
{currentTime}
|
||||
</Text>
|
||||
</p>
|
||||
<p>
|
||||
<Text>{t('选择时间')}:</Text>
|
||||
<Text strong type="danger">{targetTime}</Text>
|
||||
<Text strong type='danger'>
|
||||
{targetTime}
|
||||
</Text>
|
||||
{daysDiff > 0 && (
|
||||
<Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text>
|
||||
<Text type='tertiary'>
|
||||
{' '}
|
||||
({t('约')} {daysDiff} {t('天前')})
|
||||
</Text>
|
||||
)}
|
||||
</p>
|
||||
<div style={{
|
||||
background: '#fff7e6',
|
||||
border: '1px solid #ffd591',
|
||||
padding: '12px',
|
||||
borderRadius: '4px',
|
||||
marginTop: '12px',
|
||||
color: '#333'
|
||||
}}>
|
||||
<Text strong style={{ color: '#d46b08' }}>⚠️ {t('注意')}:</Text>
|
||||
<div
|
||||
style={{
|
||||
background: '#fff7e6',
|
||||
border: '1px solid #ffd591',
|
||||
padding: '12px',
|
||||
borderRadius: '4px',
|
||||
marginTop: '12px',
|
||||
color: '#333',
|
||||
}}
|
||||
>
|
||||
<Text strong style={{ color: '#d46b08' }}>
|
||||
⚠️ {t('注意')}:
|
||||
</Text>
|
||||
<Text style={{ color: '#333' }}>{t('将删除')} </Text>
|
||||
<Text strong style={{ color: '#cf1322' }}>{targetTime}</Text>
|
||||
<Text strong style={{ color: '#cf1322' }}>
|
||||
{targetTime}
|
||||
</Text>
|
||||
{daysDiff > 0 && (
|
||||
<Text style={{ color: '#8c8c8c' }}> ({t('约')} {daysDiff} {t('天前')})</Text>
|
||||
<Text style={{ color: '#8c8c8c' }}>
|
||||
{' '}
|
||||
({t('约')} {daysDiff} {t('天前')})
|
||||
</Text>
|
||||
)}
|
||||
<Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text>
|
||||
</div>
|
||||
<p style={{ marginTop: '12px' }}>
|
||||
<Text type="danger">{t('此操作不可恢复,请仔细确认时间后再操作!')}</Text>
|
||||
<Text type='danger'>
|
||||
{t('此操作不可恢复,请仔细确认时间后再操作!')}
|
||||
</Text>
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
@@ -203,10 +230,18 @@ export default function SettingsLog(props) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Text type="tertiary" size="small" style={{ display: 'block', marginTop: 4, marginBottom: 8 }}>
|
||||
<Text
|
||||
type='tertiary'
|
||||
size='small'
|
||||
style={{ display: 'block', marginTop: 4, marginBottom: 8 }}
|
||||
>
|
||||
{t('将清除选定时间之前的所有日志')}
|
||||
</Text>
|
||||
<Button size='default' type='danger' onClick={onCleanHistoryLog}>
|
||||
<Button
|
||||
size='default'
|
||||
type='danger'
|
||||
onClick={onCleanHistoryLog}
|
||||
>
|
||||
{t('清除历史日志')}
|
||||
</Button>
|
||||
</Spin>
|
||||
|
||||
Reference in New Issue
Block a user