137 lines
4.5 KiB
Vue
137 lines
4.5 KiB
Vue
<script lang='ts' setup>
|
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
|
import { client, safeClient } from "@/api";
|
|
|
|
const props = defineProps<{
|
|
id: string;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>
|
|
{{ data?.edition.product.code }}
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<div>
|
|
<div class="flex items-center space-x-2">
|
|
<CryptocurrencyColorNuls class="text-3xl" />
|
|
|
|
<div class="mr-2">
|
|
<div class="text-lg font-semibold">
|
|
{{ data?.edition.product.name }}
|
|
</div>
|
|
<div class="text-xs text-gray-500 font-semibold">
|
|
{{ data?.edition.product.code }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 申购信息 -->
|
|
<div class="mt-6 space-y-4">
|
|
<!-- 申购状态 -->
|
|
<div class="bg-faint rounded-2xl p-4">
|
|
<div class="text-sm text-text-500 mb-2">
|
|
申购状态
|
|
</div>
|
|
<div class="text-lg font-semibold">
|
|
{{ t(`trade.subscribeStatus.${data?.status}`) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 申购信息详情 -->
|
|
<div class="bg-faint rounded-2xl p-4 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">申购数量</span>
|
|
<span class="text-base font-semibold">{{ data?.quantity }}</span>
|
|
</div>
|
|
<ui-divider />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">单价</span>
|
|
<span class="text-base font-semibold">${{ Number(data?.unitPrice).toFixed(2) }}</span>
|
|
</div>
|
|
<ui-divider />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">总金额</span>
|
|
<span class="text-lg font-bold text-primary">${{ Number(data?.totalAmount).toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 产品信息 -->
|
|
<div class="bg-faint rounded-2xl p-4 space-y-4">
|
|
<div class="text-base font-semibold mb-3">
|
|
产品信息
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">产品类别</span>
|
|
<span class="text-sm">{{ data?.edition.product.categoryId }}</span>
|
|
</div>
|
|
<ui-divider />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">产品编码</span>
|
|
<span class="text-sm">{{ data?.edition.product.code }}</span>
|
|
</div>
|
|
<ui-divider />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">产品名称</span>
|
|
<span class="text-sm">{{ data?.edition.product.name }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发行期信息 -->
|
|
<div v-if="data?.edition" class="bg-faint rounded-2xl p-4 space-y-4">
|
|
<div class="text-base font-semibold mb-3">
|
|
发行期信息
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">发行期编号</span>
|
|
<span class="text-sm">{{ data?.edition.id }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间信息 -->
|
|
<div class="bg-faint rounded-2xl p-4 space-y-4">
|
|
<div class="text-base font-semibold mb-3">
|
|
时间信息
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">申购时间</span>
|
|
<span class="text-sm">{{ new Date(data?.createdAt!).toLocaleString('zh-CN') }}</span>
|
|
</div>
|
|
<ui-divider />
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-text-500">更新时间</span>
|
|
<span class="text-sm">{{ new Date(data?.updatedAt!).toLocaleString('zh-CN') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
</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>
|