feat: 绑定银行卡

wupengfei

2025-09-23 22a6de40ac6693463cdbbe9ed1e3ef05fc301afc

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

@@ -2,22 +2,22 @@
  <ContentScrollView :paddingH="false">
    <nut-form :model-value="form" ref="formRef" :rules="rules">
      <nut-form-item label="持卡人:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入持卡人" />
        <nut-input v-model.trim="form.name" placeholder="请输入持卡人" readonly />
      </nut-form-item>
      <nut-form-item label="身份证号:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入身份证号" />
      <nut-form-item label="身份证号:" class="bole-form-item" prop="identity">
        <nut-input v-model.trim="form.identity" placeholder="请输入身份证号" readonly />
      </nut-form-item>
      <nut-form-item label="银行卡号:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入银行卡号" />
      <nut-form-item label="银行卡号:" class="bole-form-item" prop="code">
        <nut-input v-model.trim="form.code" placeholder="请输入银行卡号" />
      </nut-form-item>
      <nut-form-item label="开户行:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入开户行" />
      <nut-form-item label="开户行:" class="bole-form-item" prop="bank">
        <nut-input v-model.trim="form.bank" placeholder="请输入开户行" />
      </nut-form-item>
      <nut-form-item label="手机号:" class="bole-form-item" prop="phoneNumber" required>
        <nut-input
          v-model.trim="form.phoneNumber"
          class="nut-input-text bole-input-text"
          placeholder="请填写经办人的手机号码"
          placeholder="请填写银行预留手机号"
          type="text"
        >
          <template #right>
@@ -29,9 +29,9 @@
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item label="短信验证码:" class="bole-form-item" prop="verificationCode" required>
      <nut-form-item label="短信验证码:" class="bole-form-item" prop="verifyCode" required>
        <nut-input
          v-model.trim="form.verificationCode"
          v-model.trim="form.verifyCode"
          class="nut-input-text bole-input-text"
          placeholder="请输入验证码"
          type="number"
@@ -47,55 +47,45 @@
<script setup lang="ts">
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { ProFormCaptcha } from 'senin-mini/components';
import { Message } from '@12333/utils';
import { VerificationCodeBusinessType } from '@12333/constants';
import * as commonServices from '@12333/services/api/Common';
import { FormValidator, Message } from '@12333/utils';
import * as userServices from '@12333/services/apiV2/user';
import Taro from '@tarojs/taro';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useQueryClient } from '@tanstack/vue-query';
import { EnumUserBankCardAccess } from '@12333/constants';

const userResumeServices = {};
const { userDetail } = useUser();
const queryClient = useQueryClient();
defineOptions({
  name: 'InnerPage',
});

const form = reactive({
  name: '',
  name: userDetail.value?.name ?? '',
  identity: userDetail.value?.identity ?? '',
  phoneNumber: '',
  verificationCode: '',
});

const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['userResumeServices/getUserResumeBaseInfo'],
  queryFn: async () => {
    return await userResumeServices.getUserResumeBaseInfo({
      showLoading: false,
    });
  },
  placeholderData: () => ({} as API.UserResumeBaseInfoOutput),
  onSuccess(data) {
    form.name = data.name;
    form.phoneNumber = data.phoneNumber;
  },
  code: '',
  bank: '',
  bankBranch: '',
  verifyCode: '',
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入持卡人' }],
  phoneNumber: [{ required: true, message: '请输入手机号' }],
  code: [
    { required: true, message: '请输入银行卡号' },
    { message: '请输入正确的银行卡号', validator: FormValidator.validatorBankCard },
  ],
  bank: [{ required: true, message: '请输入开户行' }],
  phoneNumber: [
    { required: true, message: '请填写手机号码' },
    { message: '请输入正确的手机号码', validator: FormValidator.validatorPhoneNumber },
  ],
  verifyCode: [{ required: true, message: '请输入验证码' }],
});

async function onGetCaptcha(phoneNumber: string) {
  await commonServices.sendPhoneCertificationVerificationCode(
  await userServices.sendSavePersonalUserBankCardVerifyCode(
    {
      name: form.name,
      identity: form.name,
      mobile: form.phoneNumber,
      businessType: VerificationCodeBusinessType.UserCertificationPhoneCertification,
      phoneNumber: form.phoneNumber,
    },
    { showLoading: false }
  );
@@ -113,20 +103,21 @@

async function confirm() {
  try {
    let params: API.SaveUserResumeBaseInfoInput = {
      name: form.name,
    let params: API.SavePersonalUserBankCardCommand = {
      code: form.code,
      bank: form.bank,
      phoneNumber: form.phoneNumber,
      verifyCode: form.verifyCode,
      access: EnumUserBankCardAccess.Bank,
    };
    let res = await userResumeServices.saveUserResumeBaseInfo(params);
    let res = await userServices.savePersonalUserBankCard(params);
    if (res) {
      Message.success('保存成功', {
      Message.success('绑定成功', {
        onClosed() {
          Taro.navigateTo({
            url: `${RouterPath.mineCurriculumVitae}`,
            url: `${RouterPath.bindBankCard}`,
          });
          queryClient.invalidateQueries([
            'taskCheckReceiveServices/getCheckReceiveTaskUserSubmits',
          ]);
          queryClient.invalidateQueries(['authServices/getPersonalLoginInfo']);
        },
      });
    }