68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<div class="sticky top-0 z-10 shrink-0">
|
|
<Header>
|
|
<FBreadcrumbs
|
|
:items="[{ label: '账单', route: { name: 'Billing' } }]"
|
|
/>
|
|
</Header>
|
|
<TabsWithRouter
|
|
v-if="$team?.pg?.is_desk_user || $session.hasBillingAccess"
|
|
:tabs="filteredTabs"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
|
|
>
|
|
<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
|
|
<ErrorMessage message="您无权查看账单页面" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { Tabs, Breadcrumbs } from 'jingrow-ui';
|
|
import Header from '../components/Header.vue';
|
|
import TabsWithRouter from '../components/TabsWithRouter.vue';
|
|
|
|
export default {
|
|
name: 'Billing',
|
|
components: {
|
|
Header,
|
|
FBreadcrumbs: Breadcrumbs,
|
|
FTabs: Tabs,
|
|
TabsWithRouter,
|
|
},
|
|
data() {
|
|
return {
|
|
currentTab: 0,
|
|
tabs: [
|
|
{ label: '概览', route: { name: 'BillingOverview' } },
|
|
{ label: '订单记录', route: { name: 'BillingOrders' } },
|
|
{ label: '余额明细', route: { name: 'BillingBalances' } },
|
|
{
|
|
label: '开发者收益',
|
|
route: { name: 'BillingMarketplacePayouts' },
|
|
requireDeveloper: true,
|
|
requirePro: true
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
filteredTabs() {
|
|
return this.tabs.filter(tab => {
|
|
// 如果需要开发者权限但用户不是开发者，则隐藏
|
|
if (tab.requireDeveloper && !this.$team.pg.is_developer) {
|
|
return false;
|
|
}
|
|
|
|
// 如果需要专业版权限但用户不是专业版用户，则隐藏
|
|
if (tab.requirePro && !this.$team.pg.is_pro) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script> |