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

feat(portal): complete user center pages and refine interactive feedback

Browse Source
This commit is contained in:
Rogee
2025-12-26 10:25:26 +08:00
parent 648e3f7c21
commit 6b71ac47d1
7 changed files with 173 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/design/portal/GLOBAL.md
View File

@@ -106,6 +106,12 @@
- **样式**: `text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2`。 - **样式**: `text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2`。
- **Label**: 必须显示 Label，字号 `text-base` 或 `text-lg`，不建议仅用 placeholder。 - **Label**: 必须显示 Label，字号 `text-base` 或 `text-lg`，不建议仅用 placeholder。
### 4.5 交互反馈 (Interactive Feedback)
- **鼠标手势**: 所有可点击元素（卡片、按钮、链接、自定义交互区）必须明确指定 `cursor: pointer`。
- **视觉反馈**:
- Hover 时应伴随背景色微调、阴影加深或缩放效果 (`transition-all`)。
- Active 时应有轻微的按下缩放效果 (`active:scale-[0.98]`)，增强操作确认感。
--- ---
## 5. 响应式与可访问性 (Responsive & Accessibility) ## 5. 响应式与可访问性 (Responsive & Accessibility)

10
frontend/portal/src/views/HomeView.vue
View File

@@ -80,7 +80,7 @@
</router-link> </router-link>
<!-- Card Variant 2: No Image (Text Only) --> <!-- Card Variant 2: No Image (Text Only) -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span class="px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-600 border border-green-100">限免</span> <span class="px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-600 border border-green-100">限免</span>
<span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[昆曲]</span> <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[昆曲]</span>
@@ -102,17 +102,17 @@
</div> </div>
<!-- Card Variant 3: 3 Images --> <!-- Card Variant 3: 3 Images -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
<h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">[图集] 2024 新年京剧晚会后台探班：名角云集</h3> <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">[图集] 2024 新年京剧晚会后台探班：名角云集</h3>
<div class="grid grid-cols-3 gap-2 mb-4"> <div class="grid grid-cols-3 gap-2 mb-4">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100"> <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div> </div>
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100"> <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div> </div>
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100 relative"> <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100 relative">
<img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">+9</div> <div class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">+9</div>
</div> </div>
</div> </div>

6
frontend/portal/src/views/order/DetailView.vue
View File

@@ -2,7 +2,7 @@
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
<!-- Header --> <!-- Header -->
<div class="flex items-center gap-4 mb-8"> <div class="flex items-center gap-4 mb-8">
<button @click="$router.back()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors"> <button @click="$router.back()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors cursor-pointer active:scale-90">
<i class="pi pi-arrow-left text-lg"></i> <i class="pi pi-arrow-left text-lg"></i>
</button> </button>
<div> <div>
@@ -107,7 +107,7 @@
<div> <div>
<h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">订单信息</h3> <h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">订单信息</h3>
<div class="space-y-3 text-slate-600"> <div class="space-y-3 text-slate-600">
<p>订单编号: <span class="text-slate-900 select-all">{{ order.id }}</span> <button class="text-primary-600 ml-2 hover:underline font-medium">复制</button></p> <p>订单编号: <span class="text-slate-900 select-all">{{ order.id }}</span> <button class="text-primary-600 ml-2 hover:underline font-medium cursor-pointer">复制</button></p>
<p>创建时间: {{ order.createTime }}</p> <p>创建时间: {{ order.createTime }}</p>
<p v-if="order.payTime">付款时间: {{ order.payTime }}</p> <p v-if="order.payTime">付款时间: {{ order.payTime }}</p>
</div> </div>
@@ -130,7 +130,7 @@
<img :src="order.tenantAvatar" class="w-12 h-12 rounded-full"> <img :src="order.tenantAvatar" class="w-12 h-12 rounded-full">
<div> <div>
<div class="font-bold text-slate-900">{{ order.tenantName }}</div> <div class="font-bold text-slate-900">{{ order.tenantName }}</div>
<button class="text-primary-600 text-sm mt-1 hover:underline">联系商家</button> <button class="text-primary-600 text-sm mt-1 hover:underline cursor-pointer">联系商家</button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -10,19 +10,21 @@
</div> </div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i> <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</router-link> </router-link>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4"> <div 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 group active:scale-[0.98]">
<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 class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-star"></i></div>
<div> <div>
<div class="text-sm text-slate-500">我的积分</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">2,450</div>
</div> </div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</div> </div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4"> <div 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 group active:scale-[0.98]">
<div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl"><i class="pi pi-ticket"></i></div> <div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-ticket"></i></div>
<div> <div>
<div class="text-sm text-slate-500">优惠券</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">3 张</div>
</div> </div>
<i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
</div> </div>
</div> </div>
@@ -30,16 +32,16 @@
<div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6"> <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"> <div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900">最近订单</h2> <h2 class="text-xl font-bold text-slate-900">最近订单</h2>
<router-link to="/me/orders" class="text-sm text-primary-600 hover:text-primary-700 font-medium">查看全部 <i class="pi pi-angle-right"></i></router-link> <router-link to="/me/orders" class="text-sm text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors">查看全部 <i class="pi pi-angle-right"></i></router-link>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-slate-300 transition-colors cursor-pointer"> <div @click="$router.push('/me/orders/82934712')" 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"> <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" class="w-full h-full object-cover rounded"> <img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h3 class="font-bold text-slate-900 truncate">《霸王别姬》全本实录珍藏版</h3> <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> <div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
</div> </div>
<div class="text-right"> <div class="text-right">

