From e8b63b9710676f74f6432d5f18dfa3126a1e30fa Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 17 Jan 2026 02:33:42 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E8=B5=84=E6=96=99=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E5=92=8C=E9=92=B1=E5=8C=85?=
 =?UTF-8?q?=E4=BD=99=E9=A2=9D=E5=B1=95=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8=E5=92=8C=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/profile/index.vue | 260 +++++++++++++++++++++++++++++++++---
 1 file changed, 245 insertions(+), 15 deletions(-)

diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index ed5a06e..825e40d 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -1,30 +1,260 @@
 <script lang='ts' setup>
+import {
+  alertCircleOutline,
+  arrowDownOutline,
+  arrowUpOutline,
+  cardOutline,
+  chatbubblesOutline,
+  chevronForwardOutline,
+  documentTextOutline,
+  exitOutline,
+  homeOutline,
+  listOutline,
+  locationOutline,
+  lockClosedOutline,
+  personOutline,
+  settingsOutline,
+  shieldCheckmarkOutline,
+  walletOutline,
+} from "ionicons/icons";
 
+// 用户信息
+const userInfo = ref({
+  name: "周少华",
+  phone: "138****1234",
+  inviteCode: "ABCD1234",
+  avatar: "@/assets/images/avatar.jpg",
+});
+
+// 钱包余额
+const wallet = ref({
+  profitBalance: 15286.50, // 收益钱包余额
+  accountBalance: 32150.80, // 账户余额
+});
+
+// 我的应用列表
+const myApps = ref([
+  {
+    id: 1,
+    name: "实名认证",
+    icon: shieldCheckmarkOutline,
+    color: "#c32120",
+    path: "/real-name",
+  },
+  {
+    id: 2,
+    name: "收货地址",
+    icon: locationOutline,
+    color: "#c32120",
+    path: "/address",
+  },
+  {
+    id: 3,
+    name: "收款方式",
+    icon: cardOutline,
+    color: "#c32120",
+    path: "/payment",
+  },
+  {
+    id: 4,
+    name: "在线客服",
+    icon: chatbubblesOutline,
+    color: "#c32120",
+    path: "/customer-service",
+  },
+  {
+    id: 5,
+    name: "个人设置",
+    icon: settingsOutline,
+    color: "#c32120",
+    path: "/settings",
+  },
+  {
+    id: 6,
+    name: "安全中心",
+    icon: lockClosedOutline,
+    color: "#c32120",
+    path: "/security",
+  },
+  {
+    id: 7,
+    name: "资产明细",
+    icon: listOutline,
+    color: "#c32120",
+    path: "/asset-details",
+  },
+]);
+
+function handleRecharge() {
+  console.log("快捷充值");
+  // TODO: 实现充值功能
+}
+
+function handleWithdraw() {
+  console.log("快捷提现");
+  // TODO: 实现提现功能
+}
+
+function handleAppClick(app: any) {
+  console.log("点击应用:", app.name);
+  // TODO: 跳转到对应页面
+}
+
+function handleLogout() {
+  console.log("退出登录");
+  // TODO: 实现退出登录功能
+}
 </script>
 
 <template>
   <ion-page>
     <ion-content>
-      <img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
+      <!-- 顶部横幅和用户信息 -->
+      <div class="relative -z-1">
+        <img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
 
-      <div class="absolute top-10 left-5 flex-center gap-3">
-        <ion-avatar class="size-18">
-          <img alt="Silhouette of a person's head" src="@/assets/images/avatar.jpg">
-        </ion-avatar>
-        <div>
-          <div class="text-primary text-xl font-bold">
-            周少华
-          </div>
-          <div class="text-primary text-sm font-semibold">
-            手机号：138****1234
-          </div>
-          <div class="text-primary text-sm font-semibold">
-            邀请码：ABCD1234
+        <div class="absolute top-10 left-5 flex items-center gap-3">
+          <ion-avatar class="size-18 border-3 border-white shadow-lg">
+            <img alt="用户头像" src="@/assets/images/avatar.jpg">
+          </ion-avatar>
+          <div>
+            <div class="text-primary text-xl font-bold">
+              {{ userInfo.name }}
+            </div>
+            <div class="text-primary text-sm font-semibold opacity-90">
+              手机号：{{ userInfo.phone }}
+            </div>
+            <div class="text-primary text-sm font-semibold opacity-90">
+              邀请码：{{ userInfo.inviteCode }}
+            </div>
           </div>
         </div>
       </div>
