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

feat(auth): implement OTP login flow with toast notifications

Browse Source 
feat(content): enhance detail view with dynamic content and comments
feat(order): add polling for payment status in the payment view
feat(user): update dashboard to display wallet and recent orders
feat(user): improve orders view with dynamic order fetching and status mapping
feat(api): create API modules for auth, content, order, user, and common functionalities
refactor(request): implement a centralized request utility for API calls
This commit is contained in:
Rogee
2025-12-30 21:15:13 +08:00
parent 179b6aa0e2
commit cf29a2bf1a
14 changed files with 400 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
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 class="text-2xl font-bold text-slate-900">¥ {{ wallet.balance }}</div>
</div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</router-link>
@@ -20,7 +20,7 @@
</div>
<div>
<div class="text-sm text-slate-500">我的积分</div>
<div class="text-2xl font-bold text-slate-900">2,450</div>
<div class="text-2xl font-bold text-slate-900">{{ wallet.points }}</div>
</div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</div>
@@ -32,7 +32,7 @@
</div>
<div>
<div class="text-sm text-slate-500">优惠券</div>
<div class="text-2xl font-bold text-slate-900">3 张</div>
<div class="text-2xl font-bold text-slate-900">{{ couponCount }} 张</div>
</div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</div>
@@ -48,46 +48,67 @@
</div>
<div class="space-y-4">
<div @click="$router.push('/me/orders/82934712')"
<div v-for="order in recentOrders" :key="order.id" @click="$router.push(`/me/orders/${order.id}`)"
class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-primary-100 hover:shadow-sm transition-all cursor-pointer active:scale-[0.99] group">
<div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
<img
src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60"
<img v-if="order.items && order.items.length > 0"
:src="order.items[0].cover"
class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
</div>
<div class="flex-1 min-w-0">
<h3 class="font-bold text-slate-900 truncate group-hover:text-primary-600 transition-colors">
《霸王别姬》全本实录珍藏版</h3>
<div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
{{ order.items && order.items.length > 0 ? order.items[0].title : '未知商品' }}</h3>
<div class="text-sm text-slate-500 mt-1">{{ order.create_time }} · 订单号: {{ order.id }}</div>
</div>
<div class="text-right">
<div class="font-bold text-slate-900">¥ 9.90</div>
<div class="text-sm text-green-600 mt-1">交易成功</div>
<div class="font-bold text-slate-900">¥ {{ order.amount }}</div>
<div class="text-sm text-green-600 mt-1">{{ order.status }}</div>
</div>
</div>
<!-- More items... -->
<div v-if="recentOrders.length === 0" class="text-center text-slate-400 py-4">暂无订单</div>
</div>
</div>
<!-- Recent Views -->
<!-- Recent Views (Mock) -->
<div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
<button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div v-for="i in 5" :key="i" class="group cursor-pointer">
<div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
<img
:src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
</div>
<h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">
京剧名家谈戏曲传承与创新发展的思考</h4>
<div class="text-xs text-slate-400 mt-1">10分钟前</div>
</div>
<div class="text-center text-slate-400 col-span-full py-8">暂无浏览记录</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { userApi } from '../../api/user';
const wallet = ref({ balance: 0, points: 0 });
const couponCount = ref(0);
const recentOrders = ref([]);
const fetchData = async () => {
try {
const w = await userApi.getWallet();
wallet.value.balance = w.balance || 0;
const u = await userApi.getMe();
wallet.value.points = u.points || 0;
const c = await userApi.getCoupons('unused');
couponCount.value = c.length;
const o = await userApi.getOrders('all');
recentOrders.value = (o || []).slice(0, 3);
} catch (e) {
console.error(e);
}
};
onMounted(() => {
fetchData();
});
</script>