133
frontend/portal/src/views/user/LibraryView.vue
View File

@@ -1,6 +1,133 @@
<template> <template>
<div class="p-8"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
<h1 class="text-2xl font-bold mb-4">My Library</h1> <div class="flex items-center justify-between mb-8">
<p class="text-slate-400">(Purchased content)</p> <h1 class="text-2xl font-bold text-slate-900">已购内容</h1>
<div class="flex gap-4">
<select class="h-10 pl-3 pr-8 rounded-lg border border-slate-200 bg-white text-sm focus:border-primary-500 focus:outline-none cursor-pointer hover:border-primary-300 transition-colors">
<option>全部类型</option>
<option>视频</option>
<option>音频</option>
<option>图文专栏</option>
</select>
<div class="relative">
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" placeholder="搜索已购内容..." class="h-10 pl-9 pr-4 rounded-lg border border-slate-200 text-sm focus:border-primary-500 focus:outline-none w-48 transition-all focus:w-64">
</div>
</div>
</div>
<!-- Content List (Vertical Stack) -->
<div class="space-y-6">
<div
v-for="item in libraryItems"
:key="item.id"
@click="item.status !== 'offline' ? $router.push(`/contents/${item.id}`) : null"
class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 flex flex-col sm:flex-row"
:class="item.status !== 'offline' ? 'cursor-pointer active:scale-[0.99]' : 'opacity-75 cursor-not-allowed'"
>
<!-- Cover -->
<div class="w-full sm:w-64 aspect-video bg-slate-100 relative overflow-hidden flex-shrink-0">
<img :src="item.cover" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" :class="{ 'grayscale opacity-70': item.status === 'expired' || item.status === 'offline' }">
<!-- Type Icon -->
<div class="absolute bottom-2 left-2 w-8 h-8 bg-black/60 rounded-full flex items-center justify-center text-white backdrop-blur-sm">
<i class="pi" :class="getTypeIcon(item.type)"></i>
</div>
</div>
<!-- Info -->
<div class="p-6 flex flex-col flex-1 min-w-0">
<div class="flex items-start justify-between gap-4 mb-2">
<h3 class="font-bold text-slate-900 text-lg sm:text-xl line-clamp-2 group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
<!-- Status Badges (Moved here for list layout) -->
<span v-if="item.status === 'active'" class="flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-bold rounded">永久有效</span>
<span v-else-if="item.status === 'expiring'" class="flex-shrink-0 px-2 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded">剩余 3 天</span>
<span v-else-if="item.status === 'expired'" class="flex-shrink-0 px-2 py-1 bg-slate-100 text-slate-500 text-xs font-bold rounded">已过期</span>
<span v-else-if="item.status === 'offline'" class="flex-shrink-0 px-2 py-1 bg-red-100 text-red-600 text-xs font-bold rounded">已下架</span>
</div>
<div class="flex items-center gap-3 text-sm text-slate-500 mb-4">
<img :src="item.tenantAvatar" class="w-6 h-6 rounded-full">
<span class="font-medium text-slate-700">{{ item.tenantName }}</span>
<span class="w-1 h-1 bg-slate-300 rounded-full"></span>
<span>{{ item.purchaseDate }} 购买</span>
</div>
<!-- Action -->
<div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-end">
<button v-if="item.status === 'active' || item.status === 'expiring'" class="px-6 py-2 bg-primary-600 text-white text-base font-bold rounded-lg hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200">
立即阅读
</button>
<button v-else class="px-6 py-2 bg-slate-100 text-slate-400 text-base font-bold rounded-lg cursor-not-allowed">
不可查看
</button>
</div>
</div>
</div>
</div>
<!-- Empty State (Hidden) -->
<!-- <div class="flex flex-col items-center justify-center py-20">
<div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-4"><i class="pi pi-book text-3xl text-slate-300"></i></div>
<p class="text-slate-500">暂无已购内容</p>
<button class="mt-4 text-primary-600 font-medium hover:underline">去发现好内容</button>
</div> -->
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const getTypeIcon = (type) => {
switch(type) {
case 'video': return 'pi-video';
case 'audio': return 'pi-volume-up';
default: return 'pi-file';
}
};
// Mock Data
const libraryItems = ref([
{
id: 1,
title: '《锁麟囊》程派艺术解析专栏',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '梅派传人小林',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
purchaseDate: '2025-12-20',
type: 'article',
status: 'active'
},
{
id: 2,
title: '京剧打击乐基础教程 (视频课)',
cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '戏曲学院官方',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=School',
purchaseDate: '2025-11-15',
type: 'video',
status: 'expiring'
},
{
id: 3,
title: '【已过期】2024 新年戏曲晚会直播回放',
cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: 'CCTV 戏曲',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=TV',
purchaseDate: '2025-01-01',
type: 'video',
status: 'expired'
},
{
id: 4,
title: '【已下架】某某名家访谈录',
cover: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '未知用户',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Unknown',
purchaseDate: '2024-12-10',
type: 'audio',
status: 'offline'
}
]);
</script>

