fix:历史账单

src/views/billing/histories/index.vue

@@ -1,7 +1,199 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, h } from 'vue'
+import { useI18n } from 'vue-i18n';
+import type { TableColumnsType } from 'ant-design-vue'
+import { Tag as ATag, Table as ATable } from 'ant-design-vue'
+
+const { t } = useI18n();
+interface BillDetail {
+  deviceName: string
+  usage: number
+  unit: string
+}
+
+interface BillRecord {
+  id: number
+  date: string
+  amount: number
+  status: 'paid' | 'unpaid'
+  details: BillDetail[]
+}
+
+// 模拟数据
+const billData = ref<BillRecord[]>([
+  {
+    id: 1,
+    date: '2024-03-01',
+    amount: 299,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device A', usage: 50, unit: 'GB' },
+      { deviceName: 'Device B', usage: 30, unit: 'GB' }
+    ]
+  },
+  {
+    id: 2,
+    date: '2024-02-01',
+    amount: 199,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device A', usage: 30, unit: 'GB' },
+      { deviceName: 'Device C', usage: 20, unit: 'GB' }
+    ]
+  },
+  {
+    id: 3,
+    date: '2024-01-01',
+    amount: 399,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device B', usage: 80, unit: 'GB' },
+      { deviceName: 'Device D', usage: 40, unit: 'GB' }
+    ]
+  },
+  {
+    id: 4,
+    date: '2023-12-01',
+    amount: 159,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device A', usage: 25, unit: 'GB' },
+      { deviceName: 'Device E', usage: 15, unit: 'GB' }
+    ]
+  },
+  {
+    id: 5,
+    date: '2023-11-01',
+    amount: 499,
+    status: 'unpaid',
+    details: [
+      { deviceName: 'Device C', usage: 100, unit: 'GB' },
+      { deviceName: 'Device D', usage: 60, unit: 'GB' },
+      { deviceName: 'Device E', usage: 40, unit: 'GB' }
+    ]
+  },
+  {
+    id: 6,
+    date: '2023-10-01',
+    amount: 259,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device B', usage: 45, unit: 'GB' },
+      { deviceName: 'Device D', usage: 35, unit: 'GB' }
+    ]
+  },
+  {
+    id: 7,
+    date: '2023-09-01',
+    amount: 359,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device A', usage: 60, unit: 'GB' },
+      { deviceName: 'Device C', usage: 40, unit: 'GB' }
+    ]
+  },
+  {
+    id: 8,
+    date: '2023-08-01',
+    amount: 189,
+    status: 'unpaid',
+    details: [
+      { deviceName: 'Device B', usage: 25, unit: 'GB' },
+      { deviceName: 'Device E', usage: 20, unit: 'GB' }
+    ]
+  },
+  {
+    id: 9,
+    date: '2023-07-01',
+    amount: 299,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device A', usage: 45, unit: 'GB' },
+      { deviceName: 'Device D', usage: 35, unit: 'GB' }
+    ]
+  },
+  {
+    id: 10,
+    date: '2023-06-01',
+    amount: 459,
+    status: 'paid',
+    details: [
+      { deviceName: 'Device C', usage: 70, unit: 'GB' },
+      { deviceName: 'Device E', usage: 50, unit: 'GB' },
+      { deviceName: 'Device B', usage: 30, unit: 'GB' }
+    ]
+  }
+])
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.histories.billdate'),
+    dataIndex: 'date',
+    key: 'date'
+  },
+  {
+    title: t('page.histories.amount'),
+    dataIndex: 'amount',
+    key: 'amount',
+    customRender: ({ text }: { text: number }) => `¥${text}`
+  },
+  {
+    title: t('page.histories.status'),
+    dataIndex: 'status',
+    key: 'status',
+    customRender: ({ text }: { text: 'paid' | 'unpaid' }) => {
+      return h(ATag, {
+        color: text === 'paid' ? 'success' : 'warning'
+      }, {
+        default: () => text === 'paid' ? t('page.histories.Paid') : t('page.histories.Unpaid')
+      })
+    }
+  }
+]
+</script>
 
 <template>
-  <div>历史账单</div>
+  <div class="p-4">
+    <div class="text-lg font-bold mb-4">{{ t('page.histories.Historicalbilling') }}</div>
+    <ATable
+      :columns="columns"
+      :data-source="billData"
+      :row-key="(record: BillRecord) => record.id"
+      :expand-column-width="60"
+      :pagination="{
+        pageSize: 5,
+        total: billData.length,
+        showTotal: (total: number) => `共 ${total} 条`,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions: ['5', '10', '20', '50']
+      }"
+    >
+      <template #expandedRowRender="{ record }">
+        <div class="pl-4">
+          <div v-for="(detail, index) in record.details" :key="index">
+            {{ t('page.histories.device') }}: {{ detail.deviceName }} - {{ t('page.histories.Usetraffic') }}: {{ detail.usage }}{{ detail.unit }}
+          </div>
+        </div>
+      </template>
+    </ATable>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.p-4 {
+  padding: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-bold {
+  font-weight: bold;
+}
+.pl-4 {
+  padding-left: 1rem;
+}
+</style>