148 lines
4.1 KiB
Vue
148 lines
4.1 KiB
Vue
<script lang='ts' setup>
|
|
import { toastController } from "@ionic/vue";
|
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
|
import { client, safeClient } from "@/api";
|
|
|
|
const props = defineProps<{
|
|
id: string;
|
|
}>();
|
|
|
|
const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
|
|
const model = useTemplateRef<ModalInstance>("model");
|
|
|
|
async function handleSubscribe(val: number) {
|
|
await safeClient(client.api.rwa.subscription.apply.post({
|
|
editionId: props.id,
|
|
quantity: String(val),
|
|
}));
|
|
const toast = await toastController.create({
|
|
message: "申购成功",
|
|
duration: 2000,
|
|
position: "bottom",
|
|
color: "success",
|
|
});
|
|
|
|
await toast.present();
|
|
model.value?.$el.dismiss();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="ui-toolbar">
|
|
<ion-back-button slot="start" text="" />
|
|
<ion-title>
|
|
{{ data?.product.code }}
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
<ui-tabs size="small" class="px-4">
|
|
<ui-tab-pane name="overview" title="Overview" />
|
|
<ui-tab-pane name="moment" title="Moment" />
|
|
</ui-tabs>
|
|
</ion-header>
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<div class="mt-5">
|
|
<div class="flex items-center space-x-2">
|
|
<CryptocurrencyColorNuls class="text-2xl" />
|
|
<div class="mr-2 text-lg font-semibold">
|
|
{{ data?.product.name }}
|
|
</div>
|
|
</div>
|
|
<ion-grid class="mt-5 text-sm space-y-5">
|
|
<ion-row>
|
|
<ion-col>
|
|
<div class="label">
|
|
产品编号
|
|
</div>
|
|
<div>{{ data?.product.code }}</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="label">
|
|
估值
|
|
</div>
|
|
<div>${{ formatAmount(data?.product.estimatedValue) }}</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<div class="label">
|
|
单价
|
|
</div>
|
|
<div>${{ formatAmount(data?.unitPrice) }}</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="label">
|
|
总发行量
|
|
</div>
|
|
<div>{{ Number(data?.totalSupply) }}份</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<div class="label">
|
|
每人限量
|
|
</div>
|
|
<div>{{ Number(data?.perUserLimit) }}份</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="label">
|
|
发行时间
|
|
</div>
|
|
<div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<div class="label">
|
|
认购截止时间
|
|
</div>
|
|
<div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<div class="mt-5">
|
|
<div class="font-semibold">
|
|
About
|
|
</div>
|
|
<div class="text-xs mt-2">
|
|
{{ data?.product.description || 'No description available.' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
|
|
<ion-footer>
|
|
<ion-toolbar class="ion-padding-horizontal ui-toolbar">
|
|
<div class="flex justify-center my-2 gap-5">
|
|
<ion-button id="open-modal" shape="round" expand="block" color="success">
|
|
申购
|
|
</ion-button>
|
|
|
|
<ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
|
|
<subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
|
|
</ion-modal>
|
|
</div>
|
|
</ion-toolbar>
|
|
</ion-footer>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.label {
|
|
@apply text-gray-500 mb-1;
|
|
}
|
|
|
|
ion-button {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
}
|
|
|
|
ion-button::part(native) {
|
|
min-height: 40px;
|
|
}
|
|
</style>
|