116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<script lang='ts' setup>
|
|
import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
|
|
import type { UserDepositOrderBody, UserDepositOrderData } from "@/api/types";
|
|
import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
|
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
|
import { client, safeClient } from "@/api";
|
|
import { DepositTypeEnum } from "@/api/enum";
|
|
|
|
const [query] = useResetRef<UserDepositOrderBody>({
|
|
limit: 20,
|
|
offset: 0,
|
|
});
|
|
|
|
const billData = ref<UserDepositOrderData[]>([]);
|
|
const isFinished = ref(false);
|
|
|
|
async function fetchRwaData() {
|
|
const { data } = await safeClient(() => client.api.deposit.orders.get({
|
|
query: query.value,
|
|
}));
|
|
billData.value.push(...(data.value?.data || []));
|
|
isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
|
|
}
|
|
function resetRwaData() {
|
|
query.value.offset = 0;
|
|
billData.value = [];
|
|
isFinished.value = false;
|
|
}
|
|
async function handleRefresh(event: RefresherCustomEvent) {
|
|
resetRwaData();
|
|
await fetchRwaData();
|
|
setTimeout(() => {
|
|
event.target.complete();
|
|
}, 500);
|
|
}
|
|
|
|
async function handleInfinite(event: InfiniteScrollCustomEvent) {
|
|
if (isFinished.value) {
|
|
event.target.complete();
|
|
event.target.disabled = true;
|
|
return;
|
|
}
|
|
query.value.offset! += query.value.limit!;
|
|
await fetchRwaData();
|
|
setTimeout(() => {
|
|
event.target.complete();
|
|
}, 500);
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
fetchRwaData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
|
|
<ion-refresher-content />
|
|
</ion-refresher>
|
|
|
|
<div class="space-y-3 antialiased my-3">
|
|
<div v-for="item in billData" :key="item.id">
|
|
<ion-grid>
|
|
<ion-row class="ion-align-items-center py-3">
|
|
<ion-col size="12" class="flex items-center mb-4">
|
|
<div class="mr-3">
|
|
<CryptocurrencyColorNuls class="text-md" />
|
|
</div>
|
|
<div class="text-xs font-semibold">
|
|
{{ item.assetCode }}
|
|
<ui-tag type="primary" size="small">
|
|
{{ $t(`recharge.status.${item.status}`) }}
|
|
</ui-tag>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="3" class="flex flex-col">
|
|
<div class="text-xs text-primary">
|
|
金额
|
|
</div>
|
|
<div class="text-sm font-bold">
|
|
{{ Number(item.amount).toFixed(2) }}
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="3" class="flex flex-col">
|
|
<div class="text-xs text-primary">
|
|
充值方式
|
|
</div>
|
|
<div class="text-xs font-bold">
|
|
{{ item.depositType }}
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="6" class="flex flex-col">
|
|
<div class="text-xs text-primary text-right">
|
|
创建时间
|
|
</div>
|
|
<div class="text-xs font-bold text-right">
|
|
{{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
</div>
|
|
|
|
<ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
|
|
<ion-infinite-scroll-content
|
|
loading-spinner="bubbles"
|
|
/>
|
|
</ion-infinite-scroll>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
ion-row {
|
|
border-bottom: 1px solid var(--ion-background-color-step-150);
|
|
}
|
|
</style>
|