26
frontend/portal/src/views/user/OrdersView.vue
View File

@@ -8,7 +8,7 @@
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.value" :key="tab.value"
@click="currentTab = tab.value" @click="currentTab = tab.value"
class="pb-4 text-sm font-medium transition-colors border-b-2" class="pb-4 text-sm font-medium transition-colors border-b-2 cursor-pointer focus:outline-none"
:class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'" :class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'"
> >
{{ tab.label }} {{ tab.label }}
@@ -22,33 +22,33 @@
<div class="flex justify-end mb-4"> <div class="flex justify-end mb-4">
<div class="relative w-64"> <div class="relative w-64">
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i> <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" placeholder="搜索订单号或商品..." class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-primary-500"> <input type="text" placeholder="搜索订单号或商品..." class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-primary-500 transition-colors">
</div> </div>
</div> </div>
<!-- List Items --> <!-- List Items -->
<div v-if="filteredOrders.length > 0" class="space-y-6"> <div v-if="filteredOrders.length > 0" class="space-y-6">
<div v-for="order in filteredOrders" :key="order.id" class="border border-slate-200 rounded-lg overflow-hidden hover:border-slate-300 transition-colors"> <div v-for="order in filteredOrders" :key="order.id" class="border border-slate-200 rounded-lg overflow-hidden hover:border-slate-300 hover:shadow-sm transition-all group">
<!-- Order Header --> <!-- Order Header -->
<div class="bg-slate-50 px-4 py-3 flex items-center justify-between text-sm text-slate-500"> <div class="bg-slate-50 px-4 py-3 flex items-center justify-between text-sm text-slate-500">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<span class="font-medium text-slate-900">{{ order.date }}</span> <span class="font-medium text-slate-900">{{ order.date }}</span>
<span>订单号: {{ order.id }}</span> <span class="select-all">订单号: {{ order.id }}</span>
<span>{{ order.tenantName }}</span> <span class="hover:text-primary-600 cursor-pointer transition-colors">{{ order.tenantName }} <i class="pi pi-angle-right text-xs"></i></span>
</div> </div>
<div class="font-bold" :class="statusColor(order.status)">{{ statusText(order.status) }}</div> <div class="font-bold" :class="statusColor(order.status)">{{ statusText(order.status) }}</div>
</div> </div>
<!-- Order Body --> <!-- Order Body -->
<div class="p-4 flex flex-col sm:flex-row gap-6"> <div class="p-4 flex flex-col sm:flex-row gap-6">
<!-- Product Info --> <!-- Product Info (Clickable Area) -->
<div class="flex-1 flex gap-4"> <div class="flex-1 flex gap-4 cursor-pointer" @click="$router.push(`/me/orders/${order.id}`)">
<div class="w-24 h-16 bg-slate-100 rounded object-cover flex-shrink-0 relative overflow-hidden"> <div class="w-24 h-16 bg-slate-100 rounded object-cover flex-shrink-0 relative overflow-hidden group-hover:opacity-90 transition-opacity">
<img :src="order.cover" class="w-full h-full object-cover"> <img :src="order.cover" class="w-full h-full object-cover">
<div v-if="order.type === 'video'" class="absolute inset-0 flex items-center justify-center bg-black/20 text-white"><i class="pi pi-play-circle"></i></div> <div v-if="order.type === 'video'" class="absolute inset-0 flex items-center justify-center bg-black/20 text-white"><i class="pi pi-play-circle"></i></div>
</div> </div>
<div> <div>
<h3 class="font-bold text-slate-900 line-clamp-1 mb-1">{{ order.title }}</h3> <h3 class="font-bold text-slate-900 line-clamp-1 mb-1 group-hover:text-primary-600 transition-colors">{{ order.title }}</h3>
<div class="text-xs text-slate-500 mb-2">{{ order.typeLabel }}</div> <div class="text-xs text-slate-500 mb-2">{{ order.typeLabel }}</div>
<div v-if="order.isVirtual" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-600">虚拟发货</div> <div v-if="order.isVirtual" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-600">虚拟发货</div>
</div> </div>
@@ -61,10 +61,10 @@
<div class="text-xs text-slate-400">在线支付</div> <div class="text-xs text-slate-400">在线支付</div>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<button v-if="order.status === 'unpaid'" class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">去支付</button> <button v-if="order.status === 'unpaid'" class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm active:scale-95 cursor-pointer">去支付</button>
<router-link :to="`/me/orders/${order.id}`" v-if="order.status === 'paid' || order.status === 'completed'" class="px-4 py-1.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 inline-block text-center">查看详情</router-link> <router-link :to="`/me/orders/${order.id}`" v-if="order.status === 'paid' || order.status === 'completed'" class="px-4 py-1.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 hover:border-slate-400 transition-colors inline-block text-center cursor-pointer active:scale-95">查看详情</router-link>
<button v-if="order.status === 'completed'" class="px-4 py-1.5 text-primary-600 text-sm hover:underline">申请售后</button> <button v-if="order.status === 'completed'" class="px-4 py-1.5 text-primary-600 text-sm hover:underline cursor-pointer">申请售后</button>
<button v-if="order.status === 'unpaid'" class="text-xs text-slate-400 hover:text-slate-600">取消订单</button> <button v-if="order.status === 'unpaid'" class="text-xs text-slate-400 hover:text-slate-600 cursor-pointer">取消订单</button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -12,7 +12,7 @@
<div class="text-blue-100 text-sm font-medium mb-1">账户余额 (元)</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 class="text-5xl font-bold font-mono">128.50</div>
</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 @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 cursor-pointer">
立即充值 立即充值
</button> </button>
</div> </div>
@@ -26,7 +26,7 @@
v-for="amount in [10, 30, 50, 100, 200, 500]" v-for="amount in [10, 30, 50, 100, 200, 500]"
:key="amount" :key="amount"
@click="selectedAmount = amount; customAmount = ''" @click="selectedAmount = amount; customAmount = ''"
class="h-14 rounded-lg border-2 font-bold text-lg transition-all" class="h-14 rounded-lg border-2 font-bold text-lg transition-all cursor-pointer active:scale-95"
:class="selectedAmount === amount ? 'border-blue-600 bg-blue-50 text-blue-600' : 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'" :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 }}元 {{ amount }}元
@@ -37,22 +37,22 @@
@focus="selectedAmount = null" @focus="selectedAmount = null"
type="number" type="number"
placeholder="自定义金额" 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" 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 transition-colors"
> >
</div> </div>
</div> </div>
<h3 class="font-bold text-slate-900 mb-4">支付方式</h3> <h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
<div class="flex gap-4 mb-8"> <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"> <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 cursor-pointer active:scale-95 transition-transform">
<i class="pi pi-wechat text-xl text-green-600"></i> 微信支付 <i class="pi pi-wechat text-xl text-green-600"></i> 微信支付
</button> </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"> <button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white hover:border-slate-300 font-medium cursor-pointer active:scale-95 transition-all">
<i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝 <i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
</button> </button>
</div> </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"> <button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 cursor-pointer active:scale-[0.98]">
确认支付 ¥ {{ displayAmount }} 确认支付 ¥ {{ displayAmount }}
</button> </button>
</div> </div>