125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
Vue
<script setup>
|
|
import { createResource } from 'jingrow-ui';
|
|
|
|
const props = defineProps({
|
|
payoutOrderName: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const payout = createResource({
|
|
url: 'jcloud.api.marketplace.get_payout_details',
|
|
auto: true,
|
|
params: {
|
|
name: props.payoutOrderName
|
|
}
|
|
});
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Button v-if="payout.loading" :loading="true">Loading</Button>
|
|
|
|
<div v-if="payout.data">
|
|
<table class="text w-full text-sm">
|
|
<thead>
|
|
<tr class="text-gray-600">
|
|
<th class="border-b py-3 pr-2 text-left font-normal">
|
|
Description
|
|
</th>
|
|
<th
|
|
class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
|
|
>
|
|
Rate
|
|
</th>
|
|
<th
|
|
class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
|
|
>
|
|
Total Amount
|
|
</th>
|
|
<th
|
|
class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
|
|
>
|
|
Fee
|
|
</th>
|
|
<th
|
|
class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
|
|
>
|
|
Commission
|
|
</th>
|
|
<th class="border-b py-3 pr-2 text-right font-normal">
|
|
Net Amount
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="(row, i) in payout.data.usd_items" :key="row.idx">
|
|
<td class="border-b py-3 pr-2">
|
|
{{ row.description || row.document_name }} -
|
|
<strong class="font-semibold">{{ row.site }}</strong>
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
${{ row.rate }} x {{ row.quantity }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
${{ row.total_amount }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
${{ round(row.gateway_fee, 2) }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
${{ round(row.commission, 2) }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
${{ round(row.net_amount, 2) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="pt-4 pb-2 pr-2 text-right font-semibold">Grand Total</td>
|
|
<td
|
|
class="whitespace-nowrap pt-4 pb-2 pr-2 text-right font-semibold"
|
|
>
|
|
${{ round(payout.data.net_total_usd, 2) }} + ¥{{
|
|
round(payout.data.net_total_cny, 2)
|
|
}}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
<tbody>
|
|
<tr v-for="(row, i) in payout.data.cny_items" :key="row.idx">
|
|
<td class="border-b py-3 pr-2">
|
|
{{ row.description || row.document_name }} -
|
|
<strong class="font-semibold">{{ row.site }}</strong>
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
¥{{ row.rate }} x {{ row.quantity }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
¥{{ round(row.total_amount, 2) }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
¥{{ round(row.gateway_fee, 2) }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
¥{{ round(row.commission, 2) }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
¥{{ round(row.net_amount, 2) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<ErrorMessage :message="payout.error" />
|
|
</div>
|
|
</template>
|