root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新银行卡管理功能，添加支持银行数据，优化表单交互和样式

Browse Source
This commit is contained in:
Seven
2025-12-17 03:59:47 +07:00
parent 1cfa5e8618
commit ec9ceb31ba
13 changed files with 49 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/types.ts
View File

@@ -31,3 +31,5 @@ export type BankAccountsData = Treaty.Data<typeof client.api.bank_account.get>;
export type BankAccountBody = Parameters<typeof client.api.bank_account.post>[0];
export type BankAccountData = Treaty.Data<typeof client.api.bank_account.post>;
export type SupportBanksData = Treaty.Data<typeof client.api.bank_account.banks.get>;

18
src/store/wallet.ts
View File

@@ -1,24 +1,24 @@
import type { BalancesData, BankAccountsData } from "@/api/types";
import type { BalancesData, BankAccountsData, SupportBanksData } from "@/api/types";
import { defineStore } from "pinia";
import { client, safeClient } from "@/api";
interface State {
balances: BalancesData;
bankAccounts: BankAccountsData["data"];
supportBanks: SupportBanksData["data"];
}
export const useWalletStore = defineStore("wallet", () => {
const state = reactive<State>({
balances: [],
bankAccounts: [],
supportBanks: [],
});
const balances = computed(() => state.balances);
const bankAccounts = computed(() => state.bankAccounts);
async function initializeWallet() {
updateBalances();
updateBankAccounts();
updateSupportBanks();
}
async function updateBalances(data?: BalancesData) {
@@ -39,12 +39,16 @@ export const useWalletStore = defineStore("wallet", () => {
state.bankAccounts = bankAccounts.value?.data || [];
}
async function updateSupportBanks() {
const { data: banks } = await safeClient(() => client.api.bank_account.banks.get(), { silent: true });
state.supportBanks = banks.value?.data || [];
}
return {
state,
balances,
bankAccounts,
...toRefs(state),
initializeWallet,
updateBalances,
updateBankAccounts,
updateSupportBanks,
};
});

2
src/theme/variables.css
View File

@@ -116,6 +116,8 @@ http://ionicframework.com/docs/theming/ */
--ui-input-background: #efefef;
--ui-input-color: #222222;
--ui-background-primary: linear-gradient(180deg, #615fff 0%, #9810fa 100%);
}
@media (prefers-color-scheme: dark) {

1
src/utils/ionic-helper.ts
View File

@@ -1,3 +1,4 @@
export type PageInstance = InstanceType<typeof import("@ionic/vue").IonPage>;
export type InputInstance = InstanceType<typeof import("@ionic/vue").IonInput>;
export type ModalInstance = InstanceType<typeof import("@ionic/vue").IonModal>;
export type FormInstance = InstanceType<typeof import("vee-validate").Form>;

40
src/views/trade-settings/bank-management/add.vue
View File

@@ -1,6 +1,6 @@
<script lang='ts' setup>
import type { GenericObject } from "vee-validate";
import { toastController } from "@ionic/vue";
import { SelectChangeEventDetail, toastController } from "@ionic/vue";
import { toTypedSchema } from "@vee-validate/yup";
import { informationCircle, shieldCheckmark } from "ionicons/icons";
import { ErrorMessage, Field, Form } from "vee-validate";
@@ -11,18 +11,9 @@ const { t } = useI18n();
const router = useRouter();
// 银行列表数据
const bankList = [
{ code: "BOC", name: "中国银行" },
{ code: "CMB", name: "招商银行" },
{ code: "ICBC", name: "工商银行" },
{ code: "CCB", name: "建设银行" },
{ code: "ABC", name: "农业银行" },
{ code: "BOCOM", name: "交通银行" },
{ code: "PSBC", name: "邮储银行" },
{ code: "CITIC", name: "中信银行" },
{ code: "CEB", name: "光大银行" },
{ code: "CMBC", name: "民生银行" },
];
const walletStore = useWalletStore();
const { supportBanks } = storeToRefs(walletStore);
const formInst = useTemplateRef<FormInstance>("formInst");
// 表单验证 Schema
const schema = toTypedSchema(
@@ -37,11 +28,7 @@ const schema = toTypedSchema(
async function handleSubmit(values: GenericObject) {
try {
await safeClient(() => client.api.bank_account.post({
bankName: values.bankName,
accountNumber: values.accountNumber,
accountName: values.accountName,
}));
await safeClient(() => client.api.bank_account.post(values as any));
const toast = await toastController.create({
message: t("bankCard.messages.addSuccess"),
duration: 2000,
@@ -56,6 +43,13 @@ async function handleSubmit(values: GenericObject) {
console.error("添加银行卡失败:", error);
}
}
function handleBankChange(event: any) {
const item = event.detail.value;
const current = supportBanks.value.find(bank => bank.bankCode === item);
formInst.value?.setFieldValue("bankName", current?.nameCn);
formInst.value?.setFieldValue("swiftCode", current?.swiftCode);
formInst.value?.setFieldValue("bankCode", current?.bankCode);
}
// 格式化银行卡号显示
function formatCardNumber(value: string) {
@@ -96,12 +90,12 @@ function formatCardNumber(value: string) {
</div>
</div>
<Form :validation-schema="schema" class="space-y-5" @submit="handleSubmit">
<Form ref="formInst" :validation-schema="schema" class="space-y-5" @submit="handleSubmit">
<div class="space-y-4">
<Field v-slot="{ field }" name="bankName">
<ion-select class="ui-select" interface="action-sheet" toggle-icon="" v-bind="field" :label="t('bankCard.form.bankName')" :placeholder="t('bankCard.form.bankNamePlaceholder')">
<ion-select-option v-for="item in bankList" :key="item.code" :value="item.code">
{{ item.name }}
<Field v-slot="{ field }" name="bankCode">
<ion-select class="ui-select" interface="action-sheet" toggle-icon="" v-bind="field" :label="t('bankCard.form.bankName')" :placeholder="t('bankCard.form.bankNamePlaceholder')" @ion-change="handleBankChange">
<ion-select-option v-for="item in supportBanks" :key="item.bankCode" :value="item.bankCode">
{{ item.nameCn }}
</ion-select-option>
</ion-select>
</Field>

41
src/views/trade-settings/bank-management/index.vue
View File

@@ -36,12 +36,6 @@ async function handleCardOptions(card: any) {
}
},
},
{
text: t("bankCard.list.edit"),
handler: () => {
router.push(`/trade-settings/bank-management/edit/${card.id}`);
},
},
{
text: t("bankCard.list.delete"),
role: "destructive",
@@ -104,34 +98,6 @@ async function handleDeleteCard(card: any) {
await alert.present();
}
// 获取银行图标颜色
function getBankIcon(bankCode: string) {
const bankColors: Record<string, string> = {
BOC: "#E31E24", // 中国银行 - 红色
CMB: "#E31E24", // 招商银行 - 红色
ICBC: "#E31E24", // 工商银行 - 红色
CCB: "#0F5AA6", // 建设银行 - 蓝色
ABC: "#00A651", // 农业银行 - 绿色
BOCOM: "#1890FF", // 交通银行 - 蓝色
PSBC: "#00A651", // 邮储银行 - 绿色
};
return bankColors[bankCode] || "#666";
}
// 获取银行缩写
function getBankAbbr(bankName: string) {
const abbr: Record<string, string> = {
中国银行: "中行",
招商银行: "招行",
工商银行: "工行",
建设银行: "建行",
农业银行: "农行",
交通银行: "交行",
邮储银行: "邮储",
};
return abbr[bankName] || bankName?.charAt(0);
}
onUpdated(() => {
refresh();
});
@@ -194,11 +160,8 @@ onUpdated(() => {
>
<div class="p-5 flex items-center justify-between">
<div class="flex items-center flex-1">
<div
class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm"
:style="{ backgroundColor: getBankIcon(card.bankCode || card.bankName) }"
>
<span class="text-white">{{ getBankAbbr(card.bankName) }}</span>
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm bg-[#0F5AA6]">
<span class="text-white">{{ card.bankCode }}</span>
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">

2
src/views/user/components/issuing-asset.vue
View File

@@ -5,7 +5,7 @@ const { t } = useI18n();
</script>
<template>
<div class="mt-5">
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
{{ t("asset.issue.issuingAsset") }}
</ion-label>

2
src/views/user/components/my-revenue.vue
View File

@@ -5,7 +5,7 @@ const { t } = useI18n();
</script>
<template>
<div class="mt-7">
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
{{ t("asset.revenue.myRevenue") }}
</ion-label>

2
src/views/user/components/trade-settings.vue
View File

@@ -5,7 +5,7 @@ const { t } = useI18n();
</script>
<template>
<div class="mt-7">
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
{{ t('trade.title') }}
</ion-label>

3
src/views/user/components/wallet-card.vue
View File

@@ -67,4 +67,7 @@ onMounted(() => {
.withdraw-channel-modal {
--height: auto;
}
ion-button {
--background: var(--ui-background-primary);
}
</style>