99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script lang='ts' setup>
|
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
|
import { client, safeClient } from "@/api";
|
|
import { TradeTypeEnum } from "@/api/enum";
|
|
import About from "./components/about.vue";
|
|
import Base from "./components/base.vue";
|
|
import Market from "./components/market.vue";
|
|
|
|
const props = defineProps<{
|
|
id: string;
|
|
}>();
|
|
|
|
const { data } = safeClient(client.api.rwa.tokenization.tradable_products({ id: props.id }).get());
|
|
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
|
|
function gotoTrade(mode: TradeTypeEnum) {
|
|
router.push(`/layout/trade?mode=${mode}&symbol=${data.value?.asset?.tradingPairsAsBase[0].symbol}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ui-back-button slot="start" text="" />
|
|
<ion-title>
|
|
{{ data?.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?.product?.name }}
|
|
</div>
|
|
<div class="text-xs text-gray-500 font-semibold">
|
|
{{ data?.product?.category?.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="flex items-center my-3" @click="gotoEdit">
|
|
<IcSharpEditNote class="inline-block text-xl mr-1 text-text-500" />
|
|
<div class="text-xs">
|
|
编辑资产
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<ui-tabs size="small" class="my-3">
|
|
<ui-tab-pane name="market" title="行情">
|
|
<Market :data="data" />
|
|
</ui-tab-pane>
|
|
<ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
|
|
<Base :data="data" />
|
|
</ui-tab-pane>
|
|
<ui-tab-pane name="about" title="相关文档">
|
|
<About :data="data" />
|
|
</ui-tab-pane>
|
|
</ui-tabs>
|
|
</ion-content>
|
|
|
|
<ion-footer>
|
|
<ion-toolbar class="ion-padding-horizontal ion-toolbar">
|
|
<div class="flex justify-center my-2 gap-5">
|
|
<ion-button shape="round" expand="block" color="success" @click="gotoTrade(TradeTypeEnum.BUY)">
|
|
买入
|
|
</ion-button>
|
|
<ion-button shape="round" expand="block" color="danger" @click="gotoTrade(TradeTypeEnum.SELL)">
|
|
卖出
|
|
</ion-button>
|
|
</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>
|