feat: 添加法币充值页面,更新相关路由和组件,优化钱包卡片以支持充值功能

This commit is contained in:
2025-12-14 00:52:28 +07:00
parent 2c4df90b31
commit f78dfa87ed
9 changed files with 123 additions and 14 deletions

View 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>