feat: 添加锁仓选项组件并更新持仓页面逻辑
This commit is contained in:
13
src/views/market/components/lock-option.vue
Normal file
13
src/views/market/components/lock-option.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ion-padding">
|
||||
<ion-button expand="block" color="primary">
|
||||
确定
|
||||
</ion-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
@@ -1,8 +1,10 @@
|
||||
<script lang='ts' setup>
|
||||
import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
|
||||
import type { HoldingItem } from "@/api/types";
|
||||
import { alertController, modalController } from "@ionic/vue";
|
||||
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
||||
import { client, safeClient } from "@/api";
|
||||
import LockOption from "./lock-option.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
@@ -46,6 +48,39 @@ function getStatusText(status: HoldingItem["status"]) {
|
||||
};
|
||||
return statusMap[status];
|
||||
}
|
||||
async function handleTokenized(item: HoldingItem) {
|
||||
const alert = await alertController.create({
|
||||
header: "资产化确认",
|
||||
message: "将持仓转换为可交易资产(失去分红权),是否继续?",
|
||||
buttons: [
|
||||
{
|
||||
text: "取消",
|
||||
role: "cancel",
|
||||
},
|
||||
{
|
||||
text: "确认",
|
||||
role: "destructive",
|
||||
handler: async () => {
|
||||
await safeClient(client.api.rwa.tokenization.immediate.post({ productId: item.productId }));
|
||||
item.status = "tokenized";
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
await alert.present();
|
||||
}
|
||||
async function handleLocked(item: HoldingItem) {
|
||||
const modal = await modalController.create({
|
||||
component: LockOption,
|
||||
componentProps: {
|
||||
id: item.productId,
|
||||
},
|
||||
initialBreakpoint: 0.35,
|
||||
breakpoints: [0, 0.35],
|
||||
handle: true,
|
||||
});
|
||||
await modal.present();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchHoldings();
|
||||
@@ -78,7 +113,6 @@ onMounted(() => {
|
||||
{{ getStatusText(item.status) }}
|
||||
</ion-badge>
|
||||
</div>
|
||||
<!-- operations -->
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 mb-2">
|
||||
@@ -104,8 +138,17 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<div class="pt-2 flex items-center">
|
||||
<span class="text-[11px] text-(--ion-text-color-step-500)">{{ useDateFormat(item.createdAt, 'YYYY/MM/DD HH:mm') }}</span>
|
||||
|
||||
<div v-if="item.status === 'active'" class="flex-1 text-right space-x-2">
|
||||
<ion-button size="small" @click="handleTokenized(item)">
|
||||
资产化
|
||||
</ion-button>
|
||||
<ion-button size="small" @click="handleLocked(item)">
|
||||
立即锁仓
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,12 +11,11 @@ import RwaOrders from "./components/rwa-orders.vue";
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true" class="ion-padding">
|
||||
<ui-tabs size="small">
|
||||
<ui-tab-pane title="数字化产品" name="rwa">
|
||||
<RwaOrders />
|
||||
</ui-tab-pane>
|
||||
<!-- <ui-tabs size="small">
|
||||
<ui-tab-pane title="数字化产品" name="rwa" />
|
||||
<ui-tab-pane title="代币化产品" name="tokenized" />
|
||||
</ui-tabs>
|
||||
</ui-tabs> -->
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user