feat: 按文档对接账务管理下页面逻辑与字段

This commit is contained in:
ZhuRui
2026-07-31 17:25:42 +08:00
parent ea906a0d92
commit 3b107e8d52
29 changed files with 1833 additions and 888 deletions
+25
View File
@@ -0,0 +1,25 @@
/**
* 支付流水 API
* 对应 OpenAPI: GET /admin/finance/paymentFlow/page
*/
import { get } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { buildMockPaymentFlowPage } from '@/config/mock/paymentFlow';
import type { PaymentFlowQueryParams, PaymentFlowVO, PageData, ApiResult } from './types';
export type { PaymentFlowVO, PaymentFlowQueryParams, PageData, ApiResult } from './types';
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
/** GET /admin/finance/paymentFlow/page — 支付流水分页 */
export async function getPaymentFlowList(
params: PaymentFlowQueryParams,
): Promise<ApiResult<PageData<PaymentFlowVO>>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
const page = Number(params.page) || 1;
const limit = Number(params.limit) || 10;
return { code: 200, msg: 'success', data: buildMockPaymentFlowPage(page, limit, params) };
}
return get('/admin/finance/paymentFlow/page', params as Record<string, any>);
}
+48
View File
@@ -0,0 +1,48 @@
/**
* 支付流水 — 类型定义
* 对应 OpenAPI: GET /admin/finance/paymentFlow/page
*/
/** 支付流水列表项 */
export interface PaymentFlowVO {
/** 流水号 */
serialNo: string;
/** 订单编号 */
orderNo: string;
/** 类型:1=报名,2=取消报名 */
type: number;
/** 用户昵称 */
nickname: string;
/** 用户手机 */
phone: string;
/** 订单金额("0.00"格式) */
amount: string;
/** 订单创建时间 */
createDate: string;
}
/** 支付流水查询参数 */
export interface PaymentFlowQueryParams {
page?: string;
limit?: string;
/** 订单创建开始时间 yyyy-MM-dd */
createDateBegin?: string;
/** 订单创建结束时间 yyyy-MM-dd */
createDateEnd?: string;
/** 用户昵称 */
nickname?: string;
/** 手机号 */
phone?: string;
/** 类型:1/2 */
type?: string;
}
export interface PageData<T> {
total: number;
list: T[];
}
export interface ApiResult<T> {
code: number;
msg: string;
data: T;
}
+53
View File
@@ -0,0 +1,53 @@
/**
* 用户钱包 API
* OpenAPI: GET /admin/finance/wallet/summary, GET /admin/finance/wallet/page
*/
import { get } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { buildMockWalletPage } from '@/config/mock/walletList';
import { buildMockWalletTransactionPage } from '@/config/mock/walletTransactions';
import type {
WalletQueryParams,
WalletSummaryVO,
WalletTransactionQueryParams,
WalletTransactionVO,
PageData,
ApiResult,
} from './types';
export type {
WalletSummaryVO,
WalletQueryParams,
WalletTransactionVO,
WalletTransactionQueryParams,
PageData,
ApiResult,
} from './types';
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
/** GET /admin/finance/wallet/summary — 钱包列表分页 */
export async function getWalletList(
params: WalletQueryParams,
): Promise<ApiResult<PageData<WalletSummaryVO>>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
const page = Number(params.page) || 1;
const limit = Number(params.limit) || 10;
return { code: 200, msg: 'success', data: buildMockWalletPage(page, limit, params) };
}
return get('/admin/finance/wallet/summary', params as Record<string, any>);
}
/** GET /admin/finance/wallet/page — 交易明细分页 */
export async function getWalletTransactionList(
params: WalletTransactionQueryParams,
): Promise<ApiResult<PageData<WalletTransactionVO>>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
const page = Number(params.page) || 1;
const limit = Number(params.limit) || 10;
return { code: 200, msg: 'success', data: buildMockWalletTransactionPage(page, limit, params) };
}
return get('/admin/finance/wallet/page', params as Record<string, any>);
}
+92
View File
@@ -0,0 +1,92 @@
/**
* 用户钱包 — 类型定义
* 对应 OpenAPI: GET /admin/finance/wallet/summary
*/
/** 钱包列表项 */
export interface WalletSummaryVO {
/** 用户ID */
userId: number;
/** 用户昵称 */
userNickname: string;
/** 手机号 */
phone: string;
/** 余额("0.00"格式) */
amount: string;
/** 冻结金额("0.00"格式) */
frozenAmount: string;
/** 累计成功提现金额("0.00"格式) */
withdrawalAmount: string;
/** 汇总行-总余额 */
totalAmount: string;
/** 汇总行-总冻结金额 */
totalFrozenAmount: string;
/** 汇总行-总累计提现 */
totalWithdrawalAmount: string;
}
/** 钱包列表查询参数 */
export interface WalletQueryParams {
page?: string;
limit?: string;
/** 用户昵称,模糊搜索 */
nickname?: string;
/** 手机号 */
phone?: string;
/** 余额最小值 */
amountBegin?: string;
/** 余额最大值 */
amountEnd?: string;
}
export interface PageData<T> {
total: number;
list: T[];
}
export interface ApiResult<T> {
code: number;
msg: string;
data: T;
}
// ============================================================
// 交易明细(GET /admin/finance/wallet/page
// ============================================================
/** 交易明细列表项 */
export interface WalletTransactionVO {
/** 类型:1=报名入账,2=提现出账,3=退款出账 */
type: number;
/** 金额("0.00"格式,入账为+,出账为- */
amount: string;
/** 余额("0.00"格式) */
afterAmount: string;
/** 可提现余额("0.00"格式) */
withdrawAmount: string;
/** 冻结金额("0.00"格式) */
freezeAmount: string;
/** 冻结时间 */
freezeTime: string;
/** 解冻时间 */
unfreezeTime: string;
/** 关联单号 */
orderNo: string;
/** 时间 */
createDate: string;
}
/** 交易明细查询参数 */
export interface WalletTransactionQueryParams {
page?: string;
limit?: string;
/** 用户ID */
userId?: string;
/** 创建开始时间 yyyy-MM-dd */
createDateBegin?: string;
/** 创建结束时间 yyyy-MM-dd */
createDateEnd?: string;
/** 类型:1/2/3 */
type?: string;
/** 状态:1=已解冻,2=冻结中,3=正常 */
status?: string;
}
+56
View File
@@ -0,0 +1,56 @@
/**
* 提现管理 API
* 对应 OpenAPI: GET /admin/finance/withdraw/page, GET /admin/finance/withdraw/info
*/
import { get, post } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { buildMockWithdrawPage } from '@/config/mock/withdrawList';
import { buildMockWithdrawInfo } from '@/config/mock/withdrawInfo';
import type { WithdrawQueryParams, WithdrawVO, WithdrawInfoVO, PageData, ApiResult } from './types';
export type { WithdrawVO, WithdrawInfoVO, WithdrawQueryParams, PageData, ApiResult } from './types';
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
/** GET /admin/finance/withdraw/page — 提现列表分页 */
export async function getWithdrawList(
params: WithdrawQueryParams,
): Promise<ApiResult<PageData<WithdrawVO>>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
const page = Number(params.page) || 1;
const limit = Number(params.limit) || 10;
return {
code: 200,
msg: 'success',
data: buildMockWithdrawPage(page, limit, params),
};
}
return get('/admin/finance/withdraw/page', params as Record<string, any>);
}
/** GET /admin/finance/withdraw/info?id=xxx — 提现详情 */
export async function getWithdrawInfo(id: number): Promise<ApiResult<WithdrawInfoVO>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
return { code: 200, msg: 'success', data: buildMockWithdrawInfo(id) };
}
return get('/admin/finance/withdraw/info', { id: String(id) });
}
/** 提现审核请求参数 */
export interface WithdrawAuditParams {
/** 提现ID */
id: string;
/** 审核结果:1=通过,2=驳回 */
audit: string;
/** 审核内容 */
checkMsg: string;
/** 审核图片(逗号拼接的 URL) */
checkImg: string;
}
/** POST /admin/finance/withdraw/audit — 审核提现 */
export async function postWithdrawAudit(params: WithdrawAuditParams): Promise<ApiResult<null>> {
return post('/admin/finance/withdraw/audit', params);
}
+104
View File
@@ -0,0 +1,104 @@
/**
* 提现管理 — 类型定义
* 对应 OpenAPI: GET /admin/finance/withdraw/page
*/
/** 提现列表项(对齐 TournamentFinanceWithdrawVO */
export interface WithdrawVO {
/** 提现ID */
id: number;
/** 申请人昵称 */
nickname: string;
/** 申请人手机号 */
phone: string;
/** 申请人真实姓名 */
realName: string;
/** 提现类型(固定"银行卡" */
withdrawType: string;
/** 提现金额("0.00"格式) */
withdrawAmount: string;
/** 到账金额("0.00"格式) */
receivedAmount: string;
/** 审核状态:0=待审核,1=审核通过,2=审核驳回 */
auditStatus: number;
/** 到账状态:0=未支付,1=支付成功,2=支付失败 */
payStatus: number;
/** 流水单号 */
serialNumber: string;
/** 申请时间 */
createDate: string;
}
/** 提现列表查询参数 */
export interface WithdrawQueryParams {
page?: string;
limit?: string;
/** 提现申请人昵称 */
nickname?: string;
/** 提现申请人手机号 */
phone?: string;
/** 提现申请人真实姓名 */
realName?: string;
/** 审核状态:0/1/2 */
auditStatus?: string;
/** 到账状态:0/1/2 */
payStatus?: string;
}
export interface PageData<T> {
total: number;
list: T[];
}
export interface ApiResult<T> {
code: number;
msg: string;
data: T;
}
/** 提现详情(对齐 TournamentFinanceWithdrawInfoVO */
export interface WithdrawInfoVO {
/** 申请人昵称 */
nickname: string;
/** 申请人手机号 */
phone: string;
/** 申请人真实姓名 */
realName: string;
/** 申请时间 */
createDate: string;
/** 提现类型(固定"银行卡" */
withdrawType: string;
/** 提现金额("0.00"格式) */
withdrawAmount: string;
/** 费率 */
feeRate: string;
/** 手续费 */
feeAmount: string;
/** 到账金额("0.00"格式) */
receivedAmount: string;
/** 审核状态:0=待审核,1=审核通过,2=审核驳回 */
auditStatus: number;
/** 到账状态:0=未支付,1=支付成功,2=支付失败 */
payStatus: number;
/** 银行卡类型:1=个人 */
bankCardType: number;
/** 持卡人真实姓名 */
cardHolderName: string;
/** 银行卡号 */
bankCardNumber: string;
/** 开户行名称 */
bankName: string;
/** 支行名称 */
branchName: string;
/** 支付时间 */
payTime: string;
/** 订单号 */
orderNo: string;
/** 审核时间 */
auditDate: string;
/** 审核人昵称 */
auditNickname: string;
/** 审核图片 */
auditImg: string;
/** 审核图片列表 */
auditImgList: string[];
}
+149
View File
@@ -0,0 +1,149 @@
/**
* 支付流水假数据
* 对应接口:GET /admin/finance/paymentFlow/page
*/
import type { PaymentFlowVO, PaymentFlowQueryParams, PageData } from '@/api/payments';
const MOCK_LIST: PaymentFlowVO[] = [
{
serialNo: 'FL20260730001',
orderNo: 'OD20260730001',
type: 1,
nickname: '张三',
phone: '12345678997',
amount: '99.00',
createDate: '2026-07-30 08:00:00',
},
{
serialNo: '',
orderNo: '',
type: 2,
nickname: '李四',
phone: '12345678998',
amount: '100.00',
createDate: '2026-07-30 07:00:00',
},
{
serialNo: 'FL20260729002',
orderNo: 'OD20260729002',
type: 1,
nickname: '王五',
phone: '12345678998',
amount: '199.00',
createDate: '2026-07-29 16:00:00',
},
{
serialNo: '',
orderNo: '',
type: 2,
nickname: '赵六',
phone: '13800138000',
amount: '50.00',
createDate: '2026-07-29 15:20:00',
},
{
serialNo: 'FL20260728003',
orderNo: 'OD20260728003',
type: 1,
nickname: '钱七',
phone: '13900139001',
amount: '350.00',
createDate: '2026-07-28 14:00:00',
},
{
serialNo: '',
orderNo: '',
type: 2,
nickname: '孙八',
phone: '18600186001',
amount: '120.00',
createDate: '2026-07-28 10:30:00',
},
{
serialNo: 'FL20260727004',
orderNo: 'OD20260727004',
type: 1,
nickname: '周九',
phone: '15200152000',
amount: '88.00',
createDate: '2026-07-27 09:00:00',
},
{
serialNo: 'FL20260727005',
orderNo: 'OD20260727005',
type: 1,
nickname: '吴十',
phone: '17000170001',
amount: '520.00',
createDate: '2026-07-27 08:00:00',
},
{
serialNo: '',
orderNo: '',
type: 2,
nickname: '李四',
phone: '12345678998',
amount: '200.00',
createDate: '2026-07-26 17:00:00',
},
{
serialNo: 'FL20260726006',
orderNo: 'OD20260726006',
type: 1,
nickname: '张三',
phone: '12345678997',
amount: '128.00',
createDate: '2026-07-26 11:00:00',
},
{
serialNo: '',
orderNo: '',
type: 2,
nickname: '王五',
phone: '12345678998',
amount: '80.00',
createDate: '2026-07-25 13:00:00',
},
{
serialNo: 'FL20260725007',
orderNo: 'OD20260725007',
type: 1,
nickname: '赵六',
phone: '13800138000',
amount: '680.00',
createDate: '2026-07-25 10:00:00',
},
];
function inDateRange(date: string, begin?: string, end?: string): boolean {
if (!begin && !end) return true;
const d = date.slice(0, 10);
if (begin && d < begin) return false;
if (end && d > end) return false;
return true;
}
export function buildMockPaymentFlowPage(
page: number,
limit: number,
params: PaymentFlowQueryParams,
): PageData<PaymentFlowVO> {
let filtered = [...MOCK_LIST];
if (params.nickname) {
filtered = filtered.filter((item) => item.nickname.includes(params.nickname!));
}
if (params.phone) {
filtered = filtered.filter((item) => item.phone.includes(params.phone!));
}
if (params.type) {
filtered = filtered.filter((item) => item.type === Number(params.type));
}
filtered = filtered.filter((item) =>
inDateRange(item.createDate, params.createDateBegin, params.createDateEnd),
);
const total = filtered.length;
const start = (page - 1) * limit;
return { total, list: filtered.slice(start, start + limit) };
}
+185
View File
@@ -0,0 +1,185 @@
/**
* 钱包列表假数据
* 对应接口:GET /admin/finance/wallet/summary
*/
import type { WalletSummaryVO, WalletQueryParams, PageData } from '@/api/wallet';
const MOCK_LIST: WalletSummaryVO[] = [
{
userId: 1001,
userNickname: '张三',
phone: '12345678997',
amount: '0.00',
frozenAmount: '0.00',
withdrawalAmount: '0.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1002,
userNickname: '李四',
phone: '12345678998',
amount: '350.00',
frozenAmount: '200.00',
withdrawalAmount: '1450.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1003,
userNickname: '王五',
phone: '12345678999',
amount: '1280.00',
frozenAmount: '0.00',
withdrawalAmount: '800.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1004,
userNickname: '赵六',
phone: '13800138000',
amount: '560.00',
frozenAmount: '100.00',
withdrawalAmount: '200.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1005,
userNickname: '钱七',
phone: '13900139001',
amount: '4200.00',
frozenAmount: '1500.00',
withdrawalAmount: '5600.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1006,
userNickname: '孙八',
phone: '12345678997',
amount: '880.00',
frozenAmount: '0.00',
withdrawalAmount: '300.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1007,
userNickname: '周九',
phone: '17000170001',
amount: '2100.00',
frozenAmount: '800.00',
withdrawalAmount: '3200.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1008,
userNickname: '吴十',
phone: '18900189000',
amount: '650.00',
frozenAmount: '0.00',
withdrawalAmount: '450.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1009,
userNickname: '郑十一',
phone: '15200152000',
amount: '980.00',
frozenAmount: '200.00',
withdrawalAmount: '1200.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1010,
userNickname: '冯十二',
phone: '18600186001',
amount: '320.00',
frozenAmount: '50.00',
withdrawalAmount: '100.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1011,
userNickname: '褚十三',
phone: '13500135000',
amount: '5800.00',
frozenAmount: '0.00',
withdrawalAmount: '2000.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
{
userId: 1012,
userNickname: '卫十四',
phone: '13700137000',
amount: '75.00',
frozenAmount: '0.00',
withdrawalAmount: '75.00',
totalAmount: '0.00',
totalFrozenAmount: '0.00',
totalWithdrawalAmount: '0.00',
},
];
/** 计算汇总值 */
function computeSummary(list: WalletSummaryVO[]) {
const totalAmount = list.reduce((s, i) => s + Number(i.amount || 0), 0).toFixed(2);
const totalFrozenAmount = list.reduce((s, i) => s + Number(i.frozenAmount || 0), 0).toFixed(2);
const totalWithdrawalAmount = list
.reduce((s, i) => s + Number(i.withdrawalAmount || 0), 0)
.toFixed(2);
return { totalAmount, totalFrozenAmount, totalWithdrawalAmount };
}
export function buildMockWalletPage(
page: number,
limit: number,
params: WalletQueryParams,
): PageData<WalletSummaryVO> {
let filtered = [...MOCK_LIST];
if (params.nickname) {
filtered = filtered.filter((item) => item.userNickname.includes(params.nickname!));
}
if (params.phone) {
filtered = filtered.filter((item) => item.phone.includes(params.phone!));
}
if (params.amountBegin) {
filtered = filtered.filter((item) => Number(item.amount) >= Number(params.amountBegin));
}
if (params.amountEnd) {
filtered = filtered.filter((item) => Number(item.amount) <= Number(params.amountEnd));
}
const total = filtered.length;
const start = (page - 1) * limit;
const pageList = filtered.slice(start, start + limit);
// 将汇总值写入每条记录(方便前端提取统计卡数据)
const summary = computeSummary(filtered);
for (const item of pageList) {
item.totalAmount = summary.totalAmount;
item.totalFrozenAmount = summary.totalFrozenAmount;
item.totalWithdrawalAmount = summary.totalWithdrawalAmount;
}
return { total, list: pageList };
}
+187
View File
@@ -0,0 +1,187 @@
/**
* 钱包交易明细假数据
* 对应接口:GET /admin/finance/wallet/page
*
* type: 1=报名入账, 2=提现出账, 3=退款出账
* status(由 freezeAmount/freezeTime 推导): 1=已解冻, 2=冻结中, 3=正常
*/
import type { WalletTransactionVO, WalletTransactionQueryParams, PageData } from '@/api/wallet';
const MOCK_TRANSACTIONS: (WalletTransactionVO & { status: number })[] = [
{
type: 1,
amount: '+100.00',
afterAmount: '600.00',
withdrawAmount: '500.00',
freezeAmount: '100.00',
status: 1,
freezeTime: '2026-06-10 08:00',
unfreezeTime: '2026-06-12 08:00',
orderNo: 'SN20260610001',
createDate: '2026-06-10 08:00',
},
{
type: 2,
amount: '-500.00',
afterAmount: '1100.00',
withdrawAmount: '500.00',
freezeAmount: '600.00',
status: 2,
freezeTime: '2026-06-10 06:00',
unfreezeTime: '',
orderNo: 'SN20260610002',
createDate: '2026-06-10 06:00',
},
{
type: 3,
amount: '-100.00',
afterAmount: '500.00',
withdrawAmount: '500.00',
freezeAmount: '0.00',
status: 3,
freezeTime: '',
unfreezeTime: '',
orderNo: 'SN20260610003',
createDate: '2026-06-10 05:00',
},
{
type: 1,
amount: '+350.00',
afterAmount: '850.00',
withdrawAmount: '750.00',
freezeAmount: '100.00',
status: 3,
freezeTime: '',
unfreezeTime: '',
orderNo: 'SN20260609001',
createDate: '2026-06-09 17:30',
},
{
type: 2,
amount: '-250.00',
afterAmount: '600.00',
withdrawAmount: '500.00',
freezeAmount: '100.00',
status: 1,
freezeTime: '2026-06-08 10:00',
unfreezeTime: '2026-06-09 08:00',
orderNo: 'SN20260608001',
createDate: '2026-06-08 10:00',
},
{
type: 1,
amount: '+800.00',
afterAmount: '2000.00',
withdrawAmount: '1800.00',
freezeAmount: '200.00',
status: 3,
freezeTime: '',
unfreezeTime: '',
orderNo: 'SN20260607001',
createDate: '2026-06-07 14:00',
},
{
type: 2,
amount: '-300.00',
afterAmount: '1200.00',
withdrawAmount: '1000.00',
freezeAmount: '200.00',
status: 2,
freezeTime: '2026-06-06 09:00',
unfreezeTime: '',
orderNo: 'SN20260606001',
createDate: '2026-06-06 09:00',
},
{
type: 3,
amount: '-50.00',
afterAmount: '1500.00',
withdrawAmount: '1300.00',
freezeAmount: '200.00',
status: 1,
freezeTime: '2026-06-05 10:00',
unfreezeTime: '2026-06-07 10:00',
orderNo: 'SN20260605001',
createDate: '2026-06-05 10:00',
},
{
type: 1,
amount: '+200.00',
afterAmount: '1550.00',
withdrawAmount: '1350.00',
freezeAmount: '200.00',
status: 3,
freezeTime: '',
unfreezeTime: '',
orderNo: 'SN20260604001',
createDate: '2026-06-04 08:30',
},
{
type: 2,
amount: '-600.00',
afterAmount: '950.00',
withdrawAmount: '750.00',
freezeAmount: '200.00',
status: 1,
freezeTime: '2026-06-03 16:00',
unfreezeTime: '2026-06-05 16:00',
orderNo: 'SN20260603001',
createDate: '2026-06-03 16:00',
},
{
type: 1,
amount: '+450.00',
afterAmount: '1050.00',
withdrawAmount: '850.00',
freezeAmount: '200.00',
status: 1,
freezeTime: '2026-06-02 11:00',
unfreezeTime: '2026-06-04 11:00',
orderNo: 'SN20260602001',
createDate: '2026-06-02 11:00',
},
{
type: 3,
amount: '-120.00',
afterAmount: '600.00',
withdrawAmount: '400.00',
freezeAmount: '200.00',
status: 3,
freezeTime: '',
unfreezeTime: '',
orderNo: 'SN20260601001',
createDate: '2026-06-01 15:00',
},
];
function inDateRange(date: string, begin?: string, end?: string): boolean {
if (!begin && !end) return true;
const d = date.slice(0, 10);
if (begin && d < begin) return false;
if (end && d > end) return false;
return true;
}
export function buildMockWalletTransactionPage(
page: number,
limit: number,
params: WalletTransactionQueryParams,
): PageData<WalletTransactionVO> {
let filtered = [...MOCK_TRANSACTIONS];
if (params.type) {
filtered = filtered.filter((item) => item.type === Number(params.type));
}
if (params.status) {
filtered = filtered.filter((item) => item.status === Number(params.status));
}
filtered = filtered.filter((item) =>
inDateRange(item.createDate, params.createDateBegin, params.createDateEnd),
);
const total = filtered.length;
const start = (page - 1) * limit;
const list = filtered.slice(start, start + limit).map(({ status, ...rest }) => rest);
return { total, list };
}
+150
View File
@@ -0,0 +1,150 @@
/**
* 提现详情假数据
* 对应接口:GET /admin/finance/withdraw/info?id=xxx
*
* 字段对齐 TournamentFinanceWithdrawInfoVO。
*/
import type { WithdrawInfoVO } from '@/api/withdraw';
/** 银行卡类型映射 */
const BANK_CARD_TYPE_MAP: Record<number, string> = { 1: '个人' };
const MOCK_DETAILS: Record<number, WithdrawInfoVO> = {
1: {
nickname: '可乐',
phone: '17762466262',
realName: '可乐',
createDate: '2026-07-30 09:53:00',
withdrawType: '银行卡',
withdrawAmount: '1000.00',
feeRate: '0.006',
feeAmount: '6.00',
receivedAmount: '994.00',
auditStatus: 0,
payStatus: 0,
bankCardType: 1,
cardHolderName: '龚',
bankCardNumber: '6215581807006475126',
bankName: '交通银行',
branchName: '交通银行宜昌西坝支行',
payTime: '',
orderNo: 'WD04111775872421935100',
auditDate: '',
auditNickname: '',
auditImg: '',
auditImgList: [],
},
2: {
nickname: '李四',
phone: '12345678998',
realName: '李四',
createDate: '2026-07-29 14:30:00',
withdrawType: '银行卡',
withdrawAmount: '200.00',
feeRate: '0.006',
feeAmount: '1.20',
receivedAmount: '198.80',
auditStatus: 1,
payStatus: 1,
bankCardType: 1,
cardHolderName: '李四',
bankCardNumber: '6222021234567890123',
bankName: '工商银行',
branchName: '工商银行北京中关村支行',
payTime: '2026-07-29 14:35:00',
orderNo: 'SN20260729001',
auditDate: '2026-07-29 14:32:00',
auditNickname: '管理员A',
auditImg: '',
auditImgList: [
'https://via.placeholder.com/200x200?text=Audit1',
'https://via.placeholder.com/200x200?text=Audit2',
],
},
3: {
nickname: '王五',
phone: '13800138000',
realName: '王五',
createDate: '2026-07-28 11:15:00',
withdrawType: '银行卡',
withdrawAmount: '500.00',
feeRate: '0.006',
feeAmount: '3.00',
receivedAmount: '497.00',
auditStatus: 1,
payStatus: 2,
bankCardType: 1,
cardHolderName: '王五',
bankCardNumber: '微信钱包',
bankName: '微信支付',
branchName: '-',
payTime: '',
orderNo: 'SN20260728002',
auditDate: '2026-07-28 11:20:00',
auditNickname: '管理员B',
auditImg: '',
auditImgList: [],
},
4: {
nickname: '赵六',
phone: '13900139001',
realName: '赵六',
createDate: '2026-07-27 09:45:00',
withdrawType: '银行卡',
withdrawAmount: '80.00',
feeRate: '0.006',
feeAmount: '0.48',
receivedAmount: '79.52',
auditStatus: 2,
payStatus: 0,
bankCardType: 1,
cardHolderName: '赵六',
bankCardNumber: '6217858000123456789',
bankName: '建设银行',
branchName: '建设银行上海陆家嘴支行',
payTime: '',
orderNo: '',
auditDate: '2026-07-27 10:00:00',
auditNickname: '管理A',
auditImg: '',
auditImgList: ['https://via.placeholder.com/200x200?text=Reject'],
},
5: {
nickname: '孙七',
phone: '18600186001',
realName: '孙七',
createDate: '2026-07-26 16:00:00',
withdrawType: '银行卡',
withdrawAmount: '3000.00',
feeRate: '0.006',
feeAmount: '18.00',
receivedAmount: '2982.00',
auditStatus: 0,
payStatus: 0,
bankCardType: 1,
cardHolderName: '孙七',
bankCardNumber: '6228480012345678910',
bankName: '农业银行',
branchName: '农业银行深圳福田支行',
payTime: '',
orderNo: 'WD05261775872421935200',
auditDate: '',
auditNickname: '',
auditImg: '',
auditImgList: [],
},
};
export function buildMockWithdrawInfo(id: number): WithdrawInfoVO {
const detail = MOCK_DETAILS[id];
if (detail) return { ...detail };
// 找不到对应 ID 时返回一个默认详情(基于 ID 4 的结构)
return {
...MOCK_DETAILS[4],
nickname: `用户${id}`,
phone: `1380000${String(id).padStart(4, '0')}`,
realName: `用户${id}`,
createDate: '2026-07-27 09:45:00',
};
}
+194
View File
@@ -0,0 +1,194 @@
/**
* 提现列表假数据
* 对应接口:GET /admin/finance/withdraw/page
*
* 前端筛选 + 分页,模拟后端行为。
*/
import type { WithdrawVO, WithdrawQueryParams, PageData } from '@/api/withdraw';
const MOCK_LIST: WithdrawVO[] = [
{
id: 1,
nickname: '可乐',
phone: '17762466262',
realName: '可乐',
withdrawType: '银行卡',
withdrawAmount: '1000.00',
receivedAmount: '994.00',
auditStatus: 0,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-30 09:53:00',
},
{
id: 2,
nickname: '李四',
phone: '12345678998',
realName: '李四',
withdrawType: '银行卡',
withdrawAmount: '200.00',
receivedAmount: '198.80',
auditStatus: 1,
payStatus: 1,
serialNumber: 'SN20260729001',
createDate: '2026-07-29 14:30:00',
},
{
id: 3,
nickname: '王五',
phone: '13800138000',
realName: '王五',
withdrawType: '银行卡',
withdrawAmount: '500.00',
receivedAmount: '497.00',
auditStatus: 1,
payStatus: 2,
serialNumber: 'SN20260728002',
createDate: '2026-07-28 11:15:00',
},
{
id: 4,
nickname: '赵六',
phone: '13900139001',
realName: '赵六',
withdrawType: '银行卡',
withdrawAmount: '80.00',
receivedAmount: '79.52',
auditStatus: 2,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-27 09:45:00',
},
{
id: 5,
nickname: '孙七',
phone: '18600186001',
realName: '孙七',
withdrawType: '银行卡',
withdrawAmount: '3000.00',
receivedAmount: '2982.00',
auditStatus: 0,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-26 16:00:00',
},
{
id: 6,
nickname: '周八',
phone: '15200152000',
realName: '周八',
withdrawType: '银行卡',
withdrawAmount: '150.00',
receivedAmount: '149.10',
auditStatus: 1,
payStatus: 1,
serialNumber: 'SN20260725003',
createDate: '2026-07-25 10:20:00',
},
{
id: 7,
nickname: '吴九',
phone: '17000170001',
realName: '吴九',
withdrawType: '银行卡',
withdrawAmount: '600.00',
receivedAmount: '596.40',
auditStatus: 2,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-24 08:30:00',
},
{
id: 8,
nickname: '郑十',
phone: '18900189000',
realName: '郑十',
withdrawType: '银行卡',
withdrawAmount: '2200.00',
receivedAmount: '2186.80',
auditStatus: 0,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-23 13:10:00',
},
{
id: 9,
nickname: '可乐',
phone: '17762466262',
realName: '可乐',
withdrawType: '银行卡',
withdrawAmount: '450.00',
receivedAmount: '447.30',
auditStatus: 1,
payStatus: 2,
serialNumber: 'SN20260722004',
createDate: '2026-07-22 15:45:00',
},
{
id: 10,
nickname: '李四',
phone: '12345678998',
realName: '李四',
withdrawType: '银行卡',
withdrawAmount: '1800.00',
receivedAmount: '1789.20',
auditStatus: 0,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-21 09:00:00',
},
{
id: 11,
nickname: '王五',
phone: '13800138000',
realName: '王五',
withdrawType: '银行卡',
withdrawAmount: '320.00',
receivedAmount: '318.08',
auditStatus: 1,
payStatus: 1,
serialNumber: 'SN20260720005',
createDate: '2026-07-20 17:30:00',
},
{
id: 12,
nickname: '孙七',
phone: '18600186001',
realName: '孙七',
withdrawType: '银行卡',
withdrawAmount: '750.00',
receivedAmount: '745.50',
auditStatus: 2,
payStatus: 0,
serialNumber: '',
createDate: '2026-07-19 11:00:00',
},
];
export function buildMockWithdrawPage(
page: number,
limit: number,
params: WithdrawQueryParams,
): PageData<WithdrawVO> {
let filtered = [...MOCK_LIST];
if (params.nickname) {
filtered = filtered.filter((item) => item.nickname.includes(params.nickname!));
}
if (params.phone) {
filtered = filtered.filter((item) => item.phone.includes(params.phone!));
}
if (params.realName) {
filtered = filtered.filter((item) => item.realName.includes(params.realName!));
}
if (params.auditStatus) {
filtered = filtered.filter((item) => item.auditStatus === Number(params.auditStatus));
}
if (params.payStatus) {
filtered = filtered.filter((item) => item.payStatus === Number(params.payStatus));
}
const total = filtered.length;
const start = (page - 1) * limit;
return { total, list: filtered.slice(start, start + limit) };
}
-1
View File
@@ -243,7 +243,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
-1
View File
@@ -340,7 +340,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
-1
View File
@@ -200,7 +200,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
-1
View File
@@ -273,7 +273,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
-1
View File
@@ -145,7 +145,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
+13 -15
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } from 'ant-design-vue';
import { usePaymentsModel } from './model/usePaymentsModel';
import { useContainerSize } from '@/hooks';
@@ -6,9 +6,6 @@ import pageStyles from '@/assets/styles/pageLayout.module.less';
const { RangePicker } = DatePicker;
/**
* 支付流水
*/
export default defineComponent({
name: 'FinancePayments',
setup() {
@@ -27,9 +24,12 @@ export default defineComponent({
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
onMounted(() => {
handleSearch();
});
return () => (
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="时间" name="timeRange">
@@ -40,16 +40,18 @@ export default defineComponent({
onUpdate:value={(val: any) => (filterForm.timeRange = val)}
/>
</Form.Item>
<Form.Item label="用户昵称" name="searchUserName">
<Form.Item label="用户昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
@@ -59,9 +61,10 @@ export default defineComponent({
<Form.Item label="类型" name="type">
<Select
value={filterForm.type}
options={PAYMENT_TYPE_OPTIONS as any}
options={PAYMENT_TYPE_OPTIONS}
style={{ width: '140px' }}
allowClear
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.type = val || '')}
/>
</Form.Item>
@@ -76,17 +79,15 @@ export default defineComponent({
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
{/* ===== 汇总区 ===== */}
<div class={pageStyles.summary}>
<span class={pageStyles.summaryItem}>
<span class={pageStyles.summaryLabel}></span>
<span class={pageStyles.summaryValue}>{summary.value.totalPay.toFixed(2)}</span>
<span class={pageStyles.summaryValue}>{summary.value.totalPay}</span>
</span>
<span class={pageStyles.summaryItem}>
<span class={pageStyles.summaryLabel}>退</span>
<span class={pageStyles.summaryValue}>{summary.value.totalRefund.toFixed(2)}</span>
<span class={pageStyles.summaryValue}>{summary.value.totalRefund}</span>
</span>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
@@ -98,8 +99,6 @@ export default defineComponent({
pagination={false}
/>
</div>
{/* 独立分页,右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
@@ -108,7 +107,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
@@ -1,184 +1,145 @@
import { reactive, toRef, Ref } from 'vue';
import { message } from 'ant-design-vue';
import { computed, reactive, toRef, Ref } from 'vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
import {
getPaymentFlowList,
type PaymentFlowVO,
type PaymentFlowQueryParams,
} from '@/api/payments';
import dayjs from 'dayjs';
// ============================================================
// 常量
// 常量value 对接 API type 字段)
// ============================================================
/** 类型选项(筛选) */
export const PAYMENT_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '报名', label: '报名' },
{ value: '取消报名', label: '取消报名' },
{ value: '提现', label: '提现' },
{ value: '1', label: '报名' },
{ value: '2', label: '取消报名' },
] as const;
// ============================================================
// 汇总假数据
// ============================================================
const MOCK_SUMMARY = {
totalPay: 113255.0,
totalRefund: 3255.0,
export const PAYMENT_TYPE_MAP: Record<number, string> = {
1: '报名',
2: '取消报名',
};
// ============================================================
// 支付流水假数据(5 条)
// ============================================================
const MOCK_DATA = [
{
key: '1',
flowNo: 'xxxxxx',
orderNo: 'xxxxxxxx',
type: '报名',
nickName: '张三',
phone: '12345678997',
amount: 99.0,
thirdFlowNo: 'xxxxxxxxxxxxxxxxxxxx',
tradeTime: '2026-05-26 08:00:00',
},
{
key: '2',
flowNo: '',
orderNo: '',
type: '取消报名',
nickName: '李四',
phone: '12345678998',
amount: 100.0,
thirdFlowNo: '',
tradeTime: '2026-05-26 07:00:00',
},
{
key: '3',
flowNo: '',
orderNo: '',
type: '提现',
nickName: '王五',
phone: '12345678998',
amount: 1000.0,
thirdFlowNo: '',
tradeTime: '2026-05-26 06:00:00',
},
{
key: '4',
flowNo: '',
orderNo: '',
type: '报名',
nickName: '赵六',
phone: '13800138000',
amount: 199.0,
thirdFlowNo: '',
tradeTime: '2026-05-25 19:30:00',
},
{
key: '5',
flowNo: '',
orderNo: '',
type: '取消报名',
nickName: '钱七',
phone: '13900139001',
amount: 50.0,
thirdFlowNo: '',
tradeTime: '2026-05-25 15:20:00',
},
];
// ============================================================
// Model
// ============================================================
/**
* 支付流水页数据模型
*/
export function usePaymentsModel() {
// ===== 筛选条件 =====
// ===== 筛选条件(字段名对齐 API =====
const filterForm = reactive({
timeRange: null as [string, string] | null,
searchUserName: '',
searchPhone: '',
nickname: '',
phone: '',
type: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
// ===== 汇总 =====
const [summary, setSummary] = useState(MOCK_SUMMARY);
const [summary, setSummary] = useState({ totalPay: '0.00', totalRefund: '0.00' });
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
const [dataSource, setDataSource] = useState<PaymentFlowVO[]>([]);
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
// ===== 表格列配置 =====
// ===== 表格列dataIndex 对齐 API =====
const columns = [
{ title: '流水号', dataIndex: 'flowNo', key: 'flowNo', width: 140 },
{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', width: 140 },
{ title: '类型', dataIndex: 'type', key: 'type', width: 110 },
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '流水号', dataIndex: 'serialNo', key: 'serialNo', width: 160 },
{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', width: 160 },
{
title: '类型',
dataIndex: 'type',
key: 'type',
width: 110,
customRender: ({ text }: { text: number }) => PAYMENT_TYPE_MAP[text] || text || '-',
},
{ title: '用户昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{ title: '第三方流水单号', dataIndex: 'thirdFlowNo', key: 'thirdFlowNo', width: 220 },
{
title: '交易时间',
dataIndex: 'tradeTime',
key: 'tradeTime',
width: 170,
align: 'left' as const,
},
{ title: '交易时间', dataIndex: 'createDate', key: 'createDate', width: 170 },
];
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
filterForm.timeRange !== null ||
debouncedNickname.value.trim() !== '' ||
debouncedPhone.value.trim() !== '' ||
filterForm.type !== ''
);
});
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): PaymentFlowQueryParams => {
const params: PaymentFlowQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (filterForm.timeRange) {
const [start, end] = filterForm.timeRange;
if (start) params.createDateBegin = dayjs(start).format('YYYY-MM-DD');
if (end) params.createDateEnd = dayjs(end).format('YYYY-MM-DD');
}
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim();
if (filterForm.type) params.type = filterForm.type;
return params;
};
// ===== 方法 =====
/** 查询(节流 500ms */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
timeRange: filterForm.timeRange,
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
type: filterForm.type,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
setSummary(MOCK_SUMMARY);
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
const queryParams = buildQueryParams();
console.log('支付流水查询参数:', queryParams);
const res = await getPaymentFlowList(queryParams);
if (res.code === 200) {
console.log('支付流水查询结果:', { total: res.data.total, count: res.data.list.length });
setDataSource(res.data.list);
setPagination({ ...pagination.value, total: res.data.total });
// 汇总:type=1 金额为收入,type=2 金额为退款
let totalPay = 0;
let totalRefund = 0;
for (const item of res.data.list) {
const amt = Number(item.amount) || 0;
if (item.type === 1) totalPay += amt;
else if (item.type === 2) totalRefund += amt;
}
setSummary({ totalPay: totalPay.toFixed(2), totalRefund: totalRefund.toFixed(2) });
}
} catch {
// 网络层已统一提示
} finally {
setLoading(false);
}
}, 500);
/** 重置(节流 500ms */
const handleReset = useThrottleFn(() => {
filterForm.timeRange = null;
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.nickname = '';
filterForm.phone = '';
filterForm.type = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setSummary(MOCK_SUMMARY);
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
setSummary({ totalPay: '0.00', totalRefund: '0.00' });
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
@@ -1,9 +1,16 @@
import { defineComponent, ref, reactive, computed, watch } from 'vue';
import { Modal, Table, Button, Select, Form, Space, DatePicker } from 'ant-design-vue';
import { defineComponent, reactive, ref, watch } from 'vue';
import { Modal, Table, Button, Select, Form, Space, DatePicker, Pagination } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
getWalletTransactionList,
type WalletTransactionVO,
type WalletTransactionQueryParams,
} from '@/api/wallet';
import {
useWalletModel,
TRANSACTION_TYPE_OPTIONS,
TRANSACTION_STATUS_OPTIONS,
TRANSACTION_TYPE_MAP,
TRANSACTION_STATUS_LABEL_MAP,
} from '../model/useWalletModel';
import styles from './WalletDetailModal.module.less';
@@ -15,9 +22,6 @@ interface WalletDetailModalProps {
onClose: () => void;
}
/**
* 钱包交易明细弹窗
*/
export default defineComponent({
name: 'WalletDetailModal',
props: {
@@ -26,223 +30,210 @@ export default defineComponent({
onClose: { type: Function, required: true },
},
setup(props: WalletDetailModalProps) {
const { loadTransactions, renderTransactionStatus } = useWalletModel();
// ===== 弹窗内筛选条件 =====
const detailFilter = reactive({
// ===== 筛选条件 =====
const filterForm = reactive({
timeRange: null as [string, string] | null,
type: '',
status: '',
});
// ===== 加载明细 =====
const loading = ref<boolean>(false);
const allTransactions = ref<any[]>([]);
// ===== 数据状态 =====
const loading = ref(false);
const dataSource = ref<WalletTransactionVO[]>([]);
const pagination = reactive({ current: 1, pageSize: 10, total: 0 });
const fetchTransactions = async () => {
// ===== 构建查询参数 =====
const buildQueryParams = (): WalletTransactionQueryParams => {
const params: WalletTransactionQueryParams = {
page: String(pagination.current),
limit: String(pagination.pageSize),
userId: String(props.record?.userId || ''),
};
if (filterForm.timeRange) {
const [start, end] = filterForm.timeRange;
if (start) params.createDateBegin = dayjs(start).format('YYYY-MM-DD');
if (end) params.createDateEnd = dayjs(end).format('YYYY-MM-DD');
}
if (filterForm.type) params.type = filterForm.type;
if (filterForm.status) params.status = filterForm.status;
return params;
};
// ===== 查询 =====
const handleSearch = async () => {
loading.value = true;
try {
allTransactions.value = await loadTransactions(props.record);
const params = buildQueryParams();
const res = await getWalletTransactionList(params);
if (res.code === 200) {
dataSource.value = res.data.list;
pagination.total = res.data.total;
}
} catch {
// 网络层已统一提示
} finally {
loading.value = false;
}
};
/**
* 弹窗内筛选后的数据(用 computed 自动响应全量数据和筛选条件的变化)
* 真实场景应传给后端做查询;此处做前端过滤演示
*/
const filteredTransactions = computed(() => {
return allTransactions.value.filter((item) => {
if (detailFilter.type && item.type !== detailFilter.type) return false;
if (detailFilter.status && item.status !== detailFilter.status) return false;
if (detailFilter.timeRange && detailFilter.timeRange.length === 2) {
const [start, end] = detailFilter.timeRange;
if (item.time < start || item.time > end) return false;
}
return true;
});
});
const handleSearch = () => {
// computed 会自动响应;这里保留方法以便将来扩展(如后端查询)
};
// ===== 重置 =====
const handleReset = () => {
detailFilter.timeRange = null;
detailFilter.type = '';
detailFilter.status = '';
filterForm.timeRange = null;
filterForm.type = '';
filterForm.status = '';
pagination.current = 1;
handleSearch();
};
// ===== 分页 =====
const pagination = reactive({
current: 1,
pageSize: 10,
total: 0,
showSizeChanger: true,
showTotal: (total: number) => `${total}`,
});
/** 筛选条件变化时重置到第 1 页,并同步总数 */
watch(filteredTransactions, (list) => {
pagination.total = list.length;
pagination.current = 1;
});
const handleTableChange = (pag: any) => {
pagination.current = pag.current;
pagination.pageSize = pag.pageSize;
const handlePageChange = (page: number, pageSize: number) => {
pagination.current = page;
pagination.pageSize = pageSize;
handleSearch();
};
/** 监听 visible 变化:打开时加载明细 */
// ===== 弹窗打开 → 首次加载 =====
watch(
() => props.visible,
(val) => {
if (val) {
detailFilter.timeRange = null;
detailFilter.type = '';
detailFilter.status = '';
allTransactions.value = [];
fetchTransactions();
filterForm.timeRange = null;
filterForm.type = '';
filterForm.status = '';
pagination.current = 1;
pagination.pageSize = 10;
dataSource.value = [];
handleSearch();
}
},
);
// ===== 表格列配置 =====
const detailColumns = [
// ===== 表格列dataIndex 对齐 API =====
const columns = [
{
title: '类型',
dataIndex: 'type',
key: 'type',
width: 120,
customRender: ({ text }: { text: number }) => TRANSACTION_TYPE_MAP[text] || text || '-',
},
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => {
const num = text || 0;
const isPlus = num > 0;
const isMinus = num < 0;
const color = isPlus ? '#52c41a' : isMinus ? '#ff4d4f' : 'rgba(0,0,0,0.85)';
const sign = isPlus ? '+' : '';
width: 120,
align: 'left' as const,
customRender: ({ text }: { text: string }) => {
const num = Number(text) || 0;
const color = num > 0 ? '#52c41a' : num < 0 ? '#ff4d4f' : 'rgba(0,0,0,0.85)';
const sign = num > 0 ? '+' : '';
return (
<span style={{ color, fontWeight: 500 }}>
{sign}
{num.toFixed(2)}
{text}
</span>
);
},
},
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
dataIndex: 'afterAmount',
key: 'afterAmount',
width: 120,
align: 'left' as const,
customRender: ({ text }: { text: string }) => `¥${text || '0.00'}`,
},
{
title: '可提现金额',
dataIndex: 'withdrawable',
key: 'withdrawable',
width: 130,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
title: '可提现',
dataIndex: 'withdrawAmount',
key: 'withdrawAmount',
width: 120,
align: 'left' as const,
customRender: ({ text }: { text: string }) => `¥${text || '0.00'}`,
},
{
title: '冻结金额',
dataIndex: 'frozen',
key: 'frozen',
dataIndex: 'freezeAmount',
key: 'freezeAmount',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 90,
align: 'center' as const,
customRender: ({ text }: { text: string }) => renderTransactionStatus(text),
align: 'left' as const,
customRender: ({ text }: { text: string }) => `¥${text || '0.00'}`,
},
{
title: '冻结时间',
dataIndex: 'frozenTime',
key: 'frozenTime',
width: 130,
align: 'center' as const,
dataIndex: 'freezeTime',
key: 'freezeTime',
width: 140,
customRender: ({ text }: { text: string }) => text || '-',
},
{
title: '解冻时间',
dataIndex: 'unfreezeTime',
key: 'unfreezeTime',
width: 130,
align: 'center' as const,
width: 140,
customRender: ({ text }: { text: string }) => text || '-',
},
{
title: '关联单号',
dataIndex: 'relatedNo',
key: 'relatedNo',
width: 130,
align: 'center' as const,
dataIndex: 'orderNo',
key: 'orderNo',
width: 150,
},
{
title: '时间',
dataIndex: 'time',
key: 'time',
width: 130,
align: 'center' as const,
dataIndex: 'createDate',
key: 'createDate',
width: 150,
},
];
return () => (
<Modal
title="明细详情"
title="交易明细"
visible={props.visible}
onCancel={props.onClose}
width={1300}
width={1400}
destroyOnClose
footer={null}
centered
wrapClassName={styles.walletDetailModalMain}
>
<div class={styles.modalBody}>
{/* ===== 弹窗内筛选区 ===== */}
{/* 筛选区 */}
<div class={styles.filterBar}>
<Form layout="inline" model={detailFilter}>
<Form layout="inline" model={filterForm}>
<Form.Item label="时间" name="timeRange">
<RangePicker
value={detailFilter.timeRange as any}
value={filterForm.timeRange as any}
style={{ width: '240px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.timeRange = val)}
onUpdate:value={(val: any) => (filterForm.timeRange = val)}
/>
</Form.Item>
<Form.Item label="类型" name="type">
<Select
value={detailFilter.type}
value={filterForm.type}
options={TRANSACTION_TYPE_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.type = val || '')}
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.type = val || '')}
/>
</Form.Item>
<Form.Item label="状态" name="status">
<Select
value={detailFilter.status}
value={filterForm.status}
options={TRANSACTION_STATUS_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.status = val || '')}
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.status = val || '')}
/>
</Form.Item>
<Form.Item>
<Space>
<Button onClick={handleReset}></Button>
<Button type="primary" onClick={handleSearch}>
<Button type="primary" onClick={handleSearch} loading={loading.value}>
</Button>
</Space>
@@ -250,26 +241,30 @@ export default defineComponent({
</Form>
</div>
{/* ===== 表格区 ===== */}
{/* 表格区 */}
<div class={styles.tableWrap}>
<Table
columns={detailColumns}
dataSource={filteredTransactions.value}
columns={columns}
dataSource={dataSource.value}
loading={loading.value}
size="middle"
bordered
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: pagination.showSizeChanger,
showTotal: pagination.showTotal,
}}
onChange={handleTableChange}
pagination={false}
scroll={{ x: 'max-content' }}
locale={{ emptyText: '暂无交易明细' }}
/>
</div>
{/* 分页 */}
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '12px' }}>
<Pagination
current={pagination.current}
pageSize={pagination.pageSize}
total={pagination.total}
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
/>
</div>
</div>
</Modal>
);
+13 -28
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import { Button, Input, Table, Form, Space, Pagination } from 'ant-design-vue';
import { WalletOutlined, LockOutlined, RiseOutlined } from '@ant-design/icons-vue';
import { useWalletModel } from './model/useWalletModel';
@@ -10,15 +10,12 @@ import pageStyles from '@/assets/styles/pageLayout.module.less';
interface StatCardItem {
key: string;
label: string;
value: number;
value: string;
icon: any;
color: string;
bgColor: string;
}
/**
* bodyCell 渲染函数
*/
function renderBodyCell({
column,
record,
@@ -29,7 +26,6 @@ function renderBodyCell({
record: any;
onViewDetail: (record: any) => void;
}) {
// 操作列
if (column.key === 'action') {
return (
<Button type="link" size="small" onClick={() => onViewDetail(record)}>
@@ -40,9 +36,6 @@ function renderBodyCell({
return;
}
/**
* 用户钱包
*/
export default defineComponent({
name: 'FinanceWallet',
setup() {
@@ -64,7 +57,6 @@ export default defineComponent({
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
/** 最终表格列:模型列 + 操作 */
const tableColumns = [
...columns,
{
@@ -76,8 +68,11 @@ export default defineComponent({
},
];
onMounted(() => {
handleSearch();
});
return () => {
/** 顶部统计卡配置 */
const statCards: StatCardItem[] = [
{
key: 'totalBalance',
@@ -122,11 +117,7 @@ export default defineComponent({
<div class={styles.statCardRight}>
<div class={styles.statLabel}>{item.label}</div>
<div class={styles.statValue} style={{ color: item.color }}>
¥
{item.value.toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
¥{item.value}
</div>
</div>
</div>
@@ -136,16 +127,18 @@ export default defineComponent({
{/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName">
<Form.Item label="用户昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '180px' }}
allowClear
@@ -194,8 +187,6 @@ export default defineComponent({
</Form>
</div>
{/* ===== 下方区域:筛选 + 表格(独立白卡片) ===== */}
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div ref={containerRef} class={pageStyles.tableBody}>
@@ -203,20 +194,16 @@ export default defineComponent({
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
rowKey="userId"
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewDetail: handleViewDetail,
}),
renderBodyCell({ ...args, onViewDetail: handleViewDetail }),
}}
</Table>
</div>
{/* 独立分页,右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
@@ -225,12 +212,10 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
{/* ===== 交易明细弹窗 ===== */}
<WalletDetailModal
visible={detailVisible.value}
record={currentWallet.value}
+98 -243
View File
@@ -1,292 +1,176 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { computed, reactive, toRef, Ref } from 'vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
import { getWalletList, type WalletSummaryVO, type WalletQueryParams } from '@/api/wallet';
// ============================================================
// 常量
// 常量value 对齐 API 数字码)
// ============================================================
/** 明细类型选项(弹窗内筛选) */
/** 交易类型选项value 对应 API type 字段 */
export const TRANSACTION_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '报名收入', label: '报名收入' },
{ value: '提现', label: '提现' },
{ value: '取消报名退款', label: '取消报名退款' },
{ value: '1', label: '报名收入' },
{ value: '2', label: '提现' },
{ value: '3', label: '取消报名退款' },
] as const;
/** 明细状态选项(弹窗内筛选) */
/** 交易状态选项value 对应 API status 字段 */
export const TRANSACTION_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '正常', label: '正常' },
{ value: '冻结中', label: '冻结中' },
{ value: '已解冻', label: '已解冻' },
{ value: '1', label: '已解冻' },
{ value: '2', label: '冻结中' },
{ value: '3', label: '正常' },
] as const;
/** 明细状态映射(用于表格 StatusTag 渲染) */
const TRANSACTION_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
: { label: '正常', tone: 'primary' },
: { label: '冻结中', tone: 'orange' },
: { label: '已解冻', tone: 'success' },
/** 交易类型文案映射 */
export const TRANSACTION_TYPE_MAP: Record<number, string> = {
1: '报名收入',
2: '提现',
3: '取消报名退款',
};
// ============================================================
// 顶部统计卡假数据
// ============================================================
const MOCK_SUMMARY = {
totalBalance: 86520.0,
frozenAmount: 3200.0,
totalWithdraw: 63080.0,
/** 交易状态文案映射(弹窗内表格渲染用) */
export const TRANSACTION_STATUS_LABEL_MAP: Record<number, string> = {
1: '已解冻',
2: '冻结中',
3: '正常',
};
// ============================================================
// 假数据(钱包列表)
// ============================================================
const MOCK_DATA = [
{
key: '1',
userId: 'U20260701001',
nickName: '张三',
phone: '12345678997',
balance: 0,
frozen: 0,
totalWithdraw: 0,
},
{
key: '2',
userId: '',
nickName: '李四',
phone: '12345678998',
balance: 350,
frozen: 200,
totalWithdraw: 1450,
},
{
key: '3',
userId: '',
nickName: '王五',
phone: '12345678999',
balance: 1280,
frozen: 0,
totalWithdraw: 800,
},
{
key: '4',
userId: 'U20260701004',
nickName: '赵六',
phone: '13800138000',
balance: 560,
frozen: 100,
totalWithdraw: 200,
},
{
key: '5',
userId: '',
nickName: '钱七',
phone: '13900139001',
balance: 4200,
frozen: 1500,
totalWithdraw: 5600,
},
{
key: '6',
userId: '',
nickName: '孙八',
phone: '12345678997',
balance: 880,
frozen: 0,
totalWithdraw: 300,
},
];
// ============================================================
// 交易明细假数据(所有用户共用,演示用)
// ============================================================
const MOCK_TRANSACTIONS: any[] = [
{
key: 't-1',
type: '报名收入',
amount: 100,
balance: 600,
withdrawable: 500,
frozen: 100,
status: '已解冻',
frozenTime: '2026-06-10 08:00',
unfreezeTime: '2026-06-12 08:00',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 08:00',
},
{
key: 't-2',
type: '提现',
amount: -500,
balance: 1100,
withdrawable: 500,
frozen: 600,
status: '冻结中',
frozenTime: '2026-06-10 06:00',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 06:00',
},
{
key: 't-3',
type: '取消报名退款',
amount: -100,
balance: 500,
withdrawable: 500,
frozen: 0,
status: '正常',
frozenTime: '-',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 05:00',
},
{
key: 't-4',
type: '报名收入',
amount: 350,
balance: 850,
withdrawable: 750,
frozen: 100,
status: '正常',
frozenTime: '-',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-09 17:30',
},
{
key: 't-5',
type: '提现',
amount: -250,
balance: 600,
withdrawable: 500,
frozen: 100,
status: '已解冻',
frozenTime: '2026-06-08 10:00',
unfreezeTime: '2026-06-09 08:00',
relatedNo: 'xxxxxxxx',
time: '2026-06-08 10:00',
},
];
// ============================================================
// Model
// ============================================================
/**
* 用户钱包页数据模型
*/
export function useWalletModel() {
// ===== 筛选条件 =====
// ===== 筛选条件(字段名对齐 API =====
const filterForm = reactive({
searchUserName: '',
searchPhone: '',
minBalance: '' as string | number,
maxBalance: '' as string | number,
nickname: '',
phone: '',
minBalance: '',
maxBalance: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
// ===== 顶部统计 =====
const [summary, setSummary] = useState(MOCK_SUMMARY);
// ===== 顶部统计(汇总值从接口返回的第一条记录中提取) =====
const [summary, setSummary] = useState({
totalBalance: '0.00',
frozenAmount: '0.00',
totalWithdraw: '0.00',
});
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
const [dataSource, setDataSource] = useState<WalletSummaryVO[]>([]);
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
// ===== 详情弹窗状态 =====
const [detailVisible, setDetailVisible] = useState<boolean>(false);
const [currentWallet, setCurrentWallet] = useState<any>({});
const [detailLoading, setDetailLoading] = useState<boolean>(false);
// ===== 表格列配置 =====
// ===== 表格列配置dataIndex 对齐 API WalletSummaryVO =====
const columns = [
{ title: '用户ID', dataIndex: 'userId', key: 'userId', width: 160 },
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '用户ID', dataIndex: 'userId', key: 'userId', width: 120 },
{ title: '用户昵称', dataIndex: 'userNickname', key: 'userNickname', width: 120 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
dataIndex: 'amount',
key: 'amount',
width: 130,
align: 'left' as const,
},
{
title: '冻结金额',
dataIndex: 'frozen',
key: 'frozen',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
dataIndex: 'frozenAmount',
key: 'frozenAmount',
width: 130,
align: 'left' as const,
},
{
title: '累计提现',
dataIndex: 'totalWithdraw',
key: 'totalWithdraw',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
dataIndex: 'withdrawalAmount',
key: 'withdrawalAmount',
width: 130,
align: 'left' as const,
},
];
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
debouncedUserName.value.trim() !== '' ||
debouncedNickname.value.trim() !== '' ||
debouncedPhone.value.trim() !== '' ||
filterForm.minBalance !== '' ||
filterForm.maxBalance !== ''
);
});
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): WalletQueryParams => {
const params: WalletQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim();
if (filterForm.minBalance) params.amountBegin = filterForm.minBalance;
if (filterForm.maxBalance) params.amountEnd = filterForm.maxBalance;
return params;
};
// ===== 方法 =====
/** 查询(节流 500ms */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
minBalance: filterForm.minBalance,
maxBalance: filterForm.maxBalance,
// 余额筛选:若起始 > 截止,互换两值
const min = Number(filterForm.minBalance);
const max = Number(filterForm.maxBalance);
if (filterForm.minBalance && filterForm.maxBalance && min > max) {
filterForm.minBalance = filterForm.maxBalance;
filterForm.maxBalance = String(min);
}
const params = buildQueryParams();
console.log('钱包列表查询参数:', params);
const res = await getWalletList(params);
if (res.code === 200) {
console.log('钱包列表查询结果:', { total: res.data.total, count: res.data.list.length });
setDataSource(res.data.list);
setPagination({ ...pagination.value, total: res.data.total });
// 从第一条记录提取汇总值
if (res.data.list.length > 0) {
const first = res.data.list[0];
setSummary({
totalBalance: first.totalAmount || '0.00',
frozenAmount: first.totalFrozenAmount || '0.00',
totalWithdraw: first.totalWithdrawalAmount || '0.00',
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
setSummary(MOCK_SUMMARY);
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
}
}
} catch {
// 网络层已统一提示
} finally {
setLoading(false);
}
}, 500);
/** 重置(节流 500ms */
const handleReset = useThrottleFn(() => {
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.nickname = '';
filterForm.phone = '';
filterForm.minBalance = '';
filterForm.maxBalance = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setSummary(MOCK_SUMMARY);
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
setSummary({ totalBalance: '0.00', frozenAmount: '0.00', totalWithdraw: '0.00' });
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
@@ -294,41 +178,15 @@ export function useWalletModel() {
handleSearch();
};
/** 打开明细弹窗 */
const handleViewDetail = (record: any) => {
setCurrentWallet(record);
setDetailVisible(true);
};
/** 关闭明细弹窗 */
const handleCloseDetail = () => {
setDetailVisible(false);
};
/**
* 加载某用户的交易明细
* 真实场景应调用 API;演示阶段所有用户共用同一份假数据
*/
const loadTransactions = async (_record: any): Promise<any[]> => {
setDetailLoading(true);
try {
// 模拟接口延迟
await new Promise((resolve) => setTimeout(resolve, 200));
return [...MOCK_TRANSACTIONS];
} finally {
setDetailLoading(false);
}
};
/** 渲染交易状态 StatusTag */
const renderTransactionStatus = (status: string) => {
const info = TRANSACTION_STATUS_MAP[status] || {
label: status || '-',
tone: 'default' as const,
};
return h(StatusTag, { label: info.label, tone: info.tone });
};
return {
filterForm,
loading,
@@ -339,14 +197,11 @@ export function useWalletModel() {
hasFilter,
detailVisible,
currentWallet,
detailLoading,
handleSearch,
handleReset,
handlePageChange,
handleViewDetail,
handleCloseDetail,
loadTransactions,
renderTransactionStatus,
TRANSACTION_TYPE_OPTIONS: TRANSACTION_TYPE_OPTIONS as any,
TRANSACTION_STATUS_OPTIONS: TRANSACTION_STATUS_OPTIONS as any,
};
@@ -106,6 +106,12 @@
color: rgba(0, 0, 0, 0.85);
}
.auditImgList {
display: flex;
gap: 5px;
align-items: center;
}
// ===== 审核表单 =====
.formRow {
display: flex;
@@ -189,6 +195,10 @@
margin-right: 8px;
}
.auditImg + .auditImg {
margin-left: 5px;
}
.noImage {
color: rgba(0, 0, 0, 0.45);
}
@@ -1,72 +1,80 @@
import { defineComponent, reactive, ref, watch } from 'vue';
import { Modal, Radio, Input, Button, Upload, Image, message } from 'ant-design-vue';
import { Modal, Radio, Input, Button, Upload, Image, Spin, message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useWithdrawModel } from '../model/useWithdrawModel';
import styles from './WithdrawAuditModal.module.less';
import { getWithdrawInfo, postWithdrawAudit, type WithdrawInfoVO } from '@/api/withdraw';
import { AUDIT_STATUS_MAP, PAY_STATUS_MAP } from '../model/useWithdrawModel';
import styles from './WithdrawDetailModal.module.less';
const { TextArea } = Input;
interface WithdrawAuditModalProps {
interface WithdrawDetailModalProps {
visible: boolean;
record: any;
onClose: () => void;
onAudited: () => void;
}
/**
* /
*
*
* -
* -
* -
* -
* /
*/
export default defineComponent({
name: 'WithdrawAuditModal',
name: 'WithdrawDetailModal',
props: {
visible: { type: Boolean, default: false },
record: { type: Object, default: () => ({}) },
onClose: { type: Function, required: true },
onAudited: { type: Function, default: undefined },
},
setup(props: WithdrawAuditModalProps) {
const { submitAudit } = useWithdrawModel();
setup(props: WithdrawDetailModalProps) {
const detail = ref<WithdrawInfoVO | null>(null);
const detailLoading = ref(false);
// ===== 表单状态 =====
const auditForm = reactive({
pass: true,
remark: '',
});
const auditForm = reactive({ pass: true, remark: '' });
const imageList = ref<any[]>([]);
const submitting = ref<boolean>(false);
const submitting = ref(false);
// ===== 拉取详情 =====
const fetchDetail = async (id: number) => {
detailLoading.value = true;
detail.value = null;
try {
const res = await getWithdrawInfo(id);
if (res.code === 200) detail.value = res.data;
} catch {
// 网络层已统一提示
} finally {
detailLoading.value = false;
}
};
/** 监听 visible:每次打开都重置表单 */
watch(
() => props.visible,
(val) => {
if (val) {
async (val) => {
if (val && props.record?.id) {
auditForm.pass = true;
auditForm.remark = '';
imageList.value = [];
submitting.value = false;
await fetchDetail(props.record.id);
}
},
{ immediate: true },
);
/** 上传前校验(演示用:限制 5 张 & 5MB */
// ===== 上传 =====
const beforeUpload = (file: any) => {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
if (file.size / 1024 / 1024 >= 5) {
message.error('图片大小不能超过 5MB');
return false;
}
imageList.value = [...imageList.value, file];
return false; // 阻止自动上传,由"提交审核"按钮统一处理
return false;
};
const handleRemove = (file: any) => {
imageList.value = imageList.value.filter((f) => f.uid !== file.uid);
};
// ===== 提交审核 =====
const handleSubmit = async () => {
if (!auditForm.remark.trim()) {
message.warning('请输入审核内容');
@@ -74,17 +82,30 @@ export default defineComponent({
}
submitting.value = true;
try {
// 真实场景应上传图片并调用审核 API
const urls = imageList.value.map((f) => f.name || '');
submitAudit(auditForm.pass, auditForm.remark.trim(), urls);
const checkImg = imageList.value
.map((f) => f.name || f.url || '')
.filter(Boolean)
.join(',');
const res = await postWithdrawAudit({
id: String(props.record.id),
audit: auditForm.pass ? '1' : '2',
checkMsg: auditForm.remark.trim(),
checkImg,
});
if (res.code === 200) {
message.success(auditForm.pass ? '已审核通过' : '已审核驳回');
props.onAudited?.();
props.onClose();
} else {
message.error(res.msg || '审核失败');
}
} catch {
// 网络层已统一提示
} finally {
submitting.value = false;
}
};
/**
*
*/
const renderItem = (label: string, value: any, isBold = false) => (
<div class={styles.descItem}>
<span class={styles.descLabel}>{label}</span>
@@ -92,47 +113,30 @@ export default defineComponent({
</div>
);
return () => {
const record = props.record || {};
const bank = record.bank || {};
const pay = record.pay || {};
const isPending = record.auditStatus === '待审核';
/** 渲染内容区(加载完成后) */
const renderContent = () => {
const d = detail.value!;
const bankCardTypeLabel = d.bankCardType === 1 ? '个人' : d.bankCardType || '-';
const isPending = d.auditStatus === 0;
return (
<Modal
visible={props.visible}
onCancel={props.onClose}
width={850}
centered
footer={null}
title={null}
closable={false}
wrapClassName={styles.withdrawAuditModalMain}
>
{/* 自定义标题栏 */}
<div class={styles.modalHeader}>
<span class={styles.modalTitle}></span>
<button class={styles.closeBtn} onClick={props.onClose}>
×
</button>
</div>
<>
{/* ===== 基本信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}></div>
<div class={styles.descGrid}>
{renderItem('申请人昵称:', record.nickName)}
{renderItem('申请人手机号:', record.phone)}
{renderItem('真实姓名:', record.realName)}
{renderItem('申请时间:', record.applyTime)}
{renderItem('打款类型:', record.withdrawType)}
{renderItem('申请人昵称:', d.nickname)}
{renderItem('申请人手机号:', d.phone)}
{renderItem('真实姓名:', d.realName)}
{renderItem('申请时间:', d.createDate)}
{renderItem('打款类型:', d.withdrawType)}
<div style="display: contents;" />
{renderItem('提现金额:', `¥${(record.withdrawAmount || 0).toFixed(2)}`, true)}
{renderItem('费率:', `${((record.feeRate || 0) * 100).toFixed(2)}%`)}
{renderItem('手续费:', `¥${(record.feeAmount || 0).toFixed(2)}`)}
{renderItem('到账金额:', `¥${(record.transferAmount || 0).toFixed(2)}`, true)}
{renderItem('审核状态:', record.auditStatus, true)}
{renderItem('列账状态:', record.transferStatus || '-')}
{renderItem('提现金额:', `¥${d.withdrawAmount}`, true)}
{renderItem('费率:', `${(Number(d.feeRate) * 100).toFixed(2)}%`)}
{renderItem('手续费:', `¥${d.feeAmount}`)}
{renderItem('到账金额:', `¥${d.receivedAmount}`, true)}
{renderItem('审核状态:', AUDIT_STATUS_MAP[d.auditStatus] ?? '-', true)}
{renderItem('列账状态:', PAY_STATUS_MAP[d.payStatus] ?? '-')}
</div>
</div>
@@ -140,11 +144,11 @@ export default defineComponent({
<div class={styles.section}>
<div class={styles.sectionTitle}></div>
<div class={styles.descGrid}>
{renderItem('银行卡类型:', bank.cardType)}
{renderItem('持卡人:', bank.holder)}
{renderItem('银行卡号:', bank.cardNo)}
{renderItem('开户行:', bank.bankName)}
{renderItem('开户支行:', bank.branchName)}
{renderItem('银行卡类型:', bankCardTypeLabel)}
{renderItem('持卡人:', d.cardHolderName)}
{renderItem('银行卡号:', d.bankCardNumber)}
{renderItem('开户行:', d.bankName)}
{renderItem('开户支行:', d.branchName)}
</div>
</div>
@@ -152,8 +156,8 @@ export default defineComponent({
<div class={styles.section}>
<div class={styles.sectionTitle}></div>
<div class={styles.descGrid}>
{renderItem('到账支付时间:', pay.transferTime || '-')}
{renderItem('商户订单号:', pay.merchantNo)}
{renderItem('到账支付时间:', d.payTime || '-')}
{renderItem('订单号:', d.orderNo)}
</div>
</div>
@@ -169,10 +173,9 @@ export default defineComponent({
onUpdate:value={(val: boolean) => (auditForm.pass = val)}
>
<Radio value={true}></Radio>
<Radio value={false}></Radio>
<Radio value={false}></Radio>
</Radio.Group>
</div>
<div class={styles.formRow}>
<span class={[styles.formLabel, styles.formLabelTop]}></span>
<TextArea
@@ -184,7 +187,6 @@ export default defineComponent({
style={{ flex: 1 }}
/>
</div>
<div class={styles.formRow}>
<span class={[styles.formLabel, styles.formLabelTop]}></span>
<Upload
@@ -203,7 +205,6 @@ export default defineComponent({
)}
</Upload>
</div>
<div class={styles.footer}>
<Button type="primary" onClick={handleSubmit} loading={submitting.value}>
@@ -214,13 +215,13 @@ export default defineComponent({
<>
<div class={styles.sectionTitle}></div>
<div class={styles.infoColumn}>
{renderItem('审核时间:', record.auditTime)}
{renderItem('审核人:', record.auditor)}
{renderItem('审核时间:', d.auditDate)}
{renderItem('审核人:', d.auditNickname)}
<div class={styles.descItem}>
<span class={styles.descLabel}></span>
{record.auditImages && record.auditImages.length ? (
<Image.PreviewGroup>
{record.auditImages.map((src: string, idx: number) => (
{d.auditImgList?.length ? (
<div class={styles.auditImgList}>
{d.auditImgList.map((src: string, idx: number) => (
<Image
key={idx}
src={src}
@@ -229,7 +230,7 @@ export default defineComponent({
class={styles.auditImg}
/>
))}
</Image.PreviewGroup>
</div>
) : (
<span class={[styles.descValue, styles.noImage]}></span>
)}
@@ -238,8 +239,36 @@ export default defineComponent({
</>
)}
</div>
</Modal>
</>
);
};
return () => (
<Modal
visible={props.visible}
onCancel={props.onClose}
width={850}
centered
footer={null}
title={null}
closable={false}
wrapClassName={styles.withdrawAuditModalMain}
>
<div class={styles.modalHeader}>
<span class={styles.modalTitle}></span>
<button class={styles.closeBtn} onClick={props.onClose}>
×
</button>
</div>
{detailLoading.value ? (
<div style={{ textAlign: 'center', padding: '80px 0' }}>
<Spin size="large" />
</div>
) : detail.value ? (
renderContent()
) : null}
</Modal>
);
},
});
+34 -16
View File
@@ -1,8 +1,8 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import { Button, Input, Table, Form, Space, Pagination, Select } from 'ant-design-vue';
import { useWithdrawModel } from './model/useWithdrawModel';
import { useWithdrawModel, AUDIT_STATUS_MAP, PAY_STATUS_MAP } from './model/useWithdrawModel';
import { useContainerSize } from '@/hooks';
import WithdrawAuditModal from './components/WithdrawAuditModal';
import WithdrawDetailModal from './components/WithdrawDetailModal';
import pageStyles from '@/assets/styles/pageLayout.module.less';
/**
@@ -20,16 +20,21 @@ function renderBodyCell({
onAudit: (record: any) => void;
onView: (record: any) => void;
}) {
if (column.key === 'auditStatus') {
return <span>{AUDIT_STATUS_MAP[record.auditStatus] || record.auditStatus || '-'}</span>;
}
if (column.key === 'payStatus') {
return <span>{PAY_STATUS_MAP[record.payStatus] ?? '-'}</span>;
}
if (column.key === 'action') {
// 待审核:显示「审核
if (record.auditStatus === '待审核') {
// auditStatus=0(待审核)→ 显示「审核」,其他 → 显示「查看
if (record.auditStatus === 0) {
return (
<Button type="link" size="small" onClick={() => onAudit(record)}>
</Button>
);
}
// 其它状态:仅显示「查看」
return (
<Button type="link" size="small" onClick={() => onView(record)}>
@@ -60,7 +65,7 @@ export default defineComponent({
handleCloseAudit,
handleView,
AUDIT_STATUS_OPTIONS,
TRANSFER_STATUS_OPTIONS,
PAY_STATUS_OPTIONS,
} = useWithdrawModel();
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
@@ -77,21 +82,28 @@ export default defineComponent({
},
];
// 首次进入自动加载
onMounted(() => {
handleSearch();
});
return () => (
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="searchUserName">
<Form.Item label="申请人昵称" name="nickname">
<Input
v-model:value={filterForm.nickname}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Form.Item label="手机号" name="phone">
<Input
v-model:value={filterForm.phone}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
@@ -100,6 +112,7 @@ export default defineComponent({
</Form.Item>
<Form.Item label="真实姓名" name="realName">
<Input
v-model:value={filterForm.realName}
placeholder="请输入"
style={{ width: '160px' }}
allowClear
@@ -109,19 +122,21 @@ export default defineComponent({
<Form.Item label="审核状态" name="auditStatus">
<Select
value={filterForm.auditStatus}
options={AUDIT_STATUS_OPTIONS as any}
options={AUDIT_STATUS_OPTIONS}
style={{ width: '140px' }}
allowClear
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.auditStatus = val || '')}
/>
</Form.Item>
<Form.Item label="到账状态" name="transferStatus">
<Form.Item label="到账状态" name="payStatus">
<Select
value={filterForm.transferStatus}
options={TRANSFER_STATUS_OPTIONS as any}
value={filterForm.payStatus}
options={PAY_STATUS_OPTIONS}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.transferStatus = val || '')}
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.payStatus = val || '')}
/>
</Form.Item>
<Form.Item>
@@ -142,6 +157,7 @@ export default defineComponent({
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
rowKey="id"
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
@@ -165,17 +181,19 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
{/* ===== 审核弹窗 ===== */}
<WithdrawAuditModal
{auditVisible.value && (
<WithdrawDetailModal
visible={auditVisible.value}
record={currentRecord.value}
onClose={handleCloseAudit}
onAudited={handleSearch}
/>
)}
</div>
);
},
@@ -1,159 +1,40 @@
import { reactive, toRef, Ref } from 'vue';
import { message } from 'ant-design-vue';
import { computed, reactive, toRef, Ref } from 'vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
import { getWithdrawList, type WithdrawVO, type WithdrawQueryParams } from '@/api/withdraw';
// ============================================================
// 常量
// ============================================================
/** 审核状态选项(筛选 */
/** 审核状态选项(value 对齐 API auditStatus: 0/1/2 */
export const AUDIT_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '待审核', label: '待审核' },
{ value: '审核通过', label: '审核通过' },
{ value: '审核不通过', label: '审核不通过' },
{ value: '0', label: '待审核' },
{ value: '1', label: '审核通过' },
{ value: '2', label: '审核驳回' },
] as const;
/** 到账状态选项(筛选 */
export const TRANSFER_STATUS_OPTIONS = [
/** 到账状态选项(value 对齐 API payStatus: 0/1/2 */
export const PAY_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '到账成功', label: '到账成功' },
{ value: '到账失败', label: '到账失败' },
{ value: '-', label: '-' },
{ value: '0', label: '未支付' },
{ value: '1', label: '支付成功' },
{ value: '2', label: '支付失败' },
] as const;
/** 提现类型选项(筛选) */
export const WITHDRAW_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '银行卡', label: '银行卡' },
{ value: '支付宝', label: '支付宝' },
{ value: '微信', label: '微信' },
] as const;
/** 审核状态文案映射 */
export const AUDIT_STATUS_MAP: Record<number, string> = {
0: '待审核',
1: '审核通过',
2: '审核驳回',
};
// ============================================================
// 提现假数据(4 条,覆盖各审核/到账状态组合)
// ============================================================
const MOCK_DATA = [
{
key: '1',
nickName: '可乐',
phone: '17762466262',
realName: '可乐',
withdrawType: '银行卡',
withdrawAmount: 1.0,
feeRate: 0.006,
feeAmount: 0.01,
transferAmount: 0.99,
auditStatus: '待审核',
transferStatus: '',
thirdNo: '',
applyTime: '2026-04-11 09:53',
// 银行卡信息
bank: {
cardType: '个人',
holder: '龚',
cardNo: '6215581807006475126',
bankName: '交通银行',
branchName: '交通银行宜昌西坝支行',
},
// 支付信息
pay: {
transferTime: '',
merchantNo: 'WD04111775872421935100',
},
},
{
key: '2',
nickName: '李四',
phone: '12345678998',
realName: '李四',
withdrawType: '支付宝',
withdrawAmount: 200.0,
feeRate: 0.006,
feeAmount: 1.2,
transferAmount: 198.8,
auditStatus: '审核通过',
transferStatus: '到账成功',
thirdNo: 'yyyyyyyyyy',
applyTime: '2026-05-25 14:30:00',
bank: {
cardType: '个人',
holder: '李四',
cardNo: '6222021234567890123',
bankName: '工商银行',
branchName: '工商银行北京中关村支行',
},
pay: {
transferTime: '2026-05-25 14:35:00',
merchantNo: 'WD0000111122223333',
},
// 审核信息(已审核后展示)
auditTime: '2026-05-25 14:32:00',
auditor: '管理员A',
auditImages: [],
},
{
key: '3',
nickName: '王五',
phone: '13800138000',
realName: '王五',
withdrawType: '微信',
withdrawAmount: 500.0,
feeRate: 0.006,
feeAmount: 3.0,
transferAmount: 497.0,
auditStatus: '审核通过',
transferStatus: '到账失败',
thirdNo: 'zzzzzzzzzz',
applyTime: '2026-05-24 11:15:00',
bank: {
cardType: '个人',
holder: '王五',
cardNo: '微信钱包',
bankName: '微信支付',
branchName: '-',
},
pay: {
transferTime: '',
merchantNo: 'WD9999888877776666',
},
// 审核信息(已审核后展示)
auditTime: '2026-05-24 11:20:00',
auditor: '管理员B',
auditImages: [],
},
{
key: '4',
nickName: '赵六',
phone: '13900139001',
realName: '赵六',
withdrawType: '银行卡',
withdrawAmount: 80.0,
feeRate: 0.006,
feeAmount: 0.48,
transferAmount: 79.52,
auditStatus: '审核不通过',
transferStatus: '',
thirdNo: '',
applyTime: '2026-05-23 09:45:00',
bank: {
cardType: '个人',
holder: '赵六',
cardNo: '6217858000123456789',
bankName: '建设银行',
branchName: '建设银行上海陆家嘴支行',
},
pay: {
transferTime: '',
merchantNo: '',
},
// 审核信息(已审核后展示)
auditTime: '2026-05-23 10:00:00',
auditor: '管理员A',
auditImages: [],
},
];
/** 到账状态文案映射 */
export const PAY_STATUS_MAP: Record<number, string> = {
0: '未支付',
1: '支付成功',
2: '支付失败',
};
// ============================================================
// Model
@@ -163,22 +44,22 @@ const MOCK_DATA = [
* 提现申请页数据模型
*/
export function useWithdrawModel() {
// ===== 筛选条件 =====
// ===== 筛选条件(字段名对齐 API 查询参数) =====
const filterForm = reactive({
searchUserName: '',
searchPhone: '',
nickname: '',
phone: '',
realName: '',
auditStatus: '',
transferStatus: '',
payStatus: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
const { debouncedValue: debouncedNickname } = useDebounce(
toRef(filterForm, 'nickname') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
toRef(filterForm, 'phone') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedRealName } = useDebounce(
@@ -188,96 +69,95 @@ export function useWithdrawModel() {
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
const [dataSource, setDataSource] = useState<WithdrawVO[]>([]);
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
// ===== 审核弹窗状态 =====
const [auditVisible, setAuditVisible] = useState<boolean>(false);
const [currentRecord, setCurrentRecord] = useState<any>({});
// ===== 表格列配置 =====
// ===== 表格列配置dataIndex 对齐 API WithdrawVO =====
const columns = [
{ title: '申请人昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '申请人昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
{ title: '申请人手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 120 },
{
title: '提现类型',
dataIndex: 'withdrawType',
key: 'withdrawType',
width: 110,
},
{ title: '提现类型', dataIndex: 'withdrawType', key: 'withdrawType', width: 110 },
{
title: '提现金额',
dataIndex: 'withdrawAmount',
key: 'withdrawAmount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
width: 130,
align: 'left' as const,
},
{
title: '到账金额',
dataIndex: 'transferAmount',
key: 'transferAmount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{
title: '审核状态',
dataIndex: 'auditStatus',
key: 'auditStatus',
width: 110,
},
{
title: '到账状态',
dataIndex: 'transferStatus',
key: 'transferStatus',
width: 110,
},
{ title: '第三方单号', dataIndex: 'thirdNo', key: 'thirdNo', width: 160 },
{
title: '申请时间',
dataIndex: 'applyTime',
key: 'applyTime',
width: 170,
dataIndex: 'receivedAmount',
key: 'receivedAmount',
width: 130,
align: 'left' as const,
},
{ title: '审核状态', dataIndex: 'auditStatus', key: 'auditStatus', width: 110 },
{ title: '到账状态', dataIndex: 'payStatus', key: 'payStatus', width: 110 },
{ title: '流水单号', dataIndex: 'serialNumber', key: 'serialNumber', width: 180 },
{ title: '申请时间', dataIndex: 'createDate', key: 'createDate', width: 180 },
];
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
debouncedNickname.value.trim() !== '' ||
debouncedPhone.value.trim() !== '' ||
debouncedRealName.value.trim() !== '' ||
filterForm.auditStatus !== '' ||
filterForm.payStatus !== ''
);
});
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): WithdrawQueryParams => {
const params: WithdrawQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (debouncedNickname.value.trim()) params.nickname = debouncedNickname.value.trim();
if (debouncedPhone.value.trim()) params.phone = debouncedPhone.value.trim();
if (debouncedRealName.value.trim()) params.realName = debouncedRealName.value.trim();
if (filterForm.auditStatus) params.auditStatus = filterForm.auditStatus;
if (filterForm.payStatus) params.payStatus = filterForm.payStatus;
return params;
};
// ===== 方法 =====
/** 查询(节流 500ms */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
realName: debouncedRealName.value,
auditStatus: filterForm.auditStatus,
transferStatus: filterForm.transferStatus,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
const queryParams = buildQueryParams();
console.log('提现列表查询参数:', queryParams);
const res = await getWithdrawList(queryParams);
if (res.code === 200) {
console.log('提现列表查询结果:', { total: res.data.total, count: res.data.list.length });
setDataSource(res.data.list);
setPagination({ ...pagination.value, total: res.data.total });
}
} catch {
// 网络层已统一提示
} finally {
setLoading(false);
}
}, 500);
/** 重置(节流 500ms */
/** 重置(重置后自动查询 */
const handleReset = useThrottleFn(() => {
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.nickname = '';
filterForm.phone = '';
filterForm.realName = '';
filterForm.auditStatus = '';
filterForm.transferStatus = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
filterForm.payStatus = '';
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
@@ -285,10 +165,7 @@ export function useWithdrawModel() {
handleSearch();
};
/**
* 打开审核弹窗
* 真实场景应调用 API;此处直接用列表中的 record
*/
/** 打开审核弹窗 */
const handleAudit = (record: any) => {
setCurrentRecord(record);
setAuditVisible(true);
@@ -299,22 +176,6 @@ export function useWithdrawModel() {
setAuditVisible(false);
};
/**
* 提交审核结果(在弹窗中调用)
* pass = true 通过 / false 不通过
*/
const submitAudit = (pass: boolean, _remark: string, _images: string[]) => {
setDataSource(
dataSource.value.map((item) =>
item.key === currentRecord.value.key
? { ...item, auditStatus: pass ? '审核通过' : '审核不通过' }
: item,
),
);
message.success(pass ? '已审核通过' : '已审核不通过');
handleCloseAudit();
};
/** 查看:打开同一个详情弹窗(只读展示审核信息) */
const handleView = (record: any) => {
setCurrentRecord(record);
@@ -334,9 +195,8 @@ export function useWithdrawModel() {
handlePageChange,
handleAudit,
handleCloseAudit,
submitAudit,
handleView,
AUDIT_STATUS_OPTIONS: AUDIT_STATUS_OPTIONS as any,
TRANSFER_STATUS_OPTIONS: TRANSFER_STATUS_OPTIONS as any,
PAY_STATUS_OPTIONS: PAY_STATUS_OPTIONS as any,
};
}
-1
View File
@@ -108,7 +108,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
@@ -167,7 +167,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
)}
-1
View File
@@ -179,7 +179,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
-1
View File
@@ -258,7 +258,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `${total}`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>