From edfae1d731f9962fcf23a35632ce45521fd73018 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期二, 23 九月 2025 17:18:52 +0800
Subject: [PATCH] fix: bug
---
apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue | 190 ++++++++++++++++++++++++++++++----------------
1 files changed, 123 insertions(+), 67 deletions(-)
diff --git a/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue b/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
index 0ac88a1..9da8943 100644
--- a/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
+++ b/apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue
@@ -1,15 +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">{{ '鎷涘晢閾惰' }}</div>
- <div class="bank-card-number">{{ '**** **** **** 1234' }}</div>
- <div class="bank-card-type">{{ '鍌ㄨ搫鍗�' }}</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="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>
@@ -18,89 +24,139 @@
<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user';
+import { useQuery } from '@tanstack/vue-query';
+import { Message, showBankCodeForEnd4 } from '@12333/utils';
+import * as userServices from '@12333/services/apiV2/user';
import Taro from '@tarojs/taro';
+import { EnumUserBankCardAccess } from '@12333/constants';
defineOptions({
name: 'InnerPage',
});
-const userStore = useUserStore();
+const switchTab = useSwitchTab();
-function handleUnbind() {}
+const hideBankCode = ref(true);
+
+function changeBankCodeShow() {
+ hideBankCode.value = !hideBankCode.value;
+}
+
+const {
+ isLoading,
+ isError,
+ data: detail,
+ refetch,
+} = useQuery({
+ queryKey: ['userServices/getPersonalUserBankCard'],
+ queryFn: async () => {
+ return await userServices.getPersonalUserBankCard(
+ { access: EnumUserBankCardAccess.Bank },
+ {
+ showLoading: false,
+ }
+ );
+ },
+ placeholderData: () => ({} as API.GetPersonalUserBankCardQueryResult),
+ onSuccess(data) {},
+});
+
+async function handleUnbind() {
+ try {
+ await Message.confirm({ message: '纭畾瑕佽В缁戦摱琛屽崱鍚楋紵' });
+ let params: API.DeletePersonalUserBankCardCommand = {
+ access: EnumUserBankCardAccess.Bank,
+ };
+ let res = await userServices.deletePersonalUserBankCard(params);
+ if (res) {
+ Message.success('瑙ｇ粦鎴愬姛', {
+ onClosed() {
+ switchTab({
+ url: RouterPath.mine,
+ });
+ },
+ });
+ }
+ } catch (error) {}
+}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.bindBankCard-page-wrapper {
- .bind-bank-card-wrapper {
- margin: 20px auto 0;
- 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