diff --git a/src/views/billing/packagehistories/index.vue b/src/views/billing/packagehistories/index.vue
new file mode 100644
index 0000000..95037bb
--- /dev/null
+++ b/src/views/billing/packagehistories/index.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } 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";
+import { useRouter } from 'vue-router';
+import { fetchPackageHistory } from '@/service/api/auth';
+import { useWindowSize } from '@vueuse/core';
+
+const router = useRouter();
+const handleBack = () => {
+  router.push('/billing/billservice');
+};
+
+const { t } = useI18n();
+
+const packageData = ref<Api.Package.PackageHistoryRecord[]>([]);
+const total = ref(0);
+
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < 768);
+
+const formatDateTime = (dateTimeString: string) => {
+  if (!dateTimeString) return '';
+  const date = new Date(dateTimeString);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+};
+
+const getPackageData = async () => {
+  try {
+    const response = await fetchPackageHistory({
+      pageNum: 1,
+      pageSize: 10
+    });
+    if (response?.data?.rows) {
+      packageData.value = response.data.rows;
+      total.value = response.data.total;
+    }
+  } catch (error) {
+    console.error('Failed to fetch package history:', error);
+  }
+};
+
+onMounted(() => {
+  getPackageData();
+});
+
+const columns = computed<TableColumnsType>(() => [
+  {
+    title: t('page.packagehistories.orderdate'),
+    dataIndex: 'createTime',
+    key: 'createTime',
+    responsive: ['md'],
+    customRender: ({ text }) => text ? formatDateTime(text) : ''
+  },
+  {
+    title: t('page.packagehistories.amount'),
+    dataIndex: 'orderAmount',
+    key: 'orderAmount',
+    customRender: ({ text }: { text: string }) => {
+      const formattedAmount = Number(text).toFixed(2);
+      return `¥${formattedAmount}`;
+    }
+  },
+  {
+    title: t('page.packagehistories.type'),
+    dataIndex: 'type',
+    key: 'type',
+    customRender: ({ text }: { text: number }) => {
+      return h(ATag, {
+        color: 'green'
+      }, {
+        default: () => t('page.packagehistories.packageType')
+      })
+    }
+  },
+  {
+    title: t('page.packagehistories.status'),
+    dataIndex: 'status',
+    key: 'status',
+    customRender: ({ text }: { text: number }) => {
+      return h(ATag, {
+        color: text === 1 ? 'success' : 'warning'
+      }, {
+        default: () => text === 1 ? t('page.packagehistories.paid') : t('page.packagehistories.unpaid')
+      })
+    }
+  }
+]);
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="text-lg font-bold mb-4 flex justify-between items-center">
+      <span>{{ t('page.packagehistories.title') }}</span>
+      <a-button @click="handleBack">
+        {{ t('page.login.common.back') }}
+      </a-button>
+    </div>
+    <div>
+      <ATable
+        :columns="columns"
+        :data-source="packageData"
+        :row-key="(record: Api.Package.PackageHistoryRecord) => record.id"
+        :pagination="{
+          pageSize: 5,
+          total: total,
+          showTotal: (total: number) => `共 ${total} 条`,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: ['5', '10', '20', '50']
+        }"
+      >
+        <template #expandedRowRender="{ record }">
+          <div class="pl-4">
+            <div v-if="isMobile" class="mb-2">
+              <strong>{{ t('page.packagehistories.orderdate') }}:</strong>
+              {{ formatDateTime(record.createTime) }}
+            </div>
+          </div>
+        </template>
+      </ATable>
+    </div>
+  </div>
+</template>
+
+<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>