fix:用户账单管理界面

2024-12-18 17:30:30 +08:00
parent c581ad8718
commit 609edf74bc
1 changed files with 141 additions and 0 deletions
--- a/src/views/user-center/bill/index.vue
+++ b/src/views/user-center/bill/index.vue
@@ -0,0 +1,141 @@
+<script setup lang="tsx">
+import { useTable } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { computed, shallowRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+interface BillInfo {
+  billId: string;
+  username: string;
+  amount: number;
+  paymentMethod: string;
+}
+
+// 模拟API调用函数
+const doGetBillInfo = async (params: any) => {
+  // TODO: 替换为实际的API调用
+  return {
+    data: {
+      rows: [
+        {
+          billId: 'BILL001',
+          username: '张三',
+          amount: 199.99,
+          paymentMethod: 'alipay',
+        },
+        {
+          billId: 'BILL002',
+          username: '李四',
+          amount: 299.50,
+          paymentMethod: 'wechat',
+        },
+      ],
+      total: 2
+    }
+  };
+};
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 800
+  };
+});
+
+const {
+  columns,
+  columnChecks,
+  data,
+  loading,
+  getData,
+  mobilePagination,
+} = useTable({
+  apiFn: doGetBillInfo,
+  immediate: true,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+  },
+  rowKey: 'billId',
+  columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<BillInfo>>[] => [
+    {
+      key: 'billId',
+      dataIndex: 'billId',
+      title: '账单ID',
+      align: 'center',
+    },
+    {
+      key: 'username',
+      dataIndex: 'username',
+      title: '用户名',
+      align: 'center',
+    },
+    {
+      key: 'amount',
+      dataIndex: 'amount',
+      title: '金额',
+      align: 'center',
+      customRender: ({ record }: { record: BillInfo }) => {
+        return `¥${record.amount.toFixed(2)}`;
+      },
+    },
+    {
+      key: 'paymentMethod',
+      dataIndex: 'paymentMethod',
+      title: '支付方式',
+      align: 'center',
+      customRender: ({ record }: { record: BillInfo }) => {
+        const methodMap: Record<string, string> = {
+          'alipay': '支付宝',
+          'wechat': '微信支付',
+          'card': '银行卡',
+        };
+        return methodMap[record.paymentMethod] || record.paymentMethod;
+      },
+    },
+  ]
+});
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <ACard
+        title="账单信息"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :loading="loading"
+            :show-delete="false"
+            :show-add="false"
+            @refresh="getData"
+          />
+        </template>
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="billId"
+          size="small"
+          :pagination="mobilePagination"
+          :scroll="scrollConfig"
+          class="h-full"
+        />
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped>
+.card-wrapper {
+  margin-top: 16px;
+}
+</style>