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
auto-imports.d.ts vendored
View File

@@ -354,7 +354,7 @@ declare global {
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
// @ts-ignore
export type { PageInstance, InputInstance, ModalInstance } from './src/utils/ionic-helper'
export type { PageInstance, InputInstance, ModalInstance, FormInstance } from './src/utils/ionic-helper'
import('./src/utils/ionic-helper')
}

2
package.json
View File

@@ -23,7 +23,7 @@
"@elysiajs/eden": "^1.4.5",
"@ionic/vue": "^8.7.11",
"@ionic/vue-router": "^8.7.11",
"@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz",
"@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz",
"@tailwindcss/vite": "^4.1.18",
"@vee-validate/yup": "^4.15.1",
"@vueuse/core": "^14.1.0",

12
pnpm-lock.yaml generated
View File

@@ -36,8 +36,8 @@ importers:
specifier: ^8.7.11
version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
'@riwa/api-types':
specifier: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz
version: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
specifier: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz
version: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -1263,9 +1263,9 @@ packages:
'@quansync/fs@1.0.0':
resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
'@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz':
resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz}
version: 0.0.21
'@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz':
resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz}
version: 0.0.22
peerDependencies:
'@elysiajs/eden': ^1.4.5
@@ -6101,7 +6101,7 @@ snapshots:
dependencies:
quansync: 1.0.0
'@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
'@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
dependencies:
'@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

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>