From 86071ebd7aea03e5a1de90a9de4d51c6860e2b1e Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 18 Jan 2026 04:23:02 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=85=E5=80=BC?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=85=85=E5=80=BC=E8=AE=B0=E5=BD=95=E5=92=8C?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E4=BF=A1=E6=81=AF=EF=BC=8C=E9=9B=86=E6=88=90?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=96=B9=E5=BC=8F=E5=92=8C=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts            |   5 +
 src/views/recharge/index.vue   |  13 +-
 src/views/recharge/records.vue | 354 +++++++++++++++++++++++++++++++++
 3 files changed, 371 insertions(+), 1 deletion(-)
 create mode 100644 src/views/recharge/records.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index eb6973d..d183e74 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -104,6 +104,11 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/recharge/index.vue"),
     meta: { requiresAuth: true },
   },
+  {
+    path: "/recharge/records",
+    component: () => import("@/views/recharge/records.vue"),
+    meta: { requiresAuth: true },
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/recharge/index.vue b/src/views/recharge/index.vue
index 463f9f3..2bccbd3 100644
--- a/src/views/recharge/index.vue
+++ b/src/views/recharge/index.vue
@@ -1,6 +1,6 @@
 <script lang='ts' setup>
 import { alertController, toastController } from "@ionic/vue";
-import { cardOutline, checkmarkCircleOutline, logoAlipay, logoWechat, walletOutline } from "ionicons/icons";
+import { cardOutline, checkmarkCircleOutline, documentTextOutline, logoAlipay, logoWechat, walletOutline } from "ionicons/icons";
 
 const walletStore = useWalletStore();
 const { balanceWallet } = storeToRefs(walletStore);
@@ -73,6 +73,8 @@ const paymentTypes = [
   { type: "wechat" as const, name: "微信", icon: logoWechat, color: "#07C160" },
 ];
 
+const router = useRouter();
+
 function selectQuickAmount(amount: number) {
   rechargeAmount.value = amount.toString();
 }
@@ -92,6 +94,10 @@ function selectPaymentMethod(id: number) {
   selectedPaymentId.value = id;
 }
 
+function goToRecords() {
+  router.push("/recharge/records");
+}
+
 async function showToast(message: string, color: "success" | "danger" | "warning" = "success") {
   const toast = await toastController.create({
     message,
@@ -163,6 +169,11 @@ walletStore.syncBalanceWallet();
           <back-button />
         </ion-buttons>
         <ion-title>充值</ion-title>
+        <ion-buttons slot="end">
+          <ion-button color="light" size="small" @click="goToRecords">
+            <ion-icon slot="icon-only" :icon="documentTextOutline" />
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
diff --git a/src/views/recharge/records.vue b/src/views/recharge/records.vue
new file mode 100644
index 0000000..3f05f48
--- /dev/null
+++ b/src/views/recharge/records.vue
@@ -0,0 +1,354 @@
+<script lang='ts' setup>
+import { cardOutline, listOutline, logoAlipay, logoWechat } from "ionicons/icons";
+
+interface RechargeRecord {
+  id: number;
+  amount: number;
+  paymentType: "alipay" | "unionpay" | "wechat";
+  paymentAccount: string;
+  status: "success" | "pending" | "failed";
+  time: string;
+  orderNo: string;
+}
+
+// 支付方式选项
+const paymentTypes = [
+  { type: "alipay" as const, name: "支付宝", icon: logoAlipay, color: "#1677FF" },
+  { type: "unionpay" as const, name: "银联", icon: cardOutline, color: "#E31937" },
+  { type: "wechat" as const, name: "微信", icon: logoWechat, color: "#07C160" },
+];
+
+// 充值记录数据
+const rechargeRecords = ref<RechargeRecord[]>([
+  {
+    id: 1,
+    amount: 1000.00,
+    paymentType: "alipay",
+    paymentAccount: "138****8000",
+    status: "success",
+    time: "2026-01-18 14:30:20",
+    orderNo: "RCH202601181430001",
+  },
+  {
+    id: 2,
+    amount: 500.00,
+    paymentType: "wechat",
+    paymentAccount: "wxid_abc123",
+    status: "success",
+    time: "2026-01-17 10:15:30",
+    orderNo: "RCH202601171015002",
+  },
+  {
+    id: 3,
+    amount: 2000.00,
+    paymentType: "unionpay",
+    paymentAccount: "6222 **** **** 1234",
+    status: "pending",
+    time: "2026-01-16 16:45:10",
+    orderNo: "RCH202601161645003",
+  },
+  {
+    id: 4,
+    amount: 100.00,
+    paymentType: "alipay",
+    paymentAccount: "159****6666",
+    status: "success",
+    time: "2026-01-15 09:20:00",
+    orderNo: "RCH202601150920004",
+  },
+  {
+    id: 5,
+    amount: 800.00,
+    paymentType: "unionpay",
+    paymentAccount: "6217 **** **** 5678",
+    status: "failed",
+    time: "2026-01-14 20:30:15",
+    orderNo: "RCH202601142030005",
+  },
+  {
+    id: 6,
+    amount: 300.00,
+    paymentType: "alipay",
+    paymentAccount: "138****8000",
+    status: "success",
+    time: "2026-01-13 11:45:30",
+    orderNo: "RCH202601131145006",
+  },
+  {
+    id: 7,
+    amount: 1500.00,
+    paymentType: "wechat",
+    paymentAccount: "wxid_abc123",
+    status: "success",
+    time: "2026-01-12 15:20:10",
+    orderNo: "RCH202601121520007",
+  },
+  {
+    id: 8,
+    amount: 600.00,
+    paymentType: "unionpay",
+    paymentAccount: "6222 **** **** 1234",
+    status: "success",
+    time: "2026-01-11 09:30:45",
+    orderNo: "RCH202601110930008",
+  },
+]);
+
+function getPaymentTypeName(type: "alipay" | "unionpay" | "wechat") {
+  return paymentTypes.find(pt => pt.type === type)?.name || type;
+}
+
+function getPaymentTypeIcon(type: "alipay" | "unionpay" | "wechat") {
+  return paymentTypes.find(pt => pt.type === type)?.icon || cardOutline;
+}
+
+function getPaymentTypeColor(type: "alipay" | "unionpay" | "wechat") {
+  return paymentTypes.find(pt => pt.type === type)?.color || "#999";
+}
+
+function getStatusText(status: "success" | "pending" | "failed") {
+  const statusMap = {
+    success: "成功",
+    pending: "处理中",
+    failed: "失败",
+  };
+  return statusMap[status];
+}
+
+function getStatusColor(status: "success" | "pending" | "failed") {
+  const colorMap = {
+    success: "#52c41a",
+    pending: "#faad14",
+    failed: "#f5222d",
+  };
+  return colorMap[status];
+}
+
+// 统计数据
+const totalAmount = computed(() => {
+  return rechargeRecords.value
+    .filter(r => r.status === "success")
+    .reduce((sum, r) => sum + r.amount, 0);
+});
+
+const totalCount = computed(() => {
+  return rechargeRecords.value.filter(r => r.status === "success").length;
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ion-buttons slot="start">
+          <back-button />
+        </ion-buttons>
+        <ion-title>充值记录</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <!-- 统计卡片 -->
+      <div class="stats-card">
+        <div class="stat-item">
+          <div class="stat-label">
+            累计充值金额
+          </div>
+          <div class="stat-value">
+            ¥{{ totalAmount.toFixed(2) }}
+          </div>
+        </div>
+        <div class="stat-divider" />
+        <div class="stat-item">
+          <div class="stat-label">
+            充值成功次数
+          </div>
+          <div class="stat-value">
+            {{ totalCount }}次
+          </div>
+        </div>
+      </div>
+
+      <!-- 充值记录列表 -->
+      <div class="records-section">
+        <div v-if="rechargeRecords.length > 0" class="records-list">
+          <div
+            v-for="record in rechargeRecords"
+            :key="record.id"
+            class="record-item"
+          >
+            <div class="record-left">
+              <ion-icon
+                :icon="getPaymentTypeIcon(record.paymentType)"
+                class="record-icon"
+                :style="{ color: getPaymentTypeColor(record.paymentType) }"
+              />
+              <div class="record-info">
+                <div class="record-title">
+                  {{ getPaymentTypeName(record.paymentType) }}充值
+                </div>
+                <div class="record-account">
+                  {{ record.paymentAccount }}
+                </div>
+                <div class="record-time">
+                  {{ record.time }}
+                </div>
+                <div class="record-order">
+                  订单号：{{ record.orderNo }}
+                </div>
+              </div>
+            </div>
+            <div class="record-right">
+              <div class="record-amount">
+                +¥{{ record.amount.toFixed(2) }}
+              </div>
+              <div
+                class="record-status"
+                :style="{ color: getStatusColor(record.status) }"
+              >
+                {{ getStatusText(record.status) }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="empty-records">
+          <ion-icon :icon="listOutline" class="empty-icon" />
+          <div class="empty-text">
+            暂无充值记录
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.stats-card {
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  padding: 24px 20px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+}
+
+.stat-label {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.records-section {
+  background: white;
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+.records-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.record-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 12px;
+}
+
+.record-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.record-icon {
+  font-size: 32px;
+}
+
+.record-info {
+  flex: 1;
+}
+
+.record-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.record-account {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.record-time {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 2px;
+}
+
+.record-order {
+  font-size: 11px;
+  color: #bbb;
+}
+
+.record-right {
+  text-align: right;
+}
+
+.record-amount {
+  font-size: 18px;
+  font-weight: 700;
+  color: #52c41a;
+  margin-bottom: 4px;
+}
+
+.record-status {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.empty-records {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+}
+
+.empty-icon {
+  font-size: 80px;
+  color: #ddd;
+  margin-bottom: 16px;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}
+</style>