feat: 添加法币充值页面,更新相关路由和组件,优化钱包卡片以支持充值功能
This commit is contained in:
71
src/views/deposit/fiat.vue
Normal file
71
src/views/deposit/fiat.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script lang='ts' setup>
|
||||
import type { DepositFiatBody } from "@/api/types";
|
||||
import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
|
||||
|
||||
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 isEmailValid = emailPattern.test(form.value.amount);
|
||||
|
||||
isEmailValid ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");
|
||||
|
||||
return isEmailValid;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<IonHeader>
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button />
|
||||
</ion-buttons>
|
||||
<ion-title>Fiat Recharge</ion-title>
|
||||
</ion-toolbar>
|
||||
</IonHeader>
|
||||
<IonContent :fullscreen="true" class="ion-padding">
|
||||
<div class="flex flex-col gap-10px">
|
||||
<ui-input-label
|
||||
label="Recharge bank card account"
|
||||
model-value="74321329321312"
|
||||
type="number"
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
|
||||
<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="Amount"
|
||||
placeholder="Enter the amount"
|
||||
type="number"
|
||||
error-text="Please enter a valid amount."
|
||||
@ion-input="validate($event.target.value as string)"
|
||||
@ion-blur="markTouched"
|
||||
/>
|
||||
</div>
|
||||
</IonContent>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
Reference in New Issue
Block a user