feat: 更新 my-subscribe 详情页面，添加申购信息和产品信息展示，移除不再使用的 outlet 组件
This commit is contained in:
@@ -170,6 +170,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/trade-settings/my-subscribe/:id",
|
path: "/trade-settings/my-subscribe/:id",
|
||||||
|
props: true,
|
||||||
component: () => import("@/views/trade-settings/my-subscribe/detail.vue"),
|
component: () => import("@/views/trade-settings/my-subscribe/detail.vue"),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import { toastController } from "@ionic/vue";
|
|
||||||
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
||||||
import { client, safeClient } from "@/api";
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
@@ -8,26 +7,7 @@ const props = defineProps<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const model = useTemplateRef<ModalInstance>("model");
|
|
||||||
const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
|
const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
|
||||||
|
|
||||||
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: t("market.tradeRwa.subscribeSuccess"),
|
|
||||||
duration: 2000,
|
|
||||||
position: "bottom",
|
|
||||||
color: "success",
|
|
||||||
});
|
|
||||||
|
|
||||||
await toast.present();
|
|
||||||
model.value?.$el.dismiss();
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -56,16 +36,84 @@ async function handleSubscribe(val: number) {
|
|||||||
</div>
|
</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>
|
||||||
|
|
||||||
<!-- <ui-tabs size="small">
|
<!-- 申购信息详情 -->
|
||||||
<ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
|
<div class="bg-faint rounded-2xl p-4 space-y-4">
|
||||||
<RwaBase :data="data" />
|
<div class="flex justify-between items-center">
|
||||||
</ui-tab-pane>
|
<span class="text-sm text-text-500">申购数量</span>
|
||||||
<ui-tab-pane name="about" title="相关文档">
|
<span class="text-base font-semibold">{{ data?.quantity }}</span>
|
||||||
<RwaAbout :data="data" />
|
</div>
|
||||||
</ui-tab-pane>
|
<ui-divider />
|
||||||
</ui-tabs> -->
|
<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-content>
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
<script lang='ts' setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ion-page>
|
|
||||||
<ion-router-outlet />
|
|
||||||
</ion-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang='css' scoped></style>
|
|
||||||
Reference in New Issue
Block a user