107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<script lang='ts' setup>
|
|
import type { DepositFiatBody } from "@/api/types";
|
|
import { toastController } from "@ionic/vue";
|
|
import { client } from "@/api";
|
|
import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
|
|
|
|
const { t } = useI18n();
|
|
|
|
const form = ref<DepositFiatBody>({
|
|
amount: "",
|
|
assetCode: AssetCodeEnum.USDT,
|
|
paymentChannel: PaymentChannelEnum.FIAT,
|
|
});
|
|
const inputInstance = useTemplateRef<InputInstance>("inputInstance");
|
|
|
|
function markTouched() {
|
|
inputInstance.value?.$el.classList.add("ion-touched");
|
|
}
|
|
function validate(value: string) {
|
|
inputInstance.value?.$el.classList.remove("ion-valid");
|
|
inputInstance.value?.$el.classList.remove("ion-invalid");
|
|
|
|
if (value === "") {
|
|
return false;
|
|
}
|
|
const isNumber = numberPattern.test(value);
|
|
|
|
isNumber ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");
|
|
|
|
return isNumber;
|
|
}
|
|
|
|
async function onSubmit() {
|
|
const { data, status } = await client.api.deposit.fiat.post(form.value);
|
|
if (status === 200) {
|
|
const toast = await toastController.create({
|
|
message: t("recharge.fiat.submitSuccess"),
|
|
duration: 1500,
|
|
position: "bottom",
|
|
});
|
|
|
|
await toast.present();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<IonHeader>
|
|
<ion-toolbar class="ui-toolbar">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button />
|
|
</ion-buttons>
|
|
<ion-title>{{ t("recharge.fiat.title") }}</ion-title>
|
|
</ion-toolbar>
|
|
</IonHeader>
|
|
<IonContent :fullscreen="true" class="ion-padding">
|
|
<div class="flex flex-col gap-5">
|
|
<ui-input-label
|
|
:label="t('recharge.fiat.bankAccount')"
|
|
model-value="74321329321312"
|
|
type="number"
|
|
readonly
|
|
disabled
|
|
/>
|
|
|
|
<ion-radio-group v-model="form.assetCode">
|
|
<ion-label class="text-sm">
|
|
{{ t("recharge.fiat.chooseCurrency") }}
|
|
</ion-label>
|
|
<ion-item v-for="item in AssetCodeEnum" :key="item">
|
|
<ion-radio :value="item" justify="space-between">
|
|
{{ item }}
|
|
</ion-radio>
|
|
</ion-item>
|
|
</ion-radio-group>
|
|
|
|
<!-- <ion-select v-model="form.assetCode" label="Select Currency" placeholder="Select One" label-placement="floating">
|
|
<ion-select-option v-for="item in AssetCodeEnum" :key="item" :value="item">
|
|
{{ item }}
|
|
</ion-select-option>
|
|
</ion-select> -->
|
|
|
|
<ui-input-label
|
|
ref="inputInstance"
|
|
v-model="form.amount"
|
|
:label="t('recharge.fiat.amount')"
|
|
:placeholder="t('recharge.fiat.enterAmount')"
|
|
type="number"
|
|
inputmode="numeric"
|
|
:error-text="t('recharge.fiat.validAmountError')"
|
|
@ion-input="validate($event.target.value as string)"
|
|
@ion-blur="markTouched"
|
|
/>
|
|
|
|
<ion-note>{{ t("recharge.fiat.note") }}</ion-note>
|
|
|
|
<ion-button expand="block" shape="round" color="success" @click="onSubmit">
|
|
{{ t("recharge.fiat.submit") }}
|
|
</ion-button>
|
|
</div>
|
|
</IonContent>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|