jcloud/dashboard/src2/pages/BillingMarketplacePayouts.vue
2025-04-12 17:39:38 +08:00

105 lines
2.4 KiB
Vue

<template>
<div class="p-5">
<ObjectList :options="options" />
<Dialog
v-model="payoutDialog"
:options="{ size: '6xl', title: showPayout?.name }"
>
<template #body-content>
<template v-if="showPayout">
<div
v-if="showPayout.status === 'Empty'"
class="text-base text-gray-600"
>
无内容显示
</div>
<PayoutTable v-else :payoutId="showPayout.name" />
</template>
</template>
</Dialog>
</div>
</template>
<script>
import ObjectList from '../components/ObjectList.vue';
import PayoutTable from '../components/PayoutTable.vue';
export default {
name: 'BillingMarketplacePayouts',
props: ['tab'],
data() {
return {
payoutDialog: false,
showPayout: null
};
},
components: {
ObjectList,
PayoutTable
},
computed: {
options() {
return {
pagetype: 'Payout Order',
fields: [
'period_end',
'mode_of_payment',
'status',
'net_total_cny',
'net_total_usd'
],
filterControls: () => {
return [
{
type: 'select',
label: '状态',
class: !this.$isMobile ? 'w-36' : '',
fieldname: 'status',
options: [
{ label: '', value: '' },
{ label: '待结算', value: 'Draft' },
{ label: '已付款', value: 'Paid' },
{ label: '已结算', value: 'Commissioned' }
]
}
];
},
orderBy: 'creation desc',
columns: [
{
label: '日期',
fieldname: 'period_end',
format(value) {
return Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
}).format(new Date(value));
}
},
{ label: '支付方式', fieldname: 'mode_of_payment' },
{ label: '状态', fieldname: 'status', type: 'Badge' },
{
label: '总计',
fieldname: 'net_total_cny',
align: 'right',
format: (_, row) => {
let total = 0;
if (this.$team.pg.currency === 'CNY') {
total = row.net_total_cny + row.net_total_usd * 82;
} else {
total = row.net_total_cny / 82 + row.net_total_usd;
}
return this.$format.userCurrency(total);
}
}
],
onRowClick: row => {
this.showPayout = row;
this.payoutDialog = true;
}
};
}
}
};
</script>