fix:账单服务界面

src/locales/langs/en-us.ts

@@ -7,11 +7,15 @@ const viewEn: any = {
   "view.billing_histories": "Historical",
   "view.billing_Rechargehistory":"Recharge history",
   "view.billing_Internetdetails":"Internet details",
+  "view.billing_billservice":"Bill service",
   "view.set-meal": "Package",
   "view.userInfo":"User Information",
   "view.userInfo_profile":"Change Information",
   "view.userInfo_resetpwd":"Reset Password",
   "view.userInfo_device":"Device management",
+  "view.userInfo_access":"Currently connected device",
+  "view.userInfo_records":"History device",
+  "view.cdrlrecords":"CDR records",
 };
 
 const local: any = {
@@ -542,6 +546,7 @@ const local: any = {
       Unpaid:'Unpaid',
     },
     Internetdetails:{
+      title:"Internet Details",
       month:"month",
       year:"year",
       starttime:"Start Time",
@@ -580,7 +585,7 @@ const local: any = {
       devicename:"Device Name",
       mac:"Mac",
       speed:"Current Rate",
-      currentdevice:"The device is currently connected",
+      currentdevice:"Currently connected",
       refresh:"Refresh",
     },
     usercard:{
@@ -588,6 +593,9 @@ const local: any = {
       resetpwd:"Reset password",
       KYC:"KYC Certification",
       deviceconsole:"Device management",
+      access:"Currently connected device",
+      records:"History connected",
+      cdrlrecords: "CDR records",
     },
     device:{
       title: "Device management",

src/locales/langs/zh-cn.ts

@@ -4,6 +4,7 @@ const viewZh: any = {
   "view.endpoint_records": "历史设备",
   "view.endpoint_cdrlrecords":"cdr记录",
   "view.billing": "账单",
+  "view.billing_billservice":"账单服务",
   "view.billing_histories": "历史查询",
   "view.billing_Rechargehistory":"充值记录",
   "view.billing_Internetdetails":"上网详单",
@@ -12,6 +13,9 @@ const viewZh: any = {
   "view.userInfo_profile":"修改信息",
   "view.userInfo_resetpwd":"修改密码",
   "view.userInfo_device":"设备管理",
+  "view.userInfo_accsee":"当前设备",
+  "view.userInfo_records":"历史设备",
+  "view.userInfo_cdrlrecords":"cdr记录",
 };
 
 const local:any = {
@@ -542,6 +546,7 @@ const local:any = {
       Unpaid:'未支付',
     },
     Internetdetails:{
+      title:"上网详单",
       month:"月",
       year:"年",
       starttime:"起始时间",
@@ -588,6 +593,9 @@ const local:any = {
       resetpwd:"修改密码",
       KYC:"KYC认证",
       deviceconsole:"设备管理",
+      access:"当前设备",
+      records:"历史连接",
+      cdrlrecords: "CDR记录",
     },
     device:{
       title: "设备管理",

src/service/api/auth.ts

@@ -121,4 +121,18 @@ export function fetchCDRHistory(params: Api.CDR.CDRQueryParams) {
     params
   });
 }
-
+/** Get package list */
+export function fetchPackageList() {
+  return request<Api.Package.PackageListResponse>({
+    url: '/u/package/list',
+    method: 'get'
+  });
+}
+/** Submit package order */
+export function submitPackageOrder(packageId: string) {
+  return request({
+    url: '/u/order',
+    method: 'post',
+    data: { packageId }
+  });
+}

src/typings/api.d.ts

@@ -585,4 +585,19 @@ declare namespace Api {
       pageSize: number;
     }
   }
+  namespace Package {
+    interface PackageItem {
+      id: string;
+      amount: number;
+      price: number;
+      description?: string;
+    }
+
+    interface PackageListResponse {
+      code: number;
+      msg: string;
+      data: PackageItem[];
+      total?: number;
+    }
+  }
 }

src/typings/auto-imports.d.ts

@@ -102,6 +102,7 @@ declare global {
   const fetchHistoricalDevices: typeof import('../service/api/auth')['fetchHistoricalDevices']
   const fetchIsRouteExist: typeof import('../service/api/route')['fetchIsRouteExist']
   const fetchLogin: typeof import('../service/api/auth')['fetchLogin']
+  const fetchPackageList: typeof import('../service/api/auth')['fetchPackageList']
   const fetchRefreshToken: typeof import('../service/api/auth')['fetchRefreshToken']
   const fetchRegister: typeof import('../service/api/auth')['fetchRegister']
   const filterAuthRoutesByRoles: typeof import('../store/modules/route/shared')['filterAuthRoutesByRoles']
@@ -200,6 +201,7 @@ declare global {
   const shallowRef: typeof import('vue')['shallowRef']
   const sortRoutesByOrder: typeof import('../store/modules/route/shared')['sortRoutesByOrder']
   const storeToRefs: typeof import('pinia')['storeToRefs']
+  const submitPackageOrder: typeof import('../service/api/auth')['submitPackageOrder']
   const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']

src/views/billing/billservice/index.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useI18n } from "vue-i18n";
+import {
+  RightOutlined,
+  DollarOutlined,
+  CreditCardOutlined,
+  ContainerOutlined
+
+} from '@ant-design/icons-vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const menuItems = [
+  {
+    icon: CreditCardOutlined,
+    title: t('page.histories.Historicalbilling'),
+    path: '/billing/histories'
+  },
+  {
+    icon: DollarOutlined,
+    title: t('page.Rechargehistory.recharge'),
+    path: '/billing/Rechargehistory'
+  },
+  {
+    icon: ContainerOutlined,
+    title: t('page.Internetdetails.title'),
+    path: '/billing/internetdetails'
+  },
+];
+
+const handleMenuClick = (path: string) => {
+  router.push(path);
+};
+</script>
+
+<template>
+  <div class="billing-service">
+    <div class="billing-service-content">
+      <!-- 菜单列表 -->
+      <div class="menu-list">
+        <div
+          v-for="item in menuItems"
+          :key="item.title"
+          class="menu-item"
+          @click="handleMenuClick(item.path)"
+        >
+          <div class="menu-content">
+            <div class="icon-wrapper">
+              <component :is="item.icon" />
+            </div>
+            <span>{{ item.title }}</span>
+          </div>
+          <RightOutlined />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.billing-service {
+  width: 100%;
+  min-height: 100vh;
+  padding: 16px;
+  background-color: #f5f5f7;
+}
+
+.billing-service-content {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.menu-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.menu-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.menu-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: #f0f5ff;
+  color: #1890ff;
+}
+
+/* 响应式布局调整 */
+@media screen and (max-width: 768px) {
+  .menu-list {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .menu-item {
+    padding: 16px;
+  }
+}
+</style>