83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<script lang='ts' setup>
|
||
import type { RwaData } from "@/api/types";
|
||
import { cartOutline } from "ionicons/icons";
|
||
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
||
import { client, safeClient } from "@/api";
|
||
|
||
const router = useRouter();
|
||
|
||
const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
|
||
query: {
|
||
limit: 4,
|
||
},
|
||
}));
|
||
|
||
function handleClick(item: RwaData) {
|
||
router.push(`/trade-rwa/${item.id}`);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="text-md font-semibold">
|
||
RWA产品
|
||
</div>
|
||
<template v-if="data?.data.length === 0">
|
||
<ui-empty />
|
||
</template>
|
||
<template v-else>
|
||
<div v-for="item in data?.data" :key="item.id" class="card" @click="handleClick(item)">
|
||
<div class="flex justify-between items-center mb-2 h-10">
|
||
<div class="flex items-center">
|
||
<CryptocurrencyColorNuls class="text-2xl inline-block mr-2" />
|
||
<div class="flex items-center gap-2">
|
||
<div class="text-md font-medium">
|
||
{{ item.product.name }}/{{ item.product.code }}
|
||
</div>
|
||
<ui-tag size="small" type="secondary">
|
||
{{ item.product.category?.name }}
|
||
</ui-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<ion-button size="small">
|
||
<ion-icon slot="start" :icon="cartOutline" />
|
||
<span>购 入</span>
|
||
</ion-button>
|
||
</div>
|
||
|
||
<div class="text-sm font-semibold mb-2 text-text-300">
|
||
阶段：{{ item.editionName }}
|
||
</div>
|
||
|
||
<div class="text-2xl font-bold mb-2">
|
||
{{ formatAmountWithSplit(item.totalSupply) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang='css' scoped>
|
||
.card {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-top: 12px;
|
||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
|
||
background-color: var(--ion-color-faint);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.card {
|
||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
|
||
}
|
||
}
|
||
ion-button {
|
||
--padding-start: 12px;
|
||
--padding-end: 12px;
|
||
--padding-top: 8px;
|
||
--padding-bottom: 8px;
|
||
--border-radius: 8px;
|
||
}
|
||
</style>
|