feat: 更新转账和提现组件的样式,统一背景色为淡色,优化用户界面

This commit is contained in:
2026-01-13 19:11:02 +07:00
parent 4a535dc871
commit 25cf78276b
2 changed files with 32 additions and 18 deletions

View File

@@ -171,7 +171,7 @@ function getAccountTypeName(type: AccountType) {
选择币种 选择币种
</ion-label> </ion-label>
<div <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" @click="openSelectCurrency"
> >
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@@ -189,7 +189,7 @@ function getAccountTypeName(type: AccountType) {
<div class="relative flex flex-col gap-3"> <div class="relative flex flex-col gap-3">
<Field name="fromAccount"> <Field name="fromAccount">
<template #default="{ value }"> <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> <span class="text-xs text-text-500">{{ t('transfer.from') }}</span>
<div class="pt-2"> <div class="pt-2">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span> <span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
@@ -211,7 +211,7 @@ function getAccountTypeName(type: AccountType) {
<Field name="toAccount"> <Field name="toAccount">
<template #default="{ value }"> <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> <span class="text-xs text-text-500">{{ t('transfer.to') }}</span>
<div class="pt-2"> <div class="pt-2">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span> <span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>

View File

@@ -6,6 +6,7 @@ import { loadingController, modalController, toastController } from "@ionic/vue"
import { ErrorMessage, Field, Form } from "vee-validate"; import { ErrorMessage, Field, Form } from "vee-validate";
import { client, safeClient } from "@/api"; import { client, safeClient } from "@/api";
import { AssetCodeEnum, ChainEnum, WithdrawMethodEnum } from "@/api/enum"; import { AssetCodeEnum, ChainEnum, WithdrawMethodEnum } from "@/api/enum";
import { getCryptoIcon } from "@/config/crypto";
import SelectBankAccount from "./components/select-bank-account.vue"; import SelectBankAccount from "./components/select-bank-account.vue";
import SelectCurrency from "./components/select-currency.vue"; import SelectCurrency from "./components/select-currency.vue";
import { createWithdrawSchema } from "./rules"; import { createWithdrawSchema } from "./rules";
@@ -106,12 +107,19 @@ async function onSubmit(values: GenericObject) {
<div> <div>
<Field name="assetCode"> <Field name="assetCode">
<template #default="{ value }"> <template #default="{ value }">
<ion-label class="text-sm"> <ion-label class="block text-sm font-medium mb-2">
{{ t("withdraw.chooseCurrency") }} 选择币种
</ion-label> </ion-label>
<ion-item button class="ion-no-border" @click="openSelectCurrency"> <div
<ion-label>{{ value }}</ion-label> class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
</ion-item> @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> </template>
</Field> </Field>
<ErrorMessage name="assetCode" class="text-red-500 text-xs mt-1" /> <ErrorMessage name="assetCode" class="text-red-500 text-xs mt-1" />
@@ -139,17 +147,23 @@ async function onSubmit(values: GenericObject) {
<template #default="{ value: withdrawMethod }"> <template #default="{ value: withdrawMethod }">
<div v-if="withdrawMethod === WithdrawMethodEnum.BANK"> <div v-if="withdrawMethod === WithdrawMethodEnum.BANK">
<Field name="bankAccountId"> <Field name="bankAccountId">
<ion-label class="text-sm"> <template #default>
<ion-label class="block text-sm font-medium mb-2">
{{ t('withdraw.bankAccountId') }} {{ t('withdraw.bankAccountId') }}
</ion-label> </ion-label>
<ion-item button class="ion-no-border" @click="openSelectBankAccount"> <div
<template v-if="currentBankAccount"> 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]"> <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> <span class="text-white">{{ currentBankAccount?.bankCode }}</span>
</div> </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> </template>
</ion-item>
</Field> </Field>
<ErrorMessage name="bankAccountId" class="text-red-500 text-xs mt-1" /> <ErrorMessage name="bankAccountId" class="text-red-500 text-xs mt-1" />
</div> </div>