financial-admin/src/views/user/index.vue

<script lang="ts" setup>
import { h, useTemplateRef } from 'vue';
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';
import Withdraw from './components/withdraw.vue';
import Team from './components/team.vue';
import Kyc from './components/kyc.vue';
import Ledger from './components/ledger.vue';

const dialog = useDialog();

const tableInst = useTemplateRef<TableInst>('tableInst');

const fetchData: TableFetchData = ({ pagination, filter }) => {
  return safeClient(() =>
    client.api.admin.users.get({
      query: {
        ...pagination,
        ...filter
      }
    })
  );
};

const columns: TableBaseColumns = [
  {
    key: 'userProfile.uid',
    title: 'UID',
    width: 120
  },
  {
    key: 'name',
    title: '姓名'
  },
  {
    key: 'username',
    title: '手机号'
  },
  {
    key: 'userProfile.referralCode',
    title: '推荐码'
  },
  {
    key: 'createdAt',
    title: '创建时间',
    render: (row: any) => {
      return dayjs(row.createdAt).format('YYYY-MM-DD HH:mm');
    }
  },
  {
    key: 'operations',
    title: '操作',
    width: 350,
    fixed: 'right',
    operations: (row: any) => [
      {
        contentText: '钱包',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '用户钱包',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Wallet, { userId: row.id })
          });
        }
      },
      {
        contentText: '收货地址',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '收货地址',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Address, { userId: row.id })
          });
        }
      },
      {
        contentText: '收款方式',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '收款方式',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Payment, { userId: row.id })
          });
        }
      },
      {
        contentText: '提现订单',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '提现订单',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Withdraw, { userId: row.id })
          });
        }
      },
      {
        contentText: '重置交易密码',
        size: 'small',
        onClick: () => {
          dialog.warning({
            title: '重置交易密码',
            content: '确认重置该用户的交易密码为初始密码123456吗？',
            positiveText: '确认重置',
            negativeText: '取消',
            onPositiveClick: async () => {
              const { data } = await safeClient(() =>
                client.api.admin.user_security({ userId: row.id })['transaction-password'].reset.post()
              );

              dialog.success({
                title: '操作成功',
                content: `该用户的交易密码已重置为初始密码 ${data.value?.password}，请妥善告知用户。`
              });
            }
          });
        }
      },
      {
        contentText: '查看团队',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '查看团队',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Team, { code: row.userProfile.referralCode })
          });
        }
      },
      {
        contentText: '实名认证',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '实名认证',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Kyc, { userId: row.id })
          });
        }
      },
      {
        contentText: '账本',
        size: 'small',
        onClick: () => {
          dialog.create({
            title: '账本',
            showIcon: false,
            style: { width: '1000px' },
            content: () => h(Ledger, { userId: row.id })
          });
        }
      }
    ]
  }
];

const filterColumns: TableFilterColumns = [
  {
    key: 'userId',
    title: '用户',
    component: UserSelect
  },
  {
    key: 'username',
    title: '手机号'
  },
  {
    key: 'name',
    title: '姓名'
  }
];
</script>

<template>
  <TableBase
    ref="tableInst"
    :fetch-data="fetchData"
    :columns="columns"
    :filter-columns="filterColumns"
    :scroll-x="800"
    :header-operations="{
      add: false,
      refresh: true,
      columns: true
    }"
  />
</template>

<style lang="css" scoped></style>