63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<script lang='ts' setup>
|
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
|
import type { EaringsSummaryData } from "@/api/types";
|
|
import { client, safeClient } from "@/api";
|
|
import Overview from "./components/overview.vue";
|
|
import Recent from "./components/recent.vue";
|
|
import RevenueSource from "./components/revenue-source.vue";
|
|
import Trend from "./components/trend.vue";
|
|
|
|
const { t } = useI18n();
|
|
const { vibrate } = useHaptics();
|
|
|
|
const data = ref<EaringsSummaryData | null>(null);
|
|
|
|
async function fetchData() {
|
|
const { data: fetchData } = await safeClient(client.api.earnings.summary.post({
|
|
now: new Date(),
|
|
}));
|
|
data.value = fetchData.value;
|
|
}
|
|
|
|
function handleRefresh(event: RefresherCustomEvent) {
|
|
vibrate();
|
|
fetchData().finally(() => {
|
|
event.target.complete();
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>{{ t("asset.revenue.monthlyRevenue") }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
|
|
<ion-refresher-content />
|
|
</ion-refresher>
|
|
|
|
<div class="container">
|
|
<Overview :data="data" />
|
|
<Trend />
|
|
<RevenueSource :data="data" />
|
|
<Recent :data="data" />
|
|
</div>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
.container {
|
|
--title-font-size: 16px;
|
|
}
|
|
</style>
|