123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col rounded-lg text-base text-gray-900 shadow">
|
|
<div class="flex flex-col gap-2.5 px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="text-lg font-semibold">账单费用</div>
|
|
<div class="text-gray-700">
|
|
<span>下次扣款日期 — </span>
|
|
<span>{{ currentMonthEnd() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2 text-gray-700">
|
|
<i-lucide-credit-card class="h-4 w-4" />
|
|
<div>
|
|
<span>当前账单金额为 </span>
|
|
<span class="font-medium text-gray-900">
|
|
{{ currency }} {{ currentBillingAmount?.toFixed(2) || '0.00' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button label="查看账单明细" @click="showInvoiceDialog = true" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="unpaidAmount.data"
|
|
class="m-1.5 flex items-center justify-between rounded-lg bg-gray-50 px-2.5 py-2"
|
|
>
|
|
<div class="flex h-7 items-center gap-2 text-gray-800">
|
|
<i-lucide-receipt class="h-4 w-4" />
|
|
<div>
|
|
<span>未支付金额为 </span>
|
|
<span>{{ currency }} {{ unpaidAmount.data?.toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button variant="solid" label="立即支付" @click="payNow" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AddPrepaidCreditsDialog
|
|
v-if="showAddPrepaidCreditsDialog"
|
|
v-model="showAddPrepaidCreditsDialog"
|
|
@success="upcomingInvoice.reload()"
|
|
/>
|
|
<UpcomingInvoiceDialog v-model="showInvoiceDialog" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import AddPrepaidCreditsDialog from './AddPrepaidCreditsDialog.vue';
|
|
import UpcomingInvoiceDialog from './UpcomingInvoiceDialog.vue';
|
|
import { Button, createResource } from 'jingrow-ui';
|
|
import { ref, computed, inject } from 'vue';
|
|
import { confirmDialog } from '../../utils/components';
|
|
import router from '../../router';
|
|
|
|
const team = inject('team');
|
|
const { currentBillingAmount, upcomingInvoice, unpaidInvoices } =
|
|
inject('billing');
|
|
|
|
const showAddPrepaidCreditsDialog = ref(false);
|
|
const showInvoiceDialog = ref(false);
|
|
|
|
const currency = computed(() => (team.pg.currency == 'CNY' ? '¥' : '$'));
|
|
|
|
const unpaidAmount = createResource({
|
|
url: 'jcloud.api.billing.total_unpaid_amount',
|
|
cache: 'unpaidAmount',
|
|
auto: true
|
|
});
|
|
|
|
const currentMonthEnd = () => {
|
|
const date = new Date();
|
|
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
return lastDay.toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
function payNow() {
|
|
team.pg.payment_mode == 'Prepaid Credits'
|
|
? (showAddPrepaidCreditsDialog.value = true)
|
|
: payUnpaidInvoices();
|
|
}
|
|
|
|
function payUnpaidInvoices() {
|
|
let _unpaidInvoices = unpaidInvoices.data;
|
|
if (_unpaidInvoices.length > 1) {
|
|
if (team.pg.payment_mode === 'Prepaid Credits') {
|
|
showAddPrepaidCreditsDialog.value = true;
|
|
} else {
|
|
confirmDialog({
|
|
title: '多张未支付发票',
|
|
message:
|
|
'您有多张未支付发票。请从发票页面支付它们',
|
|
primaryAction: {
|
|
label: '前往发票',
|
|
variant: 'solid',
|
|
onClick: ({ hide }) => {
|
|
router.push({ name: 'BillingInvoices' });
|
|
hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
let invoice = _unpaidInvoices;
|
|
if (invoice.stripe_invoice_url && team.pg.payment_mode === 'Card') {
|
|
window.open(
|
|
`/api/action/jcloud.api.client.run_pg_method?dt=Invoice&dn=${invoice.name}&method=stripe_payment_url`
|
|
);
|
|
} else {
|
|
showAddPrepaidCreditsDialog.value = true;
|
|
}
|
|
}
|
|
}
|
|
</script> |