+ {/* ===== 顶部标题 + 时间范围 ===== */}
+
+
+ {/* ===== 统计卡 ===== */}
+
+ {statCards.map((item) => (
+
+
{item.label}
+
+ ¥{formatMoney(item.value)}
+
+
+ {item.desc}
+
+
+ ))}
+
+
+ {/* ===== 柱状图卡（echarts） ===== */}
+
+
+ 📊
+ 月度收支趋势（近 6 个月）
+
+
{
+ if (el) chartRef.value = el as HTMLElement;
+ }}
+ class={styles.chartEcharts}
+ />
+
+
+ {/* ===== 月度收支明细 ===== */}
+
+
+ );
+ };
},
});
diff --git a/src/pages/finance/reports/model/useReportsModel.ts b/src/pages/finance/reports/model/useReportsModel.ts
new file mode 100644
index 0000000..a3a232a
--- /dev/null
+++ b/src/pages/finance/reports/model/useReportsModel.ts
@@ -0,0 +1,163 @@
+import { ref } from 'vue';
+import { useState } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 时间范围选项 */
+export const RANGE_OPTIONS = [
+ { value: 'month', label: '本月' },
+ { value: '3m', label: '近 3 个月' },
+ { value: '6m', label: '近 6 个月' },
+ { value: 'year', label: '本年' },
+] as const;
+
+// ============================================================
+// 假数据（数值自洽：总收入 - 总提现 = 平台余额）
+// ============================================================
+
+/** 6 个月柱状图数据（月份标签 + 订单金额 + 净收入） */
+const CHART_DATA = [
+ { month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
+ { month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },
+ { month: '03月', order: 24800, netIncome: 23200, withdraw: 1400 },
+ { month: '04月', order: 26100, netIncome: 24900, withdraw: 1500 },
+ { month: '05月', order: 28900, netIncome: 27400, withdraw: 1800 },
+ { month: '06月', order: 32500, netIncome: 31860, withdraw: 2100 },
+];
+
+/** 月度收支明细（最近 4 个月） */
+const DETAIL_DATA = [
+ {
+ key: '2026-06',
+ month: '2026-06',
+ order: 32500,
+ refund: 640,
+ netIncome: 31860,
+ withdraw: 2100,
+ },
+ {
+ key: '2026-05',
+ month: '2026-05',
+ order: 28900,
+ refund: 1500,
+ netIncome: 27400,
+ withdraw: 1800,
+ },
+ {
+ key: '2026-04',
+ month: '2026-04',
+ order: 26100,
+ refund: 1200,
+ netIncome: 24900,
+ withdraw: 1500,
+ },
+ {
+ key: '2026-03',
+ month: '2026-03',
+ order: 24800,
+ refund: 1600,
+ netIncome: 23200,
+ withdraw: 1400,
+ },
+];
+
+/** 顶部 3 张统计卡数据 */
+const SUMMARY = {
+ totalIncome: 147860, // 总收入（净收入合计）
+ totalWithdraw: 8950, // 总提现
+ totalBalance: 138910, // 平台余额 = 总收入 - 总提现
+};
+
+// ============================================================
+// 工具
+// ============================================================
+
+/** 千分位 + 保留 2 位小数 */
+function formatMoney(n: number): string {
+ return (n || 0).toLocaleString('zh-CN', {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ });
+}
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 账务报表数据模型
+ */
+export function useReportsModel() {
+ // ===== 时间范围 =====
+ const [range, setRange] = useState
('month');
+
+ /** 切换时间范围（演示用：打日志，不改数据） */
+ const handleRangeChange = (val: string) => {
+ setRange(val);
+ // TODO: 接入 API 时按 range 重新拉取汇总 / 图表 / 明细
+ };
+
+ // ===== 汇总 =====
+ const summary = ref({ ...SUMMARY });
+
+ // ===== 图表 =====
+ const chartData = ref([...CHART_DATA]);
+
+ // ===== 明细表 =====
+ const detailColumns = [
+ {
+ title: '月份',
+ dataIndex: 'month',
+ key: 'month',
+ width: 140,
+ align: 'left' as const,
+ },
+ {
+ title: '订单金额',
+ dataIndex: 'order',
+ key: 'order',
+ align: 'right' as const,
+ customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+ },
+ {
+ title: '退款金额',
+ dataIndex: 'refund',
+ key: 'refund',
+ align: 'right' as const,
+ customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+ customCell: (_record: any) => ({ style: { color: '#ff4d4f' } }),
+ },
+ {
+ title: '净收入',
+ dataIndex: 'netIncome',
+ key: 'netIncome',
+ align: 'right' as const,
+ customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+ customCell: (_record: any) => ({
+ style: { color: '#52c41a', fontWeight: 600 },
+ }),
+ },
+ {
+ title: '提现金额',
+ dataIndex: 'withdraw',
+ key: 'withdraw',
+ align: 'right' as const,
+ customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+ customCell: (_record: any) => ({ style: { color: '#fa8c16' } }),
+ },
+ ];
+ const detailData = ref([...DETAIL_DATA]);
+
+ return {
+ range,
+ handleRangeChange,
+ summary,
+ chartData,
+ detailColumns,
+ detailData,
+ formatMoney,
+ RANGE_OPTIONS: RANGE_OPTIONS as any,
+ };
+}
diff --git a/src/pages/finance/wallet/components/WalletDetailModal.module.less b/src/pages/finance/wallet/components/WalletDetailModal.module.less
new file mode 100644
index 0000000..2abdd8f
--- /dev/null
+++ b/src/pages/finance/wallet/components/WalletDetailModal.module.less
@@ -0,0 +1,62 @@
+// ===== 自定义标题栏 =====
+.modalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 0 16px;
+ margin-bottom: 16px;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.modalTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.85);
+}
+
+.closeBtn {
+ width: 28px;
+ height: 28px;
+ border: none;
+ background: transparent;
+ font-size: 22px;
+ line-height: 1;
+ color: rgba(0, 0, 0, 0.45);
+ cursor: pointer;
+ border-radius: 4px;
+ transition: all 0.2s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ color: rgba(0, 0, 0, 0.85);
+ }
+}
+
+// ===== 内容区 =====
+.modalBody {
+ padding-top: 0;
+}
+
+// ===== 筛选区 =====
+.filterBar {
+ flex-shrink: 0;
+ padding: 16px 20px;
+ margin-bottom: 16px;
+ background: #fafafa;
+ border: 1px solid #f0f0f0;
+ border-radius: 6px;
+}
+
+// ===== 表格区 =====
+.tableWrap {
+ flex: 1;
+ min-height: 0;
+}
+
+// ===== Modal 外层包裹：去除 antd 默认内边距 =====
+/* .walletModalWrap {
+ :global(.ant-modal-body) {
+ padding-top: 16px;
+ padding-bottom: 20px;
+ }
+} */
diff --git a/src/pages/finance/wallet/components/WalletDetailModal.tsx b/src/pages/finance/wallet/components/WalletDetailModal.tsx
new file mode 100644
index 0000000..de45682
--- /dev/null
+++ b/src/pages/finance/wallet/components/WalletDetailModal.tsx
@@ -0,0 +1,276 @@
+import { defineComponent, ref, reactive, computed, watch } from 'vue';
+import { Modal, Table, Button, Select, Form, Space, DatePicker } from 'ant-design-vue';
+import {
+ useWalletModel,
+ TRANSACTION_TYPE_OPTIONS,
+ TRANSACTION_STATUS_OPTIONS,
+} from '../model/useWalletModel';
+import styles from './WalletDetailModal.module.less';
+
+const { RangePicker } = DatePicker;
+
+interface WalletDetailModalProps {
+ visible: boolean;
+ record: any;
+ onClose: () => void;
+}
+
+/**
+ * 钱包交易明细弹窗
+ */
+export default defineComponent({
+ name: 'WalletDetailModal',
+ props: {
+ visible: { type: Boolean, default: false },
+ record: { type: Object, default: () => ({}) },
+ onClose: { type: Function, required: true },
+ },
+ setup(props: WalletDetailModalProps) {
+ const { loadTransactions, renderTransactionStatus } = useWalletModel();
+
+ // ===== 弹窗内筛选条件 =====
+ const detailFilter = reactive({
+ timeRange: null as [string, string] | null,
+ type: '',
+ status: '',
+ });
+
+ // ===== 加载明细 =====
+ const loading = ref(false);
+ const allTransactions = ref([]);
+
+ const fetchTransactions = async () => {
+ loading.value = true;
+ try {
+ allTransactions.value = await loadTransactions(props.record);
+ } 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 = '';
+ };
+
+ // ===== 分页 =====
+ 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;
+ };
+
+ /** 监听 visible 变化：打开时加载明细 */
+ watch(
+ () => props.visible,
+ (val) => {
+ if (val) {
+ detailFilter.timeRange = null;
+ detailFilter.type = '';
+ detailFilter.status = '';
+ allTransactions.value = [];
+ fetchTransactions();
+ }
+ },
+ );
+
+ // ===== 表格列配置 =====
+ const detailColumns = [
+ {
+ title: '类型',
+ dataIndex: 'type',
+ key: 'type',
+ width: 120,
+ },
+ {
+ 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 ? '+' : '';
+ return (
+
+ {sign}
+ {num.toFixed(2)}
+
+ );
+ },
+ },
+ {
+ title: '余额',
+ dataIndex: 'balance',
+ key: 'balance',
+ width: 110,
+ align: 'center' as const,
+ customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
+ },
+ {
+ title: '可提现金额',
+ dataIndex: 'withdrawable',
+ key: 'withdrawable',
+ width: 130,
+ align: 'center' as const,
+ customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
+ },
+ {
+ title: '冻结金额',
+ dataIndex: 'frozen',
+ key: 'frozen',
+ 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),
+ },
+ {
+ title: '冻结时间',
+ dataIndex: 'frozenTime',
+ key: 'frozenTime',
+ width: 130,
+ align: 'center' as const,
+ },
+ {
+ title: '解冻时间',
+ dataIndex: 'unfreezeTime',
+ key: 'unfreezeTime',
+ width: 130,
+ align: 'center' as const,
+ },
+ {
+ title: '关联单号',
+ dataIndex: 'relatedNo',
+ key: 'relatedNo',
+ width: 130,
+ align: 'center' as const,
+ },
+ {
+ title: '时间',
+ dataIndex: 'time',
+ key: 'time',
+ width: 130,
+ align: 'center' as const,
+ },
+ ];
+
+ return () => (
+
+
+ {/* ===== 弹窗内筛选区 ===== */}
+
+
+
+
+ {/* ===== 表格区 ===== */}
+
+
+ {/* ===== 顶部统计卡 ===== */}
+
+ {statCards.map((item) => (
+
+
+
+
{item.label}
+
+ ¥
+ {item.value.toLocaleString('zh-CN', {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ })}
+
+
+
+ ))}
+
+
+ {/* ===== 筛选区 ===== */}
+
+
+
+
+ {/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
+
+ {/* ===== 表格区 ===== */}
+
+
+
+ {{
+ bodyCell: (args: any) =>
+ renderBodyCell({
+ ...args,
+ onViewDetail: handleViewDetail,
+ }),
+ }}
+
+
+
+ {/* 独立分页，右下方 */}
+
+
+
+ {/* ===== 交易明细弹窗 ===== */}
+
+
+ {label}
+ {value || '-'}
+
+ );
+
+ return () => {
+ const record = props.record || {};
+ const bank = record.bank || {};
+ const pay = record.pay || {};
+ const isPending = record.auditStatus === '待审核';
+
+ return (
+
+ {/* 自定义标题栏 */}
+
+
+ {/* ===== 基本信息 ===== */}
+
+
基本信息
+
+ {renderItem('申请人昵称：', record.nickName)}
+ {renderItem('申请人手机号：', record.phone)}
+ {renderItem('真实姓名：', record.realName)}
+ {renderItem('申请时间：', record.applyTime)}
+ {renderItem('打款类型：', record.withdrawType)}
+
+ {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('银行卡类型：', bank.cardType)}
+ {renderItem('持卡人：', bank.holder)}
+ {renderItem('银行卡号：', bank.cardNo)}
+ {renderItem('开户行：', bank.bankName)}
+ {renderItem('开户支行：', bank.branchName)}
+
+
+
支付信息
+
+ {renderItem('到账支付时间：', pay.transferTime || '-')}
+ {renderItem('商户订单号：', pay.merchantNo)}
+
+
+ {isPending ? (
+ <>
+
审核操作
+
+ 审核状态
+ (auditForm.pass = val)}
+ >
+ 通过
+ 未通过
+
+
+
+
+ 审核内容
+
+
+
+
+
+
+
+ ) : (
+ <>
+
审核信息
+
+ {renderItem('审核时间：', record.auditTime)}
+ {renderItem('审核人：', record.auditor)}
+
+ 审核图片：
+ {record.auditImages && record.auditImages.length ? (
+
+ {record.auditImages.map((src: string, idx: number) => (
+
+ ))}
+
+ ) : (
+ 暂无
+ )}
+
+
+
+ )}
+
-
提现申请 - 开发中
+ {/* ===== 筛选区 ===== */}
+
+
+
+
+ {/* ===== 表格区 ===== */}
+
+
+
+ {{
+ bodyCell: (args: any) =>
+ renderBodyCell({
+ ...args,
+ onAudit: handleAudit,
+ onView: handleView,
+ }),
+ }}
+
+
+
+ {/* 独立分页，右下方 */}
+
+
+
+ {/* ===== 审核弹窗 ===== */}
+