feat:充值记录界面

src/views/billing/Rechargehistory/index.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, h } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { Tag as ATag, Table as ATable } from 'ant-design-vue'
+import {useI18n} from "vue-i18n";
+
+const  {t}  = useI18n();
+
+interface RechargeRecord {
+  id: number
+  date: string
+  amount: number
+  paymentMethod: string
+}
+
+// 模拟充值记录数据
+const rechargeData = ref<RechargeRecord[]>([
+  {
+    id: 1,
+    date: '2024-03-15',
+    amount: 500,
+    paymentMethod: '支付宝'
+  },
+  {
+    id: 2,
+    date: '2024-03-10',
+    amount: 200,
+    paymentMethod: '微信支付'
+  },
+  {
+    id: 3,
+    date: '2024-03-05',
+    amount: 1000,
+    paymentMethod: '银行卡'
+  },
+  {
+    id: 4,
+    date: '2024-02-28',
+    amount: 300,
+    paymentMethod: '支付宝'
+  },
+  {
+    id: 5,
+    date: '2024-02-20',
+    amount: 600,
+    paymentMethod: '微信支付'
+  }
+])
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.Rechargehistory.topupdate'),
+    dataIndex: 'date',
+    key: 'date'
+  },
+  {
+    title: t('page.Rechargehistory.amount'),
+    dataIndex: 'amount',
+    key: 'amount',
+    customRender: ({ text }: { text: number }) => `¥${text}`
+  },
+  {
+    title: t('page.Rechargehistory.Payment'),
+    dataIndex: 'paymentMethod',
+    key: 'paymentMethod'
+  }
+]
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="text-lg font-bold mb-4">{{t('page.Rechargehistory.recharge')}}</div>
+    <ATable
+      :columns="columns"
+      :data-source="rechargeData"
+      :row-key="(record: RechargeRecord) => record.id"
+      :pagination="{
+        pageSize: 5,
+        total: rechargeData.length,
+        showTotal: (total: number) => `共 ${total} 条`,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions: ['5', '10', '20', '50']
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.p-4 {
+  padding: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-bold {
+  font-weight: bold;
+}
+</style>