From d040c448708d01ef2e2fa585a5a72c84e07e1e31 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期二, 23 九月 2025 14:57:24 +0800
Subject: [PATCH] feat: 绑定银行卡
---
apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue | 147 ++++++++++++++++++++++++++----------------------
1 files changed, 80 insertions(+), 67 deletions(-)
diff --git a/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue b/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
index d68026e..8f1bdf8 100644
--- a/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
+++ b/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
@@ -1,17 +1,21 @@
<template>
<ContentScrollView>
- <div class="bind-bank-card-wrapper">
- <div class="bg-left-top"></div>
- <div class="bind-bank-card-content">
- <div class="bank-card-name">{{ detail?.bank ?? '' }}</div>
- <div class="bank-card-number">
- <div class="bank-card-number-text">{{ showBankCodeForEnd4(detail?.code ?? '') }}</div>
+ <div class="bind-bank-card">
+ <div class="bind-bank-card-wrapper">
+ <div class="bg-left-top"></div>
+ <div class="bind-bank-card-content">
+ <div class="bank-card-name">{{ detail?.bank ?? '' }}</div>
+ <div class="bank-card-number">
+ <div class="bank-card-number-text" @click="changeBankCodeShow">
+ {{ hideBankCode ? showBankCodeForEnd4(detail?.code ?? '') : detail?.code ?? '' }}
+ </div>
+ </div>
+ <!-- <div class="bank-card-type">{{ '鍌ㄨ搫鍗�' }}</div> -->
</div>
- <div class="bank-card-type">{{ '鍌ㄨ搫鍗�' }}</div>
+ <div class="bg-right-bottom"></div>
</div>
- <div class="bg-right-bottom"></div>
+ <div class="bind-bank-card-tips">鐩墠鍙敮鎸佷竴寮犻摱琛屽崱锛屽闇�鎹㈠崱璇峰厛瑙ｇ粦</div>
</div>
- <div class="bind-bank-card-tips">鐩墠鍙敮鎸佷竴寮犻摱琛屽崱锛屽闇�鎹㈠崱璇峰厛瑙ｇ粦</div>
</ContentScrollView>
<PageFooter :isOnlyAction="false">
<PageFooterBtn type="primary" @click="handleUnbind()">瑙ｇ粦閾惰鍗�</PageFooterBtn>
@@ -30,12 +34,17 @@
name: 'InnerPage',
});
-const {} = useUser();
const switchTab = useSwitchTab();
function goUserCenter() {
switchTab({
url: RouterPath.mine,
});
+}
+
+const hideBankCode = ref(true);
+
+function changeBankCodeShow() {
+ hideBankCode.value = !hideBankCode.value;
}
const {
@@ -79,74 +88,78 @@
@import '@/styles/common.scss';
.bindBankCard-page-wrapper {
- .bind-bank-card-wrapper {
- margin: 0 auto;
- width: 660px;
- height: 360px;
- padding: 60px 72px;
- background: linear-gradient(134deg, #6c7ff6 0%, #7996f7 100%);
- box-shadow: 0px 4 10px 5px rgba(122, 151, 248, 0.3);
- border-radius: 22px;
- position: relative;
- box-sizing: border-box;
- overflow: hidden;
+ .bind-bank-card {
+ padding-top: 40px;
- .bg-left-top {
- position: absolute;
- width: 148px;
- height: 130px;
- background-color: #7c8ef7;
- top: 0;
- left: 0;
- border-radius: 0 0 148px 0;
- z-index: 0;
- }
-
- .bind-bank-card-content {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
+ .bind-bank-card-wrapper {
+ margin: 0 auto;
+ width: 660px;
+ height: 360px;
+ padding: 60px 72px;
+ background: linear-gradient(134deg, #6c7ff6 0%, #7996f7 100%);
+ box-shadow: 0px 4 10px 5px rgba(122, 151, 248, 0.3);
+ border-radius: 22px;
position: relative;
- z-index: 1;
+ box-sizing: border-box;
+ overflow: hidden;
- .bank-card-name {
- font-size: 40px;
- font-weight: 600;
- color: #ffffff;
+ .bg-left-top {
+ position: absolute;
+ width: 148px;
+ height: 130px;
+ background-color: #7c8ef7;
+ top: 0;
+ left: 0;
+ border-radius: 0 0 148px 0;
+ z-index: 0;
}
- .bank-card-number {
- font-size: 32px;
- color: #ffffff;
- font-weight: 600;
+ .bind-bank-card-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ height: 100%;
+ position: relative;
+ z-index: 1;
+
+ .bank-card-name {
+ font-size: 40px;
+ font-weight: 600;
+ color: #ffffff;
+ }
+
+ .bank-card-number {
+ font-size: 32px;
+ color: #ffffff;
+ font-weight: 600;
+ }
+
+ .bank-card-type {
+ font-size: 24px;
+ font-weight: 400;
+ color: rgba(255, 255, 255, 0.5);
+ }
}
- .bank-card-type {
- font-size: 24px;
- font-weight: 400;
- color: rgba(255, 255, 255, 0.5);
+ .bg-right-bottom {
+ position: absolute;
+ width: 306px;
+ height: 306px;
+ background: #7d98f7;
+ left: 360px;
+ top: 180px;
+ border-radius: 50%;
+ z-index: 0;
}
}
- .bg-right-bottom {
- position: absolute;
- width: 306px;
- height: 306px;
- background: #7d98f7;
- left: 360px;
- top: 180px;
- border-radius: 50%;
- z-index: 0;
+ .bind-bank-card-tips {
+ margin: 66px auto 0;
+ font-size: 22px;
+ font-weight: 400;
+ text-align: center;
+ color: boleGetCssVar('text-color', 'secondary');
}
- }
-
- .bind-bank-card-tips {
- margin: 66px auto 0;
- font-size: 22px;
- font-weight: 400;
- text-align: center;
- color: boleGetCssVar('text-color', 'secondary');
}
}
</style>
--
Gitblit v1.9.1