From 671498b216b9462e1b3f990d499785682d737549 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 3 Jan 2025 18:03:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A5=97=E9=A4=90=E4=B8=8E=E5=85=85?=
 =?UTF-8?q?=E5=80=BC=E7=95=8C=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/modules/global-footer/index.vue  |  15 +-
 src/locales/langs/en-us.ts                   |   8 +
 src/locales/langs/zh-cn.ts                   |   8 +
 src/router/elegant/routes.ts                 |  47 +++
 src/views/home/index.vue                     |   8 +-
 src/views/recharge/balancerecharge/index.vue | 244 +++++++++++
 src/views/recharge/package/index.vue         | 403 +++++++++++++++++++
 src/views/recharge/rechargeservice/index.vue |  93 +++++
 8 files changed, 817 insertions(+), 9 deletions(-)
 create mode 100644 src/views/recharge/balancerecharge/index.vue
 create mode 100644 src/views/recharge/package/index.vue
 create mode 100644 src/views/recharge/rechargeservice/index.vue

diff --git a/src/layouts/modules/global-footer/index.vue b/src/layouts/modules/global-footer/index.vue
index 7f5cb93..3e2357b 100644
--- a/src/layouts/modules/global-footer/index.vue
+++ b/src/layouts/modules/global-footer/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ProfileOutlined,UserOutlined,HomeOutlined} from "@ant-design/icons-vue";
+import {MenuOutlined,UserOutlined,HomeOutlined,MoneyCollectOutlined} from "@ant-design/icons-vue";
 import {useRouterPush} from "@/hooks/common";
 
 const { routerPushByKey } = useRouterPush();
