kami_frontend/src/views/card-walmart-c-trip/account/components/detail.vue

<template>
  <a-drawer
    :visible="drawVisible"
    width="70%"
    :footer="false"
    unmountOnClose
    @open="openDrawer"
    @cancel="closeDrawer"
  >
    <template #title>账户流水</template>
    <a-table
      row-key="id"
      :loading="loading"
      :pagination="{
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total,
        pageSizeOptions: [10, 20, 50, 100],
        showPageSize: true
      }"
      :columns="columns"
      :data="renderData"
      :bordered="false"
      size="small"
      column-resizable:bordered="{cell:true}"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    />
  </a-drawer>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';

import { computed, onMounted, reactive, ref } from 'vue';
import { TableColumnData } from '@arco-design/web-vue';
import {
  ApiCardInfoCTripAccountGetWalletListGetPageSizeEnum,
  KamiInternalModelEntityV1CardRedeemAccountHistory
} from '@/api/generated';
import { apiClient } from '@/api';

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    slotName: 'index',
    render: ({ rowIndex }) => {
      return rowIndex + 1 + (pagination.current - 1) * pagination.pageSize;
    }
  },
  {
    title: '订单号',
    dataIndex: 'orderNo'
  },
  {
    title: '金额',
    dataIndex: 'amount',
    render: ({ record }) => {
      switch (record.operationStatus) {
        case 'return':
          return `-${record.amount}`;
        case 'deduct':
          return `+${record.amount}`;
        case 'initialize':
          return `+${record.amount}`;
        default:
          return '未知';
      }
    }
  },
  {
    title: '操作状态',
    dataIndex: 'operationStatus',
    render: ({ record }) => {
      switch (record.operationStatus) {
        case 'return':
          return '退款';
        case 'deduct':
          return '加款';
        case 'initialize':
          return '初始化';
        default:
          return '未知';
      }
    }
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  }
];
const { loading, setLoading } = useLoading(true);
const renderData = ref<KamiInternalModelEntityV1CardRedeemAccountHistory[]>([]);

const props = defineProps<{
  visible: boolean;
  accountId: string;
}>();
const state = reactive({
  visible: false
});
const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

onMounted(() => {
  state.visible = props.visible;
});

const drawVisible = computed(() => props.visible);

const fetchData = async (
  params: Pagination = {
    current: 1,
    pageSize: 50
  }
) => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await apiClient.apiCardInfoCTripAccountGetWalletListGet(
      params.current,
      params.pageSize as ApiCardInfoCTripAccountGetWalletListGetPageSizeEnum,
      props.accountId
    );
    renderData.value = list;
    pagination.current = params.current;
    pagination.pageSize = params.pageSize;
    pagination.total = total;
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false);
  }
};
const onPageChange = (current: number) => {
  fetchData({ ...pagination, current });
};
const onPageSizeChange = (pageSize: number) => {
  fetchData({ ...pagination, pageSize });
};
const closeDrawer = () => {
  emits('update:visible', false);
};
const openDrawer = () => {
  fetchData();
};
</script>