Files
riwa-ionic/src/views/user/components/recharge-channel.vue

54 lines
1.5 KiB
Vue

<script lang='ts' setup>
import { toastController } from "@ionic/vue";
const emit = defineEmits<{
(e: "close"): void;
}>();
const { t } = useI18n();
const router = useRouter();
async function handleCryptoRecharge() {
emit("close");
const toast = await toastController.create({
message: t("user.comingSoon"),
duration: 2000,
position: "top",
color: "primary",
});
await toast.present();
}
async function handleFiatRecharge() {
emit("close");
router.push("/deposit/fiat");
}
</script>
<template>
<div class="w-full h-50 p-5 flex justify-center flex-col gap-7.5">
<div class="flex items-center gap-2.5" @click="handleCryptoRecharge">
<i-ic-baseline-downloading class="text-2xl" />
<ion-label class="flex-1">
<h2>{{ t("recharge.channel.chainRecharge") }}</h2>
<p class="w-[80%] text-sm">
{{ t("recharge.channel.chainRechargeDesc") }}
</p>
</ion-label>
<i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
</div>
<div class="flex items-center gap-2.5" @click="handleFiatRecharge">
<i-ic-baseline-data-saver-off class="text-2xl" />
<ion-label class="flex-1">
<h2>{{ t("recharge.channel.fiatCurrency") }}</h2>
<p class="w-[80%] text-sm">
{{ t("recharge.channel.fiatCurrencyDesc") }}
</p>
</ion-label>
<i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
</div>
</div>
</template>
<style lang='css' scoped></style>