feat: 添加用户选择组件,整合到多个页面的过滤功能,优化用户体验
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { h, useTemplateRef } from 'vue';
|
||||
import { NImage } from 'naive-ui';
|
||||
import { NImage, NSelect } from 'naive-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import { client, safeClient } from '@/service/api';
|
||||
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||
import UserSelect from '@/components/common/user-select.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'KycPage'
|
||||
@@ -41,14 +42,14 @@ const columns: TableBaseColumns = [
|
||||
key: 'fileId1',
|
||||
title: '证件照片正面',
|
||||
render: (row: any) => {
|
||||
return row.fileId1 ? h(NImage, { src: row.fileId1, width: 100 }) : '无';
|
||||
return row.fileId1 ? h(NImage, { src: row.fileId1, class: 'h-[60px]' }) : '无';
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'fileId2',
|
||||
title: '证件照片背面',
|
||||
render: (row: any) => {
|
||||
return row.fileId2 ? h(NImage, { src: row.fileId2, width: 100 }) : '无';
|
||||
return row.fileId2 ? h(NImage, { src: row.fileId2, class: 'h-[60px]' }) : '无';
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -120,6 +121,28 @@ const columns: TableBaseColumns = [
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const filterColumns: TableFilterColumns = [
|
||||
{
|
||||
key: 'userId',
|
||||
title: '用户',
|
||||
component: UserSelect
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: '审核状态',
|
||||
component: NSelect,
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{ label: '未实名', value: 'unverified' },
|
||||
{ label: '审核中', value: 'pending' },
|
||||
{ label: '已通过', value: 'approved' },
|
||||
{ label: '已拒绝', value: 'rejected' }
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -127,6 +150,7 @@ const columns: TableBaseColumns = [
|
||||
ref="tableInst"
|
||||
:fetch-data="fetchData"
|
||||
:columns="columns"
|
||||
:filter-columns="filterColumns"
|
||||
:scroll-x="1200"
|
||||
:header-operations="{
|
||||
add: false,
|
||||
|
||||
@@ -13,19 +13,39 @@ const props = defineProps<{
|
||||
|
||||
const tableInst = useTemplateRef<TableInst>('tableInst');
|
||||
const fetchData: TableFetchData = ({ pagination, filter }) => {
|
||||
return safeClient(() => client.api.admin.wallet.balances.get({ query: { userId: props.userId } }));
|
||||
return safeClient(() => client.api.admin.wallet.wallets.get({ query: { userId: props.userId } }));
|
||||
};
|
||||
|
||||
const columns: TableBaseColumns = [
|
||||
{
|
||||
key: 'id',
|
||||
title: 'ID'
|
||||
key: 'walletType.name',
|
||||
title: '钱包类型'
|
||||
},
|
||||
{
|
||||
key: 'frozen',
|
||||
title: '冻结金额',
|
||||
render: (row: any) => {
|
||||
return Number(row.frozen);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'available',
|
||||
title: '可用金额',
|
||||
render: (row: any) => {
|
||||
return Number(row.available);
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableBase ref="tableInst" :fetch-data="fetchData" :columns="columns" />
|
||||
<TableBase
|
||||
ref="tableInst"
|
||||
:fetch-data="fetchData"
|
||||
:columns="columns"
|
||||
:scroll-x="800"
|
||||
:show-header-operation="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped></style>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useDialog } from 'naive-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import { client, safeClient } from '@/service/api';
|
||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||
import UserSelect from '@/components/common/user-select.vue';
|
||||
import Wallet from './components/wallet.vue';
|
||||
import Address from './components/address.vue';
|
||||
import Payment from './components/payment.vue';
|
||||
@@ -157,8 +158,9 @@ const columns: TableBaseColumns = [
|
||||
|
||||
const filterColumns: TableFilterColumns = [
|
||||
{
|
||||
key: 'uid',
|
||||
title: 'UID'
|
||||
key: 'userId',
|
||||
title: '用户',
|
||||
component: UserSelect
|
||||
},
|
||||
{
|
||||
key: 'username',
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { clear } from 'node:console';
|
||||
import { useTemplateRef } from 'vue';
|
||||
import { NSelect } from 'naive-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import { client, safeClient } from '@/service/api';
|
||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||
import UserSelect from '@/components/common/user-select.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'WithdrawPage'
|
||||
@@ -143,8 +145,9 @@ const columns: TableBaseColumns = [
|
||||
|
||||
const filterColumns: TableFilterColumns = [
|
||||
{
|
||||
key: 'uid',
|
||||
title: '用户UID'
|
||||
key: 'userId',
|
||||
title: '用户',
|
||||
component: UserSelect
|
||||
},
|
||||
{
|
||||
key: 'orderNo',
|
||||
@@ -155,6 +158,7 @@ const filterColumns: TableFilterColumns = [
|
||||
title: '状态',
|
||||
component: NSelect,
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{ label: '审核中', value: 'pending_review' },
|
||||
{ label: '待打款', value: 'pending_payout' },
|
||||
|
||||
Reference in New Issue
Block a user