feat: 添加货币选择模态框，优化用户体验

src/views/deposit/fiat.vue

@@ -1,8 +1,11 @@
 <script lang='ts' setup>
 import type { DepositFiatBody } from "@/api/types";
-import { loadingController, toastController } from "@ionic/vue";
+import { loadingController, modalController, toastController } from "@ionic/vue";
+import { chevronForwardOutline } from "ionicons/icons";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
+import { getCryptoIcon } from "@/config/crypto";
+import SelectCurrency from "../withdraw/components/select-currency.vue";
 
 const { t } = useI18n();
 
@@ -30,6 +33,20 @@ function validate(value: string) {
 
   return isNumber;
 }
+async function openSelectCurrency() {
+  const modal = await modalController.create({
+    component: SelectCurrency,
+    componentProps: {
+      onSelect: (code: string) => {
+        form.value.assetCode = code;
+      },
+    },
+    breakpoints: [0, 0.8],
+    initialBreakpoint: 0.8,
+    handle: true,
+  });
+  await modal.present();
+}
 
 async function onSubmit() {
   const loading = await loadingController.create({
@@ -70,22 +87,19 @@ async function onSubmit() {
           disabled
         />
 
-        <ion-radio-group v-model="form.assetCode">
+        <ion-label class="block text-sm font-medium">
-          <ion-label class="text-sm">
+          {{ t("recharge.fiat.chooseCurrency") }}
-            {{ t("recharge.fiat.chooseCurrency") }}
+        </ion-label>
-          </ion-label>
+        <div
-          <ion-item v-for="item in AssetCodeEnum" :key="item">
+          class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
-            <ion-radio :value="item" justify="space-between">
+          @click="openSelectCurrency"
-              {{ item }}
+        >
-            </ion-radio>
+          <div class="flex items-center gap-3">
-          </ion-item>
+            <component :is="getCryptoIcon(form.assetCode)" class="w-8 h-8" />
-        </ion-radio-group>
+            <span class="text-base font-medium">{{ form.assetCode }}</span>
-
+          </div>
-        <!-- <ion-select v-model="form.assetCode" label="Select Currency" placeholder="Select One" label-placement="floating">
+          <ion-icon :icon="chevronForwardOutline" class="text-text-400" />
-          <ion-select-option v-for="item in AssetCodeEnum" :key="item" :value="item">
+        </div>
-            {{ item }}
-          </ion-select-option>
-        </ion-select> -->
 
         <ui-input-label
           ref="inputInstance"