@@ -16,12 +16,17 @@ defineOptions({
       </ButtonIcon>
     </div>
     <div class="flex-item">
-      <ButtonIcon>
-        <ProfileOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
+      <ButtonIcon class="text-icon-large" @click="routerPushByKey('recharge_rechargeservice')">
+        <MoneyCollectOutlined />
       </ButtonIcon>
     </div>
     <div class="flex-item">
-      <ButtonIcon  class="text-icon-large" @click="routerPushByKey('user-info/usercard')">
+      <ButtonIcon>
+        <MenuOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
+      </ButtonIcon>
+    </div>
+    <div class="flex-item">
+      <ButtonIcon class="text-icon-large" @click="routerPushByKey('user-info/usercard')">
         <UserOutlined />
       </ButtonIcon>
     </div>
@@ -36,7 +41,7 @@ defineOptions({
 }
 
 .flex-item {
-  flex-basis: 33.33%; /* 每个子元素占据三分之一的宽度 */
+  flex-basis: 25%; /* 修改为25%，使每个子元素占据四分之一的宽度 */
   display: flex;
   justify-content: center; /* 在各自的空间内居中 */
 }
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 8a918d2..b84d32f 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -1,4 +1,8 @@
 const viewEn: any = {
+  "view.recharge":"recharge",
+  "view.recharge_rechargeservice":"recharge service",
+  "view.recharge_balancerecharge":"balance recharge",
+  "view.recharge_package":"package",
   "view.endpoint": "endpoint",
   "view.endpoint_access": "current",
   "view.endpoint_records": "Historical",
@@ -613,6 +617,10 @@ const local: any = {
       updateSuccess: 'Update successful',
       updateFailed: 'Update failed'
     },
+    recharge:{
+      balanceRecharge:'Banlance Recharge',
+      packageSubscription:'Package Subscription',
+    },
   },
   form: {
     required: 'Cannot be empty',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index f9013cd..54e3eb2 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -1,4 +1,8 @@
 const viewZh: any = {
+  "view.recharge":"充值",
+  "view.recharge_rechargeservice":"充值服务",
+  "view.recharge_balancerecharge":"余额充值",
+  "view.recharge_package":"套餐",
   "view.endpoint": "终端设备",
   "view.endpoint_access": "当前设备",
   "view.endpoint_records": "历史设备",
@@ -613,6 +617,10 @@ const local:any = {
       updateSuccess: '更新成功',
       updateFailed: '更新失败'
     },
+    recharge:{
+      balanceRecharge:'余额充值',
+      packageSubscription:'套餐办理',
+    },
   },
   form: {
     required: '不能为空',
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index ade9d06..3554aa6 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -215,6 +215,53 @@ export const generatedRoutes: GeneratedRoute[] = [
 
 /**自定义静态菜单 */
 export const customRoutes: GeneratedRoute[] = [
+  {
+    name:'recharge',
+    path:'/recharge',
+    component:'layout.base',
+    meta:{
+      title:'充值',
+      i18nKey:'view.recharge',
+      icon:'icon-park-outline:all-application',
+      order:12,
+    },
+    children:[
+      {
+        name: 'recharge_rechargeservice',
+        path: '/recharge/rechargeservice',
+        component: 'view.recharge_rechargeservice',
+        meta: {
+          title: '充值服务',
+          i18nKey: 'view.recharge_rechargeservice',
+          icon: 'material-symbols:filter-list-off',
+          order: 1,
+          //hideInMenu: true
+        },
+      },
+      {
+        name: 'recharge_balancerecharge',
+        path: '/recharge/balancerecharge',
+        component: 'view.recharge_balancerecharge',
+        meta: {
+          title: '余额充值',
+          i18nKey: 'view.recharge_balancerecharge',
+          icon: 'material-symbols:filter-list-off',
+          order: 1,
+        },
+      },
+      {
+        name: 'recharge_package',
+        path: '/recharge/package',
+        component: 'view.recharge_package',
+        meta: {
+          title: '套餐办理',
+          i18nKey: 'view.recharge_package',
+          icon: 'material-symbols:filter-list-off',
+          order: 1,
+        },
+      },
+    ],
+  },
   {
     name: 'endpoint',
     path: '/endpoint',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f8bbc54..b9743b0 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import HeaderBanner from './modules/header-banner.vue';
-import CardData from './modules/card-data.vue';
-import LineChart from './modules/line-chart.vue';
+//import CardData from './modules/card-data.vue';
+//import LineChart from './modules/line-chart.vue';
 // import PieChart from './modules/pie-chart.vue';
 // import ProjectNews from './modules/project-news.vue';
 // import CreativityBanner from './modules/creativity-banner.vue';
@@ -21,8 +21,8 @@ provide('updateDashboard', updateDashboard);
 <template>
   <ASpace direction="vertical" :size="16">
     <HeaderBanner ref="headerBannerRef"/>
-    <LineChart />
-    <CardData />
+<!--    <LineChart />-->
+<!--    <CardData />-->
 <!--    <ARow :gutter="[16, 16]">-->
 <!--      <ACol :span="24" :lg="14">-->
 <!--      </ACol>-->
diff --git a/src/views/recharge/balancerecharge/index.vue b/src/views/recharge/balancerecharge/index.vue
new file mode 100644
index 0000000..d42e6ce
--- /dev/null
+++ b/src/views/recharge/balancerecharge/index.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
+import { useBillingStore } from '@/store/modules/billing/billing';
+import { useI18n } from 'vue-i18n';
+import { submitOrder } from '@/service/api/auth';
+import { message } from 'ant-design-vue';
+import type { Ref } from 'vue';
+defineOptions({
+  name: 'BalanceRecharge'
+});
+
+const { t } = useI18n();
+// 注入更新仪表盘的方法
+const updateDashboard = inject('updateDashboard') as () => Promise<void>;
+
+interface RechargeOption {
+  amount: number;
+  displayAmount: string;
+  price: number;
+}
+
+const customAmount = ref<string | number | undefined>(undefined);
+const selectedAmount = ref<number | null>(null);
+const isCustomMode = ref<boolean>(false);
+
+const rechargeOptions: Ref<RechargeOption[]> = ref([
+  { amount: 10, displayAmount: '10元', price: 10.00 },
+  { amount: 20, displayAmount: '20元', price: 20.00 },
+  { amount: 30, displayAmount: '30元', price: 30.00 },
+  { amount: 50, displayAmount: '50元', price: 50.00 },
+  { amount: 100, displayAmount: '100元', price: 100.00 },
+  { amount: 200, displayAmount: '200元', price: 200.00 },
+]);
+
+const billingStore = useBillingStore();
+
+const paymentAmount = computed(() => {
+  if (customAmount.value !== undefined && customAmount.value !== '') {
+    return Number(customAmount.value);
+  }
+  return selectedAmount.value || 0;
+});
+
+const handleOptionSelect = (amount: number) => {
+  isCustomMode.value = false;
+  selectedAmount.value = amount;
+  customAmount.value = undefined;
+};
+
+const handleCustomMode = () => {
+  isCustomMode.value = true;
+  selectedAmount.value = null;
+};
+
+const handleCustomAmount = (value: string | number | undefined) => {
+  customAmount.value = value;
+};
+
+// 添加点击外部关闭自定义输入的处理
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (isCustomMode.value &&
+    !target?.closest('.special-option') &&
+    customAmount.value === undefined) {
+    isCustomMode.value = false;
+  }
+};
+
+// 创建一个函数来处理 blur 事件
+const handleBlur = () => {
+  if (customAmount.value === undefined || customAmount.value === '') {
+    isCustomMode.value = false;
+  }
+};
+
+onMounted(async () => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+const balance = computed(() => billingStore.balance);
+
+// 修改充值处理方法，移除邮箱验证
+const handleRecharge = async () => {
+  // 验证金额
+  if (!paymentAmount.value || paymentAmount.value <= 0) {
+    message.error('请选择或输入正确的充值金额');
+    return;
+  }
+
+  try {
+    await submitOrder({
+      type: 1,
+      orderAmount: paymentAmount.value
+    });
+    message.success('充值订单提交成功！');
+
+    // 更新余额，传入充值金额
+    await billingStore.updateBalance(paymentAmount.value);
+    // 更新仪表盘数据
+    await updateDashboard();
+  } catch (error) {
+    message.error('充值失败，请重试！');
+    console.error('Failed to submit recharge order:', error);
+  }
+};
+</script>
+
+<template>
+  <div class="recharge-container p-4">
+    <!-- 充值金额选择 -->
+    <div class="amount-section mb-6">
+      <div class="text-lg font-bold mb-2">{{ t('page.carddata.Rechargeamount') }}</div>
+      <div class="grid grid-cols-3 gap-4">
+        <div
+          v-for="option in rechargeOptions"
+          :key="option.amount"
+          class="recharge-option cursor-pointer"
+          :class="{ 'selected': selectedAmount === option.amount }"
+          @click="handleOptionSelect(option.amount)"
+        >
+          <div class="text-lg font-medium">{{ option.displayAmount }}</div>
+          <div class="text-sm text-gray-500">{{ t('page.carddata.price') }} {{ option.price.toFixed(2) }}</div>
+        </div>
+
+        <!-- 自定义充选项 -->
+        <div
+          class="special-option"
+          :class="{ 'selected': isCustomMode }"
+          @click="handleCustomMode"
+        >
+          <template v-if="!isCustomMode">
+            <AInputNumber
+              v-model:value="customAmount"
+              :placeholder="t('page.carddata.Customization')"
+              :min="1"
+              :max="999999"
+              class="w-full"
+              @change="handleCustomAmount"
+              @click.stop
+              @blur="handleBlur"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 支付部分 -->
+    <div class="payment-section mt-8 bg-white p-4 rounded-lg border border-gray-100">
+      <div class="flex justify-between items-center mb-4">
+        <span class="text-gray-600">{{ t('page.carddata.Remainingbalance') }}：{{ balance }}元</span>
+        <span class="text-blue-500">{{ t('page.carddata.Theamountreceived') }}：{{ paymentAmount.toFixed(2) }}元</span>
+      </div>
+      <AButton
+        type="primary"
+        size="large"
+        block
+        :disabled="!paymentAmount || paymentAmount <= 0"
+        @click="handleRecharge"
+      >
+        ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
+      </AButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recharge-option {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s;
+  height: 76px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.recharge-option.selected,
+.special-option.selected {
+  border-color: #1890ff;
+  background-color: #e6f7ff;
+}
+
+.special-option {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 0;
+  text-align: center;
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  transition: all 0.3s;
+  height: 76px;
+}
+
+.special-option :deep(.ant-input-number) {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border: none;
+  display: flex;
+  align-items: center;
+}
+
+.special-option :deep(.ant-input-number-input-wrap) {
+  height: 100%;
+  width: 100%;
+}
+
+.special-option :deep(.ant-input-number-input) {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &::placeholder {
+    text-align: center;
+    color: #999;
+  }
+}
+
+.special-option :deep(.ant-input-number:focus),
+.special-option :deep(.ant-input-number-focused) {
+  box-shadow: none;
+  border: none;
+}
+
+.payment-section {
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 除之前的后缀样式 */
+:deep(.ant-input-suffix) {
+  display: none;
+}
+</style>
diff --git a/src/views/recharge/package/index.vue b/src/views/recharge/package/index.vue
new file mode 100644
index 0000000..68e83fb
--- /dev/null
+++ b/src/views/recharge/package/index.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref, onMounted, inject } from 'vue';
+import { fetchPackageList, submitOrder } from '@/service/api/auth';
+import { message } from 'ant-design-vue';
+
+defineOptions({
+  name: 'PackageSubscription'
+});
+const { t } = useI18n();
+
+interface PackageOption {
+  id: string;
+  packageName: string;
+  price: number;
+  clientNum: number;
+  clientNumEnable: boolean;
+  traffic: number;
+  trafficEnable: boolean;
+  trafficDisplay: string;
+  durationEnable: boolean;
+  isRecommended?: boolean;
+  promotion?: string;
+  periodNum: number;
+  periodType: number;
+  validityPeriod: string;
+}
+
+// 添加有效期类型枚举
+const PERIOD_TYPE = {
+  HOUR: 0,
+  DAY: 1,
+  MONTH: 2,
+  YEAR: 3
+} as const;
+
+// 添加有效期单位映射
+const PERIOD_UNIT = {
+  [PERIOD_TYPE.HOUR]: '小时',
+  [PERIOD_TYPE.DAY]: '天',
+  [PERIOD_TYPE.MONTH]: '月',
+  [PERIOD_TYPE.YEAR]: '年'
+} as const;
+
+// 格式化有效期显示
+const formatValidityPeriod = (num: number, type: number): string => {
+  const unit = PERIOD_UNIT[type as keyof typeof PERIOD_UNIT] || '未知';
+  return `${num}${unit}`;
+};
+
+// 流量单位转换函数
+const formatTraffic = (bytes: number): string => {
+  // 处理 0 值、undefined 或 null 的情况
+  if (!bytes || bytes === 0) {
+    return '0B';
+  }
+
+  const B_TO_KB = 1024;
+  const B_TO_MB = 1024 * 1024;
+  const B_TO_GB = 1024 * 1024 * 1024;
+  const B_TO_TB = 1024 * 1024 * 1024 * 1024;
+
+  if (bytes >= B_TO_TB) {
+    // B -> TB
+    return `${(bytes / B_TO_TB).toFixed(2)}TB`;
+  }
+  if (bytes >= B_TO_GB) {
+    // B -> GB
+    return `${(bytes / B_TO_GB).toFixed(2)}GB`;
+  }
+  if (bytes >= B_TO_MB) {
+    // B -> MB
+    return `${(bytes / B_TO_MB).toFixed(2)}MB`;
+  }
+  if (bytes >= B_TO_KB) {
+    // B -> KB
+    return `${(bytes / B_TO_KB).toFixed(2)}KB`;
+  }
+  // 小于1KB的情况，保持B单位
+  return `${bytes.toFixed(2)}B`;
+};
+
+const packageOptions = ref<PackageOption[]>([]);
+const selectedPackage = ref<PackageOption>({
+  id: '1',
+  packageName: '',
+  price: 0,
+  clientNum: 0,
+  clientNumEnable: false,
+  traffic: 0,
+  trafficEnable: false,
+  trafficDisplay: '0GB',
+  durationEnable: false,
+  isRecommended: false,
+  promotion: '',
+  periodNum: 0,
+  periodType: PERIOD_TYPE.MONTH,
+  validityPeriod: '0月'
+});
+
+const fetchPackages = async () => {
+  try {
+    const response = await fetchPackageList();
+    if (response.data && Array.isArray(response.data)) {
+      packageOptions.value = response.data.map(pkg => ({
+        id: pkg.id,
+        packageName: pkg.packageName,
+        price: parseFloat(pkg.price),
+        clientNum: Number(pkg.clientNum),
+        clientNumEnable: pkg.clientNumEnable,
+        traffic: Number(pkg.traffic),
+        trafficEnable: pkg.trafficEnable,
+        trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : '无限制',
+        durationEnable: pkg.durationEnable,
+        isRecommended: pkg.isRecommended || false,
+        promotion: pkg.promotion || '',
+        periodNum: Number(pkg.periodNum),
+        periodType: Number(pkg.periodType),
+        validityPeriod: pkg.durationEnable ? formatValidityPeriod(Number(pkg.periodNum), Number(pkg.periodType)) : '无限制'
+      }));
+
+      if (packageOptions.value.length > 0) {
+        selectedPackage.value = packageOptions.value[0];
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch packages:', error);
+  }
+};
+
+const selectPackage = (option: PackageOption) => {
+  selectedPackage.value = option;
+};
+
+// 注入更新仪表盘的方法
+const updateDashboard = inject('updateDashboard') as () => Promise<void>;
+
+// 修改套餐办理方法
+const handleSubmitOrder = async () => {
+  try {
+    await submitOrder({
+      type: 0,
+      packageId: selectedPackage.value.id
+    });
+    message.success('套餐办理成功！');
+    // 更新��表盘数据
+    await updateDashboard();
+  } catch (error) {
+    message.error('套餐办理失败，请重试！');
+    console.error('Failed to submit order:', error);
+  }
+};
+
+onMounted(async () => {
+  await fetchPackages();
+});
+</script>
+
+<template>
+  <div class="package-container">
+    <!-- 顶部价格展示 -->
+    <div class="price-header">
+      <div class="price">
+        <span class="currency">¥</span>
+        <span class="amount">{{ selectedPackage.price }}</span>
+        <span class="period">/月</span>
+      </div>
+      <div class="subtitle">{{ selectedPackage.packageName }}</div>
+    </div>
+
+    <!-- 套餐选择 -->
+    <div class="package-options">
+      <h3 class="section-title">{{ t('page.setmeal.changablelevel') }}</h3>
+      <div class="options-grid">
+        <div
+          v-for="option in packageOptions"
+          :key="option.id"
+          :class="[
+            'option-card',
+            {
+              recommended: option.isRecommended,
+              selected: selectedPackage.id === option.id
+            }
+          ]"
+          @click="selectPackage(option)"
+        >
+          <div v-if="option.isRecommended" class="recommended-tag">
+            {{ t('page.setmeal.highlyrecommended') }}
+          </div>
+          <div class="package-name">{{ option.packageName }}</div>
+          <div class="price">¥{{ option.price }}</div>
+          <div class="traffic">{{ option.trafficEnable ? option.trafficDisplay : '无限制' }}</div>
+          <div class="device-count">
+            {{ option.clientNumEnable ? `${option.clientNum}台设备` : '无限制' }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 套餐详情 -->
+    <div class="package-details">
+      <h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
+      <div class="details-list">
+        <div class="detail-item">
+          <div class="label">套餐名称</div>
+          <div class="value">{{ selectedPackage.packageName }}</div>
+        </div>
+        <div class="detail-item">
+          <div class="label">{{ t('page.setmeal.GeneralPurposeTraffic') }}</div>
+          <div class="value">
+            {{ selectedPackage.trafficEnable ? `${selectedPackage.trafficDisplay}，当月有效` : '无限制' }}
+          </div>
+        </div>
+        <div class="detail-item">
+          <div class="label">设备数量</div>
+          <div class="value">
+            {{ selectedPackage.clientNumEnable ? `最多${selectedPackage.clientNum}台设备同时在线` : '无限制' }}
+          </div>
+        </div>
+        <div class="detail-item">
+          <div class="label">有效期限</div>
+          <div class="value">
+            {{ selectedPackage.durationEnable ? selectedPackage.validityPeriod : '无限制' }}
+          </div>
+        </div>
+        <div class="bottom-bar">
+          <button
+            class="btn-primary"
+            @click="handleSubmitOrder"
+            :disabled="!selectedPackage.id"
+          >
+            {{ t('page.setmeal.Applynow') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.package-container {
+  min-height: 100vh;
+  padding: 16px 16px 80px;
+}
+
+.price-header {
+  background: #fff1f0;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.price {
+  color: #ff4d4f;
+  margin-bottom: 8px;
+}
+
+.currency {
+  font-size: 20px;
+}
+
+.amount {
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.period {
+  font-size: 16px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  color: #333;
+  position: relative;
+  padding-left: 12px;
+}
+
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  background: #1890ff;
+  border-radius: 2px;
+}
+
+.options-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.option-card {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+  position: relative;
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.option-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.option-card.selected {
+  border-color: #ff4d4f;
+  background: #fff1f0;
+}
+
+.recommended-tag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #ff4d4f;
+  color: white;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 0 0 8px 0;
+}
+
+.package-details {
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+}
+
+.detail-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  width: 80px;
+  color: #666;
+}
+
+.value {
+  flex: 1;
+  color: #333;
+}
+
+.value.highlight {
+  color: #ff4d4f;
+}
+
+.bottom-bar {
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+.btn-primary {
+  background: #ff4d4f;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 24px;
+  font-size: 16px;
+  width: 90%;
+  max-width: 400px;
+}
+
+.package-name {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.traffic {
+  font-size: 14px;
+  color: #666;
+  margin-top: 8px;
+}
+
+.device-count {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+</style>
diff --git a/src/views/recharge/rechargeservice/index.vue b/src/views/recharge/rechargeservice/index.vue
new file mode 100644
index 0000000..621f512
--- /dev/null
+++ b/src/views/recharge/rechargeservice/index.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { MenuProps } from 'ant-design-vue';
+import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue';
+import PackageSubscription from '@/views/recharge/package/index.vue';
+
+const { t } = useI18n();
+
+// 使用数组 ref 来存储选中的菜单项
+const selectedKeys = ref<(string | number)[]>(['balance']);
+
+// 菜单项配置
+const items: MenuProps['items'] = [
+  {
+    key: 'balance',
+    label: t('page.recharge.balanceRecharge'),
+    title: t('page.recharge.balanceRecharge')
+  },
+  {
+    key: 'package',
+    label: t('page.recharge.packageSubscription'),
+    title: t('page.recharge.packageSubscription')
+  }
+];
+
+// 处理菜单项点击
+const handleClick: MenuProps['onClick'] = e => {
+  selectedKeys.value = [e.key];
+};
+</script>
+
+<template>
+  <div class="recharge-container">
+    <!-- 顶部菜单 -->
+    <AMenu
+      v-model:selectedKeys="selectedKeys"
+      mode="horizontal"
+      :items="items"
+      @click="handleClick"
+      class="recharge-menu"
+    />
+
+    <!-- 内容区域 -->
+    <div class="recharge-content">
+      <Transition name="fade" mode="out-in">
+        <component :is="String(selectedKeys[0]) === 'balance' ? BalanceRecharge : PackageSubscription" />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recharge-container {
+  min-height: 100vh;
+  background-color: #f5f5f7;
+  padding: 16px;
+}
+
+.recharge-menu {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.recharge-content {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 响应式布局 */
+@media screen and (max-width: 768px) {
+  .recharge-container {
+    padding: 8px;
+  }
+
+  .recharge-content {
+    padding: 12px;
+  }
+}
+</style>