hookehuyr

fix(收款设置): 添加银行账号校验并移除number类型限制

添加银行账号输入校验逻辑,包括非空检查和数字格式验证
移除银行账号输入框的number类型限制以允许非数字字符的校验
在表单提交和模态框操作时重置错误状态
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-08-08 12:35:58 4 + * @LastEditTime: 2025-08-08 13:24:11
5 * @FilePath: /jgdl/src/pages/collectionSettings/index.vue 5 * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
6 * @Description: 收款设置 6 * @Description: 收款设置
7 --> 7 -->
...@@ -72,9 +72,10 @@ ...@@ -72,9 +72,10 @@
72 v-model="tempAccountInfo.bankAccount" 72 v-model="tempAccountInfo.bankAccount"
73 placeholder="请输入银行账号" 73 placeholder="请输入银行账号"
74 class="form-input custom-input native-input" 74 class="form-input custom-input native-input"
75 - type="number"
76 :cursor-spacing="50" 75 :cursor-spacing="50"
76 + @blur="validateBankAccount"
77 /> 77 />
78 + <text v-if="bankAccountError" class="error-text">{{ bankAccountError }}</text>
78 </view> 79 </view>
79 80
80 <!-- 银行卡正面照片上传 --> 81 <!-- 银行卡正面照片上传 -->
...@@ -422,6 +423,11 @@ const showEndDateTypeModal = ref(false); ...@@ -422,6 +423,11 @@ const showEndDateTypeModal = ref(false);
422 const idCardError = ref(''); 423 const idCardError = ref('');
423 424
424 /** 425 /**
426 + * 银行账号错误信息
427 + */
428 +const bankAccountError = ref('');
429 +
430 +/**
425 * 日期选择器相关状态 431 * 日期选择器相关状态
426 */ 432 */
427 const idcardBeginDate = ref(new Date()); 433 const idcardBeginDate = ref(new Date());
...@@ -575,6 +581,38 @@ const handleIdCardBlur = () => { ...@@ -575,6 +581,38 @@ const handleIdCardBlur = () => {
575 }; 581 };
576 582
577 /** 583 /**
584 + * 银行账号校验
585 + * @param {string} bankAccount - 银行账号
586 + * @returns {object} - 校验结果
587 + */
588 +const validateBankAccountNumber = (bankAccount) => {
589 + if (!bankAccount) {
590 + return { valid: false, error: '请输入银行账号' };
591 + }
592 +
593 + // 检查是否都是数字
594 + const numberRegex = /^\d+$/;
595 + if (!numberRegex.test(bankAccount)) {
596 + return { valid: false, error: '银行账号只能包含数字' };
597 + }
598 +
599 + return { valid: true, error: '' };
600 +};
601 +
602 +/**
603 + * 处理银行账号失焦事件
604 + */
605 + const validateBankAccount = () => {
606 + const bankAccount = tempAccountInfo.value.bankAccount;
607 + if (bankAccount) {
608 + const result = validateBankAccountNumber(String(bankAccount));
609 + bankAccountError.value = result.error;
610 + } else {
611 + bankAccountError.value = '';
612 + }
613 + };
614 +
615 +/**
578 * 根据银行ID获取银行名称 616 * 根据银行ID获取银行名称
579 * @param {string} bankId - 银行ID 617 * @param {string} bankId - 银行ID
580 * @returns {string} - 银行名称 618 * @returns {string} - 银行名称
...@@ -613,6 +651,7 @@ const onBankConfirm = ({ selectedValue }) => { ...@@ -613,6 +651,7 @@ const onBankConfirm = ({ selectedValue }) => {
613 */ 651 */
614 const openAccountModal = () => { 652 const openAccountModal = () => {
615 tempAccountInfo.value = { ...accountInfo.value }; 653 tempAccountInfo.value = { ...accountInfo.value };
654 + bankAccountError.value = '';
616 showAccountModal.value = true; 655 showAccountModal.value = true;
617 }; 656 };
618 657
...@@ -622,6 +661,7 @@ const openAccountModal = () => { ...@@ -622,6 +661,7 @@ const openAccountModal = () => {
622 const closeAccountModal = () => { 661 const closeAccountModal = () => {
623 showAccountModal.value = false; 662 showAccountModal.value = false;
624 tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' }; 663 tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' };
664 + bankAccountError.value = '';
625 }; 665 };
626 666
627 /** 667 /**
......