feat: 更新银行卡管理功能，添加银行卡和删除银行卡的逻辑，优化API请求方式
This commit is contained in:
@@ -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.16.tgz",
|
||||
"@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@vee-validate/yup": "^4.15.1",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
|
||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@@ -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.16.tgz
|
||||
version: http://192.168.1.36:9527/api/riwa-api-types-0.0.16.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.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)))
|
||||
'@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.16.tgz':
|
||||
resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.16.tgz}
|
||||
version: 0.0.16
|
||||
'@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
|
||||
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.16.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.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)))':
|
||||
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))
|
||||
|
||||
|
||||
@@ -4,8 +4,9 @@ import { client, safeClient } from "./api";
|
||||
const walletStore = useWalletStore();
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await safeClient(client.api.asset.balances.get());
|
||||
walletStore.state.balances = data;
|
||||
const { data } = await safeClient(() => client.api.asset.balances.get(), { silent: true });
|
||||
walletStore.state.balances = data.value;
|
||||
client.api.rwa.issuance.products.get();
|
||||
console.log("App mounted successfully");
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -9,26 +9,38 @@ const client = treaty<App>(window.location.origin, {
|
||||
});
|
||||
|
||||
export async function safeClient<T, E>(
|
||||
requestPromise: Promise<{ data: T; error: E }>,
|
||||
options: { silent?: boolean } = {},
|
||||
requestPromise: () => Promise<{ data: T; error: E }>,
|
||||
options: { silent?: boolean; immediate?: boolean } = {},
|
||||
) {
|
||||
const { data, error } = await requestPromise;
|
||||
const { immediate = true } = options;
|
||||
const data = ref<T | null>(null);
|
||||
const error = ref<E | null>(null);
|
||||
|
||||
if (error) {
|
||||
if (!options.silent) {
|
||||
const toast = await toastController.create({
|
||||
message: typeof error === "string" ? error : "Request failed. Please try again.",
|
||||
duration: 3000,
|
||||
position: "bottom",
|
||||
color: "danger",
|
||||
});
|
||||
await toast.present();
|
||||
const executeRequest = async () => {
|
||||
const res = await requestPromise();
|
||||
|
||||
if (res.error) {
|
||||
if (!options.silent) {
|
||||
const toast = await toastController.create({
|
||||
message: typeof error === "string" ? error : "Request failed. Please try again.",
|
||||
duration: 3000,
|
||||
position: "bottom",
|
||||
color: "danger",
|
||||
});
|
||||
await toast.present();
|
||||
}
|
||||
|
||||
throw res.error;
|
||||
}
|
||||
data.value = res.data;
|
||||
error.value = res.error;
|
||||
};
|
||||
|
||||
throw error;
|
||||
if (immediate) {
|
||||
await executeRequest();
|
||||
}
|
||||
|
||||
return { data, error };
|
||||
return { data, error, refresh: executeRequest };
|
||||
}
|
||||
|
||||
export { client };
|
||||
|
||||
@@ -25,3 +25,9 @@ export type RwaIssuanceProductsData = Treaty.Data<typeof client.api.rwa.issuance
|
||||
export type RwaIssuanceProductBody = NonNullable<Parameters<typeof client.api.rwa.issuance.products.bundle.post>[0]>;
|
||||
|
||||
export type RwaIssuanceCategoriesData = Treaty.Data<typeof client.api.rwa.issuance.categories.get>;
|
||||
|
||||
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>;
|
||||
|
||||
@@ -58,6 +58,14 @@ const routes: Array<RouteRecordRaw> = [
|
||||
props: ({ query, params }) => ({ query, params }),
|
||||
component: () => import("@/views/issue/issuing-apply/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/trade-settings/bank-management",
|
||||
component: () => import("@/views/trade-settings/bank-management/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/trade-settings/bank-management/add",
|
||||
component: () => import("@/views/trade-settings/bank-management/add.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@@ -5,7 +5,6 @@ import { toTypedSchema } from "@vee-validate/yup";
|
||||
import { ErrorMessage, Field, FieldArray, Form } from "vee-validate";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import * as yup from "yup";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const props = defineProps<{
|
||||
initialData: RwaIssuanceProductBody["product"];
|
||||
|
||||
@@ -10,14 +10,14 @@ import IssuePeriod from "./issue-period.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const now = useNow();
|
||||
const { data: categories = [] } = await safeClient(client.api.rwa.issuance.categories.get());
|
||||
const { data: categories } = await safeClient(() => client.api.rwa.issuance.categories.get());
|
||||
|
||||
const step = useRouteQuery<number>("step", 1, { transform: v => Number(v), mode: "push" });
|
||||
const initialData: RwaIssuanceProductBody = {
|
||||
product: {
|
||||
name: "",
|
||||
code: "",
|
||||
categoryId: categories!.length > 0 ? categories![0].id : "",
|
||||
categoryId: categories.value!.length > 0 ? categories.value![0].id : "",
|
||||
},
|
||||
editions: [
|
||||
{
|
||||
|
||||
192
src/views/trade-settings/bank-management/add.vue
Normal file
192
src/views/trade-settings/bank-management/add.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang='ts' setup>
|
||||
import type { GenericObject } from "vee-validate";
|
||||
import { toastController } from "@ionic/vue";
|
||||
import { toTypedSchema } from "@vee-validate/yup";
|
||||
import { informationCircle, shieldCheckmark } from "ionicons/icons";
|
||||
import { ErrorMessage, Field, Form } from "vee-validate";
|
||||
import * as yup from "yup";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
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: "民生银行" },
|
||||
];
|
||||
|
||||
// 表单验证 Schema
|
||||
const schema = toTypedSchema(
|
||||
yup.object({
|
||||
bankName: yup.string().required("请选择银行"),
|
||||
accountNumber: yup
|
||||
.string()
|
||||
.required("请输入银行卡号"),
|
||||
accountName: yup.string().required("请输入持卡人姓名"),
|
||||
}),
|
||||
);
|
||||
|
||||
async function handleSubmit(values: GenericObject) {
|
||||
try {
|
||||
await safeClient(() => client.api.bank_account.post({
|
||||
bankName: values.bankName,
|
||||
accountNumber: values.accountNumber,
|
||||
accountName: values.accountName,
|
||||
}));
|
||||
const toast = await toastController.create({
|
||||
message: "银行卡添加成功",
|
||||
duration: 2000,
|
||||
position: "bottom",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
await toast.present();
|
||||
router.back();
|
||||
}
|
||||
catch (error) {
|
||||
console.error("添加银行卡失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化银行卡号显示
|
||||
function formatCardNumber(value: string) {
|
||||
if (!value)
|
||||
return value;
|
||||
const numbers = value.replace(/\D/g, "");
|
||||
return numbers.replace(/(\d{4})(?=\d)/g, "$1 ");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonPage>
|
||||
<ion-header>
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ion-back-button slot="start" />
|
||||
<ion-title>添加银行卡</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<IonContent :fullscreen="true">
|
||||
<div class="min-h-full">
|
||||
<div class="p-4">
|
||||
<!-- 表单说明 -->
|
||||
<div class="border border-blue-200 dark:border-blue-900 rounded-xl p-4 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<ion-icon
|
||||
:icon="informationCircle"
|
||||
class="text-blue-500 text-xl mt-0.5 shrink-0"
|
||||
/>
|
||||
<div class="text-sm text-blue-700 dark:text-blue-300">
|
||||
<p class="font-medium mb-1">
|
||||
温馨提示
|
||||
</p>
|
||||
<p class="leading-relaxed">
|
||||
为了保障您的资金安全，请确保银行卡信息真实有效。添加的银行卡将用于充值和提现操作。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form :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="银行卡" placeholder="请选择您的银行">
|
||||
<ion-select-option v-for="item in bankList" :key="item.code" :value="item.code">
|
||||
{{ item.name }}
|
||||
</ion-select-option>
|
||||
</ion-select>
|
||||
</Field>
|
||||
|
||||
<div>
|
||||
<Field name="accountNumber">
|
||||
<template #default="{ field }">
|
||||
<ui-input-label
|
||||
v-bind="field"
|
||||
label="银行卡号"
|
||||
placeholder="请输入银行卡号"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
:maxlength="23"
|
||||
helper-text="支持16-19位银行卡号"
|
||||
required
|
||||
@input="(e:any) => field.value = formatCardNumber(e.target.value)"
|
||||
/>
|
||||
</template>
|
||||
</Field>
|
||||
<ErrorMessage name="accountNumber" class="text-red-500 text-sm mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Field name="accountName">
|
||||
<template #default="{ field }">
|
||||
<ui-input-label
|
||||
v-bind="field"
|
||||
label="持卡人姓名"
|
||||
placeholder="请输入持卡人姓名"
|
||||
type="text"
|
||||
helper-text="请输入银行卡开户时的真实姓名"
|
||||
required
|
||||
/>
|
||||
</template>
|
||||
</Field>
|
||||
<ErrorMessage name="accountName" class="text-red-500 text-sm mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
|
||||
<div class="flex gap-3">
|
||||
<ion-icon
|
||||
:icon="shieldCheckmark"
|
||||
class="text-amber-500 text-xl mt-0.5 shrink-0"
|
||||
/>
|
||||
<div class="text-sm text-amber-700 dark:text-amber-300">
|
||||
<p class="font-medium mb-1">
|
||||
安全保障
|
||||
</p>
|
||||
<ul class="space-y-1 text-xs leading-relaxed">
|
||||
<li>• 所有银行卡信息均经过SSL加密传输</li>
|
||||
<li>• 我们严格遵循银行级安全标准</li>
|
||||
<li>• 您的个人信息将被妥善保护</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-button type="submit" expand="block">
|
||||
确认添加银行卡
|
||||
</ion-button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Tailwind CSS 处理所有样式 */
|
||||
.ui-select {
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ui-select.ion-invalid {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ui-select {
|
||||
border-color: #4b5563;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
src/views/trade-settings/bank-management/index.vue
Normal file
287
src/views/trade-settings/bank-management/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<script lang='ts' setup>
|
||||
import { actionSheetController, alertController, toastController } from "@ionic/vue";
|
||||
import {
|
||||
addOutline,
|
||||
cardOutline,
|
||||
checkmarkCircle,
|
||||
ellipsisHorizontal,
|
||||
star,
|
||||
} from "ionicons/icons";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const { data, refresh } = await safeClient(() => client.api.bank_account.get());
|
||||
const bankCards = computed(() => data.value?.data || []);
|
||||
|
||||
function handleAddCard() {
|
||||
router.push("/trade-settings/bank-management/add");
|
||||
}
|
||||
|
||||
async function handleCardOptions(card: any) {
|
||||
const actionSheet = await actionSheetController.create({
|
||||
header: card.bankName,
|
||||
buttons: [
|
||||
{
|
||||
text: card.isDefault ? "默认银行卡" : "设为默认",
|
||||
handler: () => {
|
||||
if (!card.isDefault) {
|
||||
handleSetDefault(card);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "编辑",
|
||||
handler: () => {
|
||||
router.push(`/trade-settings/bank-management/edit/${card.id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "删除",
|
||||
role: "destructive",
|
||||
handler: () => {
|
||||
handleDeleteCard(card);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "取消",
|
||||
role: "cancel",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
// 设置默认银行卡
|
||||
async function handleSetDefault(card: any) {
|
||||
await safeClient(() => client.api.bank_account({ id: card.id }).set_default.post());
|
||||
const toast = await toastController.create({
|
||||
message: "已设置为默认银行卡",
|
||||
duration: 2000,
|
||||
position: "bottom",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
await toast.present();
|
||||
refresh();
|
||||
}
|
||||
|
||||
// 删除银行卡
|
||||
async function handleDeleteCard(card: any) {
|
||||
const alert = await alertController.create({
|
||||
header: "删除银行卡",
|
||||
message: `确定要删除 ${card.bankName} (${card.accountName}) 吗？此操作无法撤销。`,
|
||||
buttons: [
|
||||
{
|
||||
text: "取消",
|
||||
role: "cancel",
|
||||
},
|
||||
{
|
||||
text: "删除",
|
||||
role: "destructive",
|
||||
handler: async () => {
|
||||
await safeClient(() => client.api.bank_account({ id: card.id }).delete());
|
||||
const toast = await toastController.create({
|
||||
message: "银行卡删除成功",
|
||||
duration: 2000,
|
||||
position: "bottom",
|
||||
color: "success",
|
||||
});
|
||||
await toast.present();
|
||||
refresh();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonPage>
|
||||
<ion-header>
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ion-back-button slot="start" />
|
||||
<ion-title>银行卡管理</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<IonContent :fullscreen="true">
|
||||
<div class="min-h-full">
|
||||
<div v-if="bankCards?.length === 0" class="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center">
|
||||
<div class="w-20 h-20 rounded-full bg-linear-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6 shadow-lg shadow-indigo-500/30">
|
||||
<ion-icon :icon="cardOutline" class="text-4xl text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-#151515 dark:text-white mb-2">
|
||||
暂无银行卡
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8">
|
||||
添加银行卡以便快速充值和提现
|
||||
</p>
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="h-12 font-semibold"
|
||||
@click="handleAddCard"
|
||||
>
|
||||
<ion-icon slot="start" :icon="addOutline" />
|
||||
添加银行卡
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="p-4">
|
||||
<div class="mb-6">
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 flex items-center cursor-pointer transition-all duration-300 border-2 border-dashed border-gray-200 dark:border-gray-600"
|
||||
@click="handleAddCard"
|
||||
>
|
||||
<div class="w-10 h-10 rounded-full bg-linear-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-3">
|
||||
<ion-icon :icon="addOutline" class="text-white text-xl" />
|
||||
</div>
|
||||
<span class="font-semibold text-#151515 dark:text-white">添加银行卡</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡列表 -->
|
||||
<div class="mb-8">
|
||||
<div class="mb-4">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 font-medium">已绑定银行卡 ({{ bankCards?.length }})</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="card in bankCards"
|
||||
:key="card.id"
|
||||
class="bg-gray-50 dark:bg-gray-900 rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
|
||||
>
|
||||
<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>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="text-lg font-semibold text-#151515 dark:text-white m-0">
|
||||
{{ card.bankName }}
|
||||
</h4>
|
||||
<span
|
||||
v-if="card.isDefault"
|
||||
class="bg-linear-to-r from-indigo-500 to-purple-600 text-white text-xs px-2 py-0.5 rounded-lg font-medium"
|
||||
>
|
||||
默认
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-base m-0 mb-2 tracking-wider">
|
||||
{{ card.maskAccountNumber }}
|
||||
</p>
|
||||
<div class="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md text-xs">
|
||||
储蓄卡
|
||||
</span>
|
||||
<span>{{ card.accountName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<ion-button
|
||||
fill="clear"
|
||||
class="[--color:var(--color-gray-600)] [--background:transparent] w-10 h-10 hover:[--background:var(--color-gray-100)]"
|
||||
@click="handleCardOptions(card)"
|
||||
>
|
||||
<ion-icon slot="icon-only" :icon="ellipsisHorizontal" />
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 默认标识条 -->
|
||||
<div v-if="card.isDefault" class="bg-linear-to-r from-indigo-500 to-purple-600 text-white px-5 py-2 flex items-center gap-2 text-sm font-medium">
|
||||
<ion-icon :icon="star" class="text-base" />
|
||||
<span>默认银行卡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div class="rounded-xl p-4 mt-4 b-2px bg-gray-50 dark:bg-gray-900">
|
||||
<div class="flex items-center gap-3 mb-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
|
||||
<span>银行卡信息经过加密保护</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
|
||||
<span>支持主流银行快速充值提现</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@media (max-width: 768px) {
|
||||
.p-4 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 4.25rem;
|
||||
height: 4.25rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
src/views/user/components/trade-settings.vue
Normal file
28
src/views/user/components/trade-settings.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script lang='ts' setup>
|
||||
import { cardOutline } from "ionicons/icons";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-10">
|
||||
<ion-label class="text-xs font-medium text-text-300">
|
||||
交易
|
||||
</ion-label>
|
||||
<div class="grid grid-cols-4 mt-5">
|
||||
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/bank-management')">
|
||||
<ion-icon :icon="cardOutline" />
|
||||
<div class="text-xs">
|
||||
银行卡管理
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
ion-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -16,7 +16,7 @@ function handleWithdraw() {
|
||||
|
||||
<template>
|
||||
<div class="mt-5 shadow-md rounded-lg overflow-hidden">
|
||||
<div class="grid grid-cols-2 gap-5 p-5 bg-(--ion-card-background)">
|
||||
<div class="grid grid-cols-1 gap-5 p-5 bg-(--ion-card-background)">
|
||||
<div v-for="item in state.balances" :key="item.assetCode" class="flex flex-col gap-1">
|
||||
<div class="uppercase text-xs text-text-400 font-medium tracking-[0.4px]">
|
||||
{{ item.assetCode }}
|
||||
|
||||
@@ -4,6 +4,7 @@ import AssetBalance from "./components/asset-balance.vue";
|
||||
import IssuingAsset from "./components/issuing-asset.vue";
|
||||
import MyRevenue from "./components/my-revenue.vue";
|
||||
import PurchaseAsset from "./components/purchase-asset.vue";
|
||||
import TradeSettings from "./components/trade-settings.vue";
|
||||
import UserInfo from "./components/user-info.vue";
|
||||
import WalletCard from "./components/wallet-card.vue";
|
||||
</script>
|
||||
@@ -29,8 +30,9 @@ import WalletCard from "./components/wallet-card.vue";
|
||||
<UserInfo />
|
||||
<WalletCard />
|
||||
<IssuingAsset />
|
||||
<PurchaseAsset />
|
||||
<!-- <PurchaseAsset /> -->
|
||||
<MyRevenue />
|
||||
<TradeSettings />
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
@@ -42,7 +42,7 @@ function handleCurrentChange() {
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
const { data } = await safeClient(client.api.withdraw.post(form.value));
|
||||
const { data } = await safeClient(() => client.api.withdraw.post(form.value));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user