+
+      <div class="ion-padding">
+        <!-- 钱包余额卡片 -->
+        <section class="mb-4 -mt-12">
+          <div class="card rounded-2xl shadow-lg p-5">
+            <div class="flex items-center gap-2 mb-4">
+              <ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
+              <div class="text-lg font-bold text-[#1a1a1a] m-0">
+                我的钱包
+              </div>
+            </div>
+
+            <!-- 余额展示 -->
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
+                <div class="text-xs mb-1">
+                  收益钱包
+                </div>
+                <div class="text-2xl font-bold text-[#c41e3a] mb-1">
+                  ¥{{ wallet.profitBalance.toFixed(2) }}
+                </div>
+              </div>
+              <div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
+                <div class="text-xs mb-1">
+                  账户余额
+                </div>
+                <div class="text-2xl font-bold text-[#c41e3a] mb-1">
+                  ¥{{ wallet.accountBalance.toFixed(2) }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 快捷操作按钮 -->
+            <div class="flex gap-3">
+              <ion-button
+                expand="block"
+                class="flex-1 recharge-btn"
+                @click="handleRecharge"
+              >
+                <ion-icon slot="start" :icon="arrowDownOutline" />
+                快捷充值
+              </ion-button>
+              <ion-button
+                expand="block"
+                class="flex-1 withdraw-btn"
+                fill="outline"
+                @click="handleWithdraw"
+              >
+                <ion-icon slot="start" :icon="arrowUpOutline" />
+                快捷提现
+              </ion-button>
+            </div>
+          </div>
+        </section>
+
+        <!-- 我的应用 -->
+        <section class="mb-4">
+          <div class="card rounded-2xl shadow-lg p-5">
+            <div class="flex items-center gap-2 mb-4">
+              <ion-icon :icon="homeOutline" class="text-2xl text-[#c41e3a]" />
+              <div class="text-lg font-bold text-[#1a1a1a] m-0">
+                我的应用
+              </div>
+            </div>
+
+            <div class="grid grid-cols-4 gap-y-5 gap-x-2">
+              <div
+                v-for="app in myApps"
+                :key="app.id"
+                class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
+                @click="handleAppClick(app)"
+              >
+                <div
+                  class="app-item w-13 h-13 rounded-xl flex-center shadow-md"
+                >
+                  <ion-icon :icon="app.icon" class="text-2xl text-white" />
+                </div>
+                <span class="text-xs text-[#333] font-medium text-center leading-tight">{{ app.name }}</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 退出登录按钮 -->
+        <section class="mb-5">
+          <ion-button expand="block" fill="outline" @click="handleLogout">
+            <ion-icon slot="start" :icon="exitOutline" />
+            安全退出登录
+          </ion-button>
+        </section>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.card {
+  background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
+}
+.recharge-btn {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
+  --border-radius: 12px;
+  --box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
+  font-weight: 600;
+  font-size: 14px;
+  height: 44px;
+  text-transform: none;
+}
+
+.withdraw-btn {
+  --border-color: #c41e3a;
+  --color: #c41e3a;
+  --border-radius: 12px;
+  --border-width: 2px;
+  font-weight: 600;
+  font-size: 14px;
+  height: 44px;
+  text-transform: none;
+}
+
+.withdraw-btn::part(native) {
+  font-weight: 600;
+}
+.app-item {
+  background: linear-gradient(135deg, rgb(249 103 102 / 93%), rgb(195, 33, 32));
+}
+</style>