From 648e3f7c219b6b2439a80cf0dbaa219e11a6600e Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 09:42:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=92=B1=E5=8C=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=B7=BB=E5=8A=A0=E4=BD=99=E9=A2=9D?=
 =?UTF-8?q?=E5=8D=A1=E5=92=8C=E4=BA=A4=E6=98=93=E6=98=8E=E7=BB=86=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/src/views/user/DashboardView.vue   |   6 +-
 frontend/portal/src/views/user/WalletView.vue | 107 +++++++++++++++++-
 2 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/frontend/portal/src/views/user/DashboardView.vue b/frontend/portal/src/views/user/DashboardView.vue
index 38a33de..719c721 100644
--- a/frontend/portal/src/views/user/DashboardView.vue
+++ b/frontend/portal/src/views/user/DashboardView.vue
@@ -2,14 +2,14 @@
   <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Stat Cards -->
-       <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
+       <router-link to="/me/wallet" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer">
           <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i class="pi pi-wallet"></i></div>
           <div>
              <div class="text-sm text-slate-500">账户余额</div>
              <div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
           </div>
-          <!-- <button class="ml-auto text-sm font-medium text-primary-600 hover:bg-primary-50 px-3 py-1.5 rounded transition-colors">充值</button> -->
-       </div>
+          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+       </router-link>
        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
           <div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl"><i class="pi pi-star"></i></div>
           <div>
diff --git a/frontend/portal/src/views/user/WalletView.vue b/frontend/portal/src/views/user/WalletView.vue
index 4e03a62..56dd7ac 100644
--- a/frontend/portal/src/views/user/WalletView.vue
+++ b/frontend/portal/src/views/user/WalletView.vue
@@ -1,6 +1,107 @@
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-bold mb-4">My Wallet</h1>
-    <p class="text-slate-400">(Balance and transactions)</p>
+  <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
+    <h1 class="text-2xl font-bold text-slate-900 mb-8">我的钱包</h1>
+
+    <!-- Balance Card -->
+    <div class="bg-gradient-to-r from-blue-600 to-blue-500 rounded-2xl p-8 text-white shadow-lg mb-10 relative overflow-hidden">
+       <!-- Background Decor -->
+       <div class="absolute -right-10 -bottom-10 w-48 h-48 bg-white/10 rounded-full blur-2xl"></div>
+       
+       <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6">
+          <div>
+             <div class="text-blue-100 text-sm font-medium mb-1">账户余额 (元)</div>
+             <div class="text-5xl font-bold font-mono">128.50</div>
+          </div>
+          <button @click="showRecharge = !showRecharge" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95">
+             立即充值
+          </button>
+       </div>
+    </div>
+
+    <!-- Recharge Section (Collapsible) -->
+    <div v-if="showRecharge" class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-200 animate-in fade-in slide-in-from-top-4 duration-300">
+       <h3 class="font-bold text-slate-900 mb-4">充值金额</h3>
+       <div class="grid grid-cols-3 sm:grid-cols-4 gap-4 mb-6">
+          <button 
+            v-for="amount in [10, 30, 50, 100, 200, 500]" 
+            :key="amount"
+            @click="selectedAmount = amount; customAmount = ''"
+            class="h-14 rounded-lg border-2 font-bold text-lg transition-all"
+            :class="selectedAmount === amount ? 'border-blue-600 bg-blue-50 text-blue-600' : 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'"
+          >
+            {{ amount }}元
+          </button>
+          <div class="col-span-2 sm:col-span-2 relative">
+             <input 
+               v-model="customAmount"
+               @focus="selectedAmount = null"
+               type="number" 
+               placeholder="自定义金额" 
+               class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold"
+             >
+          </div>
+       </div>
+
+       <h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
+       <div class="flex gap-4 mb-8">
+          <button class="flex items-center gap-2 px-6 py-3 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium">
+             <i class="pi pi-wechat text-xl text-green-600"></i> 微信支付
+          </button>
+          <button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white font-medium">
+             <i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
+          </button>
+       </div>
+
+       <button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">
+          确认支付 ¥ {{ displayAmount }}
+       </button>
+    </div>
+
+    <!-- Transaction History -->
+    <div>
+       <h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
+          <i class="pi pi-history text-slate-400"></i> 交易明细
+       </h3>
+       
+       <div class="space-y-4">
+          <div v-for="item in transactions" :key="item.id" class="flex items-center justify-between p-4 border-b border-slate-50 hover:bg-slate-50 rounded-lg transition-colors">
+             <div class="flex items-center gap-4">
+                <div class="w-10 h-10 rounded-full flex items-center justify-center" :class="item.type === 'income' ? 'bg-green-100 text-green-600' : 'bg-slate-100 text-slate-500'">
+                   <i class="pi" :class="item.type === 'income' ? 'pi-plus' : 'pi-minus'"></i>
+                </div>
+                <div>
+                   <div class="font-bold text-slate-900">{{ item.title }}</div>
+                   <div class="text-xs text-slate-400">{{ item.date }}</div>
+                </div>
+             </div>
+             <div class="font-mono font-bold text-lg" :class="item.type === 'income' ? 'text-green-600' : 'text-slate-900'">
+                {{ item.type === 'income' ? '+' : '-' }} {{ item.amount.toFixed(2) }}
+             </div>
+          </div>
+       </div>
+       
+       <!-- Empty State (Hidden for mock) -->
+       <!-- <div class="text-center py-12 text-slate-400">暂无交易记录</div> -->
+    </div>
   </div>
 </template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const showRecharge = ref(false);
+const selectedAmount = ref(50);
+const customAmount = ref('');
+
+const displayAmount = computed(() => {
+    return customAmount.value ? Number(customAmount.value).toFixed(2) : selectedAmount.value.toFixed(2);
+});
+
+// Mock Data
+const transactions = ref([
+    { id: 1, title: '购买《霸王别姬》全本', date: '2025-12-24 14:30', amount: 9.90, type: 'expense' },
+    { id: 2, title: '账户充值', date: '2025-12-20 10:00', amount: 100.00, type: 'income' },
+    { id: 3, title: '购买周边商品', date: '2025-12-15 18:20', amount: 45.00, type: 'expense' },
+    { id: 4, title: '付费专栏订阅', date: '2025-12-10 09:15', amount: 19.90, type: 'expense' },
+]);
+</script>
\ No newline at end of file