rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新钱包页面，添加余额卡和交易明细功能

Browse Source
This commit is contained in:
Rogee
2025-12-26 09:42:51 +08:00
parent 9ebb7e5452
commit 648e3f7c21
2 changed files with 107 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/portal/src/views/user/DashboardView.vue
View File

@@ -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>

107
frontend/portal/src/views/user/WalletView.vue
View File

@@ -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>