72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
||
<Dialog
|
||
:options="{ title: `结算未结清发票` }"
|
||
v-model="showDialog"
|
||
>
|
||
<template #body-content>
|
||
<div class="prose text-base">
|
||
您的账户有以下期间的未支付发票：
|
||
<ul class="pt-2">
|
||
<li
|
||
class="font-semibold"
|
||
v-for="invoice in $resources.unpaidInvoices.data"
|
||
>
|
||
{{
|
||
date(invoice.period_end).toLocaleString({
|
||
month: 'long',
|
||
year: 'numeric'
|
||
})
|
||
}}
|
||
-
|
||
{{
|
||
(invoice.currency === 'CNY' ? '¥ ' : '$ ') + invoice.amount_due
|
||
}}
|
||
</li>
|
||
</ul>
|
||
请在移除所有支付方式、切换到合作伙伴支付方式或停用账户之前，结算并支付这些发票。您可以<Link to="/billing/invoices/">在此</Link>查看发票详情并进行支付。支付可能需要最多2小时才能反映在您的发票上。
|
||
</div>
|
||
</template>
|
||
<template #actions>
|
||
<Button
|
||
variant="solid"
|
||
class="w-full"
|
||
@click="$resources.finalizeInvoices.submit()"
|
||
>
|
||
结算发票
|
||
</Button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { date } from '../../utils/format';
|
||
import { toast } from 'vue-sonner';
|
||
|
||
export default {
|
||
name: 'FinalizeInvoicesDialog',
|
||
props: {
|
||
msg: String
|
||
},
|
||
data() {
|
||
return {
|
||
showDialog: true
|
||
};
|
||
},
|
||
resources: {
|
||
finalizeInvoices: {
|
||
url: 'jcloud.api.billing.finalize_invoices',
|
||
onSuccess() {
|
||
this.showDialog = false;
|
||
toast.success('发票结算成功');
|
||
}
|
||
},
|
||
unpaidInvoices: {
|
||
url: 'jcloud.api.billing.unpaid_invoices',
|
||
auto: true
|
||
}
|
||
},
|
||
methods: {
|
||
date
|
||
}
|
||
};
|
||
</script> |