77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<script lang='ts' setup>
|
||
import { toastController } from "@ionic/vue";
|
||
import { client, safeClient } from "@/api";
|
||
|
||
const props = defineProps<{ id: string }>();
|
||
const emit = defineEmits<{
|
||
close: [];
|
||
}>();
|
||
|
||
const { data } = safeClient(client.api.rwa.tokenization.lock_options.get({ query: { productId: props.id } }));
|
||
|
||
const selectedOption = ref<{ months: number; rewardRate: string } | null>(null);
|
||
|
||
async function handleSubmit() {
|
||
await safeClient(client.api.rwa.tokenization.locked.post({
|
||
lockMonths: selectedOption.value!.months,
|
||
productId: props.id,
|
||
}));
|
||
emit("close");
|
||
const toast = await toastController.create({
|
||
message: "锁仓成功",
|
||
duration: 2000,
|
||
position: "bottom",
|
||
color: "success",
|
||
});
|
||
await toast.present();
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ion-padding">
|
||
<div class="mb-4">
|
||
<h3 class="text-lg font-semibold mb-2">
|
||
选择锁仓期限
|
||
</h3>
|
||
<p class="text-sm text-text-500">
|
||
选择锁仓月数，锁仓期间可获得相应奖励
|
||
</p>
|
||
</div>
|
||
|
||
<div v-if="data?.lockOptions">
|
||
<ion-list lines="none">
|
||
<ion-radio-group v-model="selectedOption">
|
||
<ion-item
|
||
v-for="option in data.lockOptions"
|
||
:key="option.months"
|
||
class="bg-faint rounded-md mb-3"
|
||
>
|
||
<ion-radio :value="option" justify="space-between" color="primary">
|
||
<div>{{ option.months }} 个月 - {{ (Number(option.rewardRate) * 100).toFixed(2) }}% 收益</div>
|
||
</ion-radio>
|
||
</ion-item>
|
||
</ion-radio-group>
|
||
</ion-list>
|
||
</div>
|
||
|
||
<ui-empty v-else-if="!data || data.lockOptions.length === 0" description="暂无锁仓选项" />
|
||
|
||
<ion-button
|
||
expand="block"
|
||
color="primary"
|
||
:disabled="!selectedOption"
|
||
shape="round"
|
||
class="mt-6 h-12"
|
||
@click="handleSubmit"
|
||
>
|
||
确定
|
||
</ion-button>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang='css' scoped>
|
||
ion-item {
|
||
--background: transparent;
|
||
}
|
||
</style>
|