feat: 绑定银行卡

wupengfei

2025-09-23 22a6de40ac6693463cdbbe9ed1e3ef05fc301afc

 apps/cMiniApp/src/subpackages/wallet/bindBankCard/InnerPage.vue

@@ -3,8 +3,10 @@
    <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-name">{{ detail?.bank ?? '' }}</div>
        <div class="bank-card-number">
          <div class="bank-card-number-text">{{ showBankCodeForEnd4(detail?.code ?? '') }}</div>
        </div>
        <div class="bank-card-type">{{ '储蓄卡' }}</div>
      </div>
      <div class="bg-right-bottom"></div>
@@ -18,15 +20,59 @@

<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 {} = useUser();
const switchTab = useSwitchTab();
function goUserCenter() {
  switchTab({
    url: RouterPath.mine,
  });
}

function handleUnbind() {}
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() {
          goUserCenter();
        },
      });
    }
  } catch (error) {}
}
</script>

<style lang="scss">
@@ -34,7 +80,7 @@

.bindBankCard-page-wrapper {
  .bind-bank-card-wrapper {
    margin: 20px auto 0;
    margin: 0 auto;
    width: 660px;
    height: 360px;
    padding: 60px 72px;