cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/events/banner/index.tsx
-1
View File
@@ -243,7 +243,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/list/index.tsx
-1
View File
@@ -340,7 +340,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/logs/index.tsx
-1
View File
@@ -200,7 +200,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/orders/index.tsx
-1
View File
@@ -273,7 +273,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/users/index.tsx
-1
View File
@@ -145,7 +145,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/finance/payments/index.tsx
+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>
src/pages/finance/payments/model/usePaymentsModel.ts
+87 -126
View File
@@ -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) => {
src/pages/finance/wallet/components/WalletDetailModal.tsx
+126 -131
View File
@@ -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>
);
src/pages/finance/wallet/index.tsx
+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}
src/pages/finance/wallet/model/useWalletModel.ts
+99 -244
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,
});
// 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 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',
});
}
}
} 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,
};
src/pages/finance/withdraw/components/WithdrawAuditModal.module.less → src/pages/finance/withdraw/components/WithdrawDetailModal.module.less
+10
View File
@@ -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);
}
src/pages/finance/withdraw/components/WithdrawAuditModal.tsx → src/pages/finance/withdraw/components/WithdrawDetailModal.tsx
+115 -86
View File
@@ -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>
);
},
});
src/pages/finance/withdraw/index.tsx
+38 -20
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
visible={auditVisible.value}
record={currentRecord.value}
onClose={handleCloseAudit}
/>
{auditVisible.value && (
<WithdrawDetailModal
visible={auditVisible.value}
record={currentRecord.value}
onClose={handleCloseAudit}
onAudited={handleSearch}
/>
)}
</div>
);
},
src/pages/finance/withdraw/model/useWithdrawModel.ts
+89 -229
View File
@@ -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,
};
}
src/pages/system/logs/index.tsx
-1
View File
@@ -108,7 +108,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/system/roles/components/UserListModal.tsx
-1
View File
@@ -167,7 +167,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
)}
src/pages/system/roles/index.tsx
-1
View File
@@ -179,7 +179,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/system/users/index.tsx
-1
View File
@@ -258,7 +258,6 @@ export default defineComponent({
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>