feat: 更新转账和提现组件的样式,统一背景色为淡色,优化用户界面
This commit is contained in:
@@ -171,7 +171,7 @@ function getAccountTypeName(type: AccountType) {
|
||||
选择币种
|
||||
</ion-label>
|
||||
<div
|
||||
class="flex items-center justify-between bg-text-900 rounded-2xl p-4 cursor-pointer"
|
||||
class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
|
||||
@click="openSelectCurrency"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -189,7 +189,7 @@ function getAccountTypeName(type: AccountType) {
|
||||
<div class="relative flex flex-col gap-3">
|
||||
<Field name="fromAccount">
|
||||
<template #default="{ value }">
|
||||
<div class="flex flex-col bg-text-900 rounded-2xl p-3">
|
||||
<div class="flex flex-col bg-faint rounded-2xl p-3">
|
||||
<span class="text-xs text-text-500">{{ t('transfer.from') }}</span>
|
||||
<div class="pt-2">
|
||||
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
|
||||
@@ -211,7 +211,7 @@ function getAccountTypeName(type: AccountType) {
|
||||
|
||||
<Field name="toAccount">
|
||||
<template #default="{ value }">
|
||||
<div class="flex flex-col bg-text-900 rounded-2xl p-3">
|
||||
<div class="flex flex-col bg-faint rounded-2xl p-3">
|
||||
<span class="text-xs text-text-500">{{ t('transfer.to') }}</span>
|
||||
<div class="pt-2">
|
||||
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { loadingController, modalController, toastController } from "@ionic/vue"
|
||||
import { ErrorMessage, Field, Form } from "vee-validate";
|
||||
import { client, safeClient } from "@/api";
|
||||
import { AssetCodeEnum, ChainEnum, WithdrawMethodEnum } from "@/api/enum";
|
||||
import { getCryptoIcon } from "@/config/crypto";
|
||||
import SelectBankAccount from "./components/select-bank-account.vue";
|
||||
import SelectCurrency from "./components/select-currency.vue";
|
||||
import { createWithdrawSchema } from "./rules";
|
||||
@@ -106,12 +107,19 @@ async function onSubmit(values: GenericObject) {
|
||||
<div>
|
||||
<Field name="assetCode">
|
||||
<template #default="{ value }">
|
||||
<ion-label class="text-sm">
|
||||
{{ t("withdraw.chooseCurrency") }}
|
||||
<ion-label class="block text-sm font-medium mb-2">
|
||||
选择币种
|
||||
</ion-label>
|
||||
<ion-item button class="ion-no-border" @click="openSelectCurrency">
|
||||
<ion-label>{{ value }}</ion-label>
|
||||
</ion-item>
|
||||
<div
|
||||
class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
|
||||
@click="openSelectCurrency"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<component :is="getCryptoIcon(value)" class="w-8 h-8" />
|
||||
<span class="text-base font-medium">{{ value }}</span>
|
||||
</div>
|
||||
<ion-icon name="chevron-forward-outline" class="text-text-400" />
|
||||
</div>
|
||||
</template>
|
||||
</Field>
|
||||
<ErrorMessage name="assetCode" class="text-red-500 text-xs mt-1" />
|
||||
@@ -139,17 +147,23 @@ async function onSubmit(values: GenericObject) {
|
||||
<template #default="{ value: withdrawMethod }">
|
||||
<div v-if="withdrawMethod === WithdrawMethodEnum.BANK">
|
||||
<Field name="bankAccountId">
|
||||
<ion-label class="text-sm">
|
||||
<template #default>
|
||||
<ion-label class="block text-sm font-medium mb-2">
|
||||
{{ t('withdraw.bankAccountId') }}
|
||||
</ion-label>
|
||||
<ion-item button class="ion-no-border" @click="openSelectBankAccount">
|
||||
<template v-if="currentBankAccount">
|
||||
<div
|
||||
class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
|
||||
@click="openSelectBankAccount"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-md mr-2 flex items-center justify-center text-white font-bold text-xs shadow-sm bg-[#0F5AA6]">
|
||||
<span class="text-white">{{ currentBankAccount?.bankCode }}</span>
|
||||
</div>
|
||||
<ion-label>{{ currentBankAccount?.bankName }}</ion-label>
|
||||
<span class="text-base font-medium">{{ currentBankAccount?.bankName }}</span>
|
||||
</div>
|
||||
<ion-icon name="chevron-forward-outline" class="text-text-400" />
|
||||
</div>
|
||||
</template>
|
||||
</ion-item>
|
||||
</Field>
|
||||
<ErrorMessage name="bankAccountId" class="text-red-500 text-xs mt-1" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user