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

feat(portal): enhance creator dashboard and order management with new layout and features

Browse Source
This commit is contained in:
Rogee
2025-12-26 19:10:40 +08:00
parent b40c529cd8
commit 35b46386c7
6 changed files with 561 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
frontend/portal/src/views/creator/OrdersView.vue
View File

@@ -1,6 +1,241 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">Creator Orders</h1>
<p class="text-slate-400">(List of orders)</p>
</div>
<div>
<div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold text-slate-900">订单管理</h1>
<div class="flex gap-4">
<button
class="px-4 py-2 border border-slate-200 rounded-lg text-sm font-bold text-slate-600 hover:bg-slate-50 cursor-pointer">
<i class="pi pi-download mr-1"></i> 导出报表
</button>
</div>
</div>
<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center">
<div class="flex items-center gap-2">
<span class="text-sm font-bold text-slate-500">状态:</span>
<select v-model="filterStatus"
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer">
<option value="all">全部</option>
<option value="completed">已完成</option>
<option value="refunding">退款申请中</option>
<option value="refunded">已退款</option>
</select>
</div>
<div class="ml-auto relative w-64">
<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 h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none transition-all">
</div>
</div>
<!-- Order Table -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
<table class="w-full text-left text-sm">
<thead class="bg-slate-50 text-slate-500 font-bold border-b border-slate-200">
<tr>
<th class="px-6 py-4 whitespace-nowrap">订单号</th>
<th class="px-6 py-4 w-[30%]">内容信息</th>
<th class="px-6 py-4 whitespace-nowrap">买家</th>
<th class="px-6 py-4 text-right whitespace-nowrap">实付金额</th>
<th class="px-6 py-4 whitespace-nowrap">下单时间</th>
<th class="px-6 py-4 whitespace-nowrap">状态</th>
<th class="px-6 py-4 text-right whitespace-nowrap">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr v-for="order in filteredOrders" :key="order.id" class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-4 font-mono text-slate-600 align-middle">{{ order.id }}</td>
<td class="px-6 py-4 align-middle">
<div class="flex items-center gap-3">
<img :src="order.cover"
class="w-16 h-10 object-cover rounded bg-slate-100 flex-shrink-0">
<span class="font-bold text-slate-900 truncate max-w-[240px]" :title="order.title">{{
order.title }}</span>
</div>
</td>
<td class="px-6 py-4 align-middle">
<div class="flex items-center gap-2">
<img :src="order.buyerAvatar" class="w-8 h-8 rounded-full flex-shrink-0">
<span class="text-slate-700 truncate max-w-[100px]">{{ order.buyerName }}</span>
</div>
</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 align-middle">¥ {{ order.amount }}</td>
<td class="px-6 py-4 text-slate-500 whitespace-nowrap align-middle">{{ order.date }}</td>
<td class="px-6 py-4 align-middle">
<span class="inline-block px-2.5 py-1 rounded text-xs font-bold whitespace-nowrap"
:class="statusStyle(order.status).bg + ' ' + statusStyle(order.status).text">
{{ statusStyle(order.status).label }}
</span>
</td>
<td class="px-6 py-4 text-right align-middle whitespace-nowrap">
<button @click="viewDetail(order)"
class="text-primary-600 hover:text-primary-700 font-medium mr-4 cursor-pointer hover:bg-primary-50 px-2 py-1 rounded transition-colors">详情</button>
<button v-if="order.status === 'refunding'" @click="handleRefund(order)"
class="text-red-600 hover:text-red-700 font-medium cursor-pointer hover:bg-red-50 px-2 py-1 rounded transition-colors">处理退款</button>
</td>
</tr>
</tbody>
</table>
<!-- Empty State -->
<div v-if="filteredOrders.length === 0" class="text-center py-12 text-slate-400">
暂无相关订单
</div>
</div>
<!-- Detail Dialog -->
<Dialog v-model:visible="detailDialog" modal header="订单详情" :style="{ width: '30rem' }">
<div v-if="selectedOrder" class="space-y-6">
<div class="flex justify-between items-center pb-4 border-b border-slate-100">
<span class="text-sm text-slate-500">订单号</span>
<span class="font-mono font-bold">{{ selectedOrder.id }}</span>
</div>
<div class="flex gap-4">
<img :src="selectedOrder.cover" class="w-20 h-14 object-cover rounded">
<div>
<h3 class="font-bold text-slate-900">{{ selectedOrder.title }}</h3>
<p class="text-sm text-slate-500 mt-1">类型: {{ selectedOrder.type }}</p>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-lg space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-slate-500">买家</span>
<span class="font-medium">{{ selectedOrder.buyerName }} (ID: {{ selectedOrder.buyerId }})</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500">支付方式</span>
<span>微信支付</span>
</div>
<div class="flex justify-between pt-2 border-t border-slate-200">
<span class="font-bold text-slate-900">实付</span>
<span class="font-bold text-red-600 text-lg">¥ {{ selectedOrder.amount }}</span>
</div>
</div>
<div v-if="selectedOrder.status === 'refunding'" class="bg-red-50 p-4 rounded-lg border border-red-100">
<h4 class="text-red-700 font-bold text-sm mb-2">退款申请信息</h4>
<p class="text-sm text-red-600">申请原因：内容无法播放/质量问题</p>
<p class="text-sm text-red-600 mt-1">申请说明：视频一直加载不出来。</p>
</div>
</div>
<template #footer>
<button @click="detailDialog = false"
class="px-4 py-2 border border-slate-200 rounded text-sm hover:bg-slate-50">关闭</button>
<button
class="px-4 py-2 border border-primary-200 text-primary-600 rounded text-sm hover:bg-primary-50 ml-2">联系买家</button>
</template>
</Dialog>
<!-- Refund Dialog -->
<Dialog v-model:visible="refundDialog" modal header="处理退款申请" :style="{ width: '25rem' }">
<div class="text-sm text-slate-600 mb-6">
您正在处理订单 <span class="font-mono font-bold">{{ selectedOrder?.id }}</span> 的退款申请。
<br>同意后，金额将原路退回给买家。
</div>
<div class="space-y-3">
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
:class="refundAction === 'accept' ? 'border-green-500 bg-green-50' : 'border-slate-200'">
<RadioButton v-model="refundAction" value="accept" />
<span>同意退款</span>
</label>
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
:class="refundAction === 'reject' ? 'border-red-500 bg-red-50' : 'border-slate-200'">
<RadioButton v-model="refundAction" value="reject" />
<span>拒绝退款</span>
</label>
</div>
<div v-if="refundAction === 'reject'" class="mt-4">
<textarea class="w-full p-2 border border-slate-200 rounded text-sm focus:border-red-500 outline-none"
rows="2" placeholder="请输入拒绝理由..."></textarea>
</div>
<template #footer>
<button @click="refundDialog = false"
class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm">取消</button>
<button @click="confirmRefund"
class="px-4 py-2 bg-slate-900 text-white rounded text-sm hover:bg-slate-800">确认处理</button>
</template>
</Dialog>
<Toast />
</div>
</template>
<script setup>
import Dialog from 'primevue/dialog';
import RadioButton from 'primevue/radiobutton';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { computed, ref } from 'vue';
const toast = useToast();
const filterStatus = ref('all');
const detailDialog = ref(false);
const refundDialog = ref(false);
const selectedOrder = ref(null);
const refundAction = ref('accept');
const orders = ref([
{
id: '82934712',
title: '《霸王别姬》全本实录珍藏版',
type: '视频',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
buyerName: '戏迷小张',
buyerAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang',
buyerId: '9527',
amount: '9.90',
date: '2025-12-24 14:30',
status: 'completed'
},
{
id: '82934715',
title: '京剧打击乐基础教程',
type: '视频',
cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
buyerName: '票友老李',
buyerAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Li',
buyerId: '8848',
amount: '19.90',
date: '2025-12-25 09:15',
status: 'refunding'
}
]);
const filteredOrders = computed(() => {
if (filterStatus.value === 'all') return orders.value;
return orders.value.filter(o => o.status === filterStatus.value);
});
const statusStyle = (status) => {
switch (status) {
case 'completed': return { bg: 'bg-green-50', text: 'text-green-600', label: '已完成' };
case 'refunding': return { bg: 'bg-orange-50', text: 'text-orange-600', label: '退款申请中' };
case 'refunded': return { bg: 'bg-slate-100', text: 'text-slate-500', label: '已退款' };
default: return { bg: 'bg-slate-100', text: 'text-slate-500', label: '未知' };
}
};
const viewDetail = (order) => {
selectedOrder.value = order;
detailDialog.value = true;
};
const handleRefund = (order) => {
selectedOrder.value = order;
refundAction.value = 'accept';
refundDialog.value = true;
};
const confirmRefund = () => {
// Mock API
refundDialog.value = false;
toast.add({
severity: 'success',
summary: '处理完成',
detail: refundAction.value === 'accept' ? '已同意退款' : '已拒绝退款申请',
life: 3000
});
// In real app, refresh list
};
</script>