From 9af2d1d6764c282b0cb2144ef852ce25a39fd145 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 11 Dec 2024 09:38:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=85=E5=80=BC=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/billing/Rechargehistory/index.vue | 102 ++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 src/views/billing/Rechargehistory/index.vue

diff --git a/src/views/billing/Rechargehistory/index.vue b/src/views/billing/Rechargehistory/index.vue
new file mode 100644
index 0000000..41b98c9
--- /dev/null
+++ b/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>