diff --git a/src/views/mainPage.vue b/src/views/mainPage.vue index f112370..44f806b 100644 --- a/src/views/mainPage.vue +++ b/src/views/mainPage.vue @@ -469,16 +469,17 @@ userInfo.identityIdFull = userInfo.identityId; // 完整身份证号 userInfo.phoneFull = userInfo.phone; // 完整手机号 userInfo.pyCardFull = userInfo.pyCard; // 完整银行卡号 - // 隐藏敏感信息 userInfo.identityIdMasked = userInfo.identityId.substring(0, 5) + '****' + userInfo.identityId.substring(13, 18); userInfo.phoneMasked = userInfo.phone.substring(0, 3) + '****' + userInfo.phone.substring(7, 11); userInfo.pyCardMasked = userInfo.pyCard.substring(0, 4) + '***********' + userInfo.pyCard.substring(15, 19); - //设置初始为隐藏 - userInfo.identityId = userInfo.identityIdMasked; - userInfo.phone = userInfo.phoneMasked; - userInfo.pyCard = userInfo.pyCardMasked; + //设置初始为隐藏 + userInfo.phone = userInfo.phoneMasked; + if(userInfo.identityIdFull != '' && userInfo.pyCardFull != ''){ + userInfo.identityId = userInfo.identityIdMasked; + userInfo.pyCard = userInfo.pyCardMasked; + } console.log("userInfo.phone",userInfo.phone); store.setMajorId(store.LoginUser.majorId); Object.assign(showIcon, res.result); diff --git a/src/views/waiTeacherTwo.vue b/src/views/waiTeacherTwo.vue index 2ba1457..61ac950 100644 --- a/src/views/waiTeacherTwo.vue +++ b/src/views/waiTeacherTwo.vue @@ -47,14 +47,42 @@ placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" /> - + + :rules="rules" + :disabled="isInputDisabled" + @blur="onBlur" + ref="cardInput" + > + + + + + 修改 + + + + +
+ 确认提交银行卡号吗? +
+
{ + if (isValidationEnabled.value) { + return [{ validator: bankCard }]; + } + return []; // 不使用校验规则 + //return [{ validator: bankCard }]; + }); + const router = useRouter(); // 选择器 const showPicker = ref(false); const sub = ref(false); + + const showDialog = ref(false); + + // 弹窗确认前处理函数 + const onBlur = () => { + notLocalTeacherTwo.pyCard = notLocalTeacherTwo.pyCardMasked; + // 校验原始银行卡号 + const validationResult = bankCard(notLocalTeacherTwo.pyCard); + + if (validationResult !== true) { + // 校验失败,显示错误信息 + console.log(validationResult) + } else { + // 校验通过,弹出确认框 + showDialog.value = true; + } + }; + + // 确认后加密银行卡号 + const confirmEncryption = () => { + if (notLocalTeacherTwo.pyCardMasked) { + notLocalTeacherTwo.pyCard = notLocalTeacherTwo.pyCardMasked; + notLocalTeacherTwo.pyCardMasked = encryptBankCard(notLocalTeacherTwo.pyCard); // 加密银行卡号 + } + showDialog.value = false; // 关闭弹窗 + // 禁用输入框 + isInputDisabled.value = true; + // 点击确认后禁用校验规则 + isValidationEnabled.value = false; + console.log("pyCard",notLocalTeacherTwo.pyCard) + console.log("pyCardMasked",notLocalTeacherTwo.pyCardMasked) + }; + + // 加密银行卡号的函数 (这里只是简单的加密处理,你可以根据需要替换) + const encryptBankCard = (cardNumber) => { + return cardNumber.substring(0, 4) + ' **** **** ' + cardNumber.substring(15, 19); // 简单的加密方式 + }; + + // 重新启用输入框(点击修改按钮后) + const enableEdit = () => { + // 重新启用输入框 + isInputDisabled.value = false; + isValidationEnabled.value = true; + nextTick(() => { + // 使输入框获得焦点 + if (cardInput.value) { + cardInput.value.focus(); + } + }); + // 将加密后的银行卡号赋值给原始字段,方便用户重新输入 + notLocalTeacherTwo.pyCardMasked = notLocalTeacherTwo.pyCard; + }; // 校验规则 @@ -545,4 +639,18 @@ .my-dialog { color: red; } + .field-container { + display: flex; + align-items: center; /* 垂直居中对齐 */ +} + +.edit-button { + margin-left: 8px; /* 按钮与输入框之间的间距 */ + border: none; /* 去掉按钮的边框 */ + background-color: transparent; /* 去掉按钮的背景颜色,使其透明 */ + color: red; /* 设置按钮字体颜色为红色 */ + font-size: 20px; /* 根据需要设置字体大小 */ + width: 150px; + cursor: pointer; /* 鼠标悬停时显示为手型,表示可点击 */ +}