优化个人信息的显示、隐藏小眼睛功能
This commit is contained in:
parent
1ae524e2ea
commit
70a7ebe9fa
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -47,14 +47,42 @@
|
|||
placeholder="请输入手机号"
|
||||
:rules="[{ required: true, message: '请输入手机号' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="notLocalTeacherTwo.pyCard"
|
||||
<div class="field-container">
|
||||
<van-field
|
||||
v-model="notLocalTeacherTwo.pyCardMasked"
|
||||
name="pyCard"
|
||||
label="银行卡号"
|
||||
type="text"
|
||||
placeholder="请输入银行卡号"
|
||||
:rules="[{ validator: bankCard }]"
|
||||
/>
|
||||
:rules="rules"
|
||||
:disabled="isInputDisabled"
|
||||
@blur="onBlur"
|
||||
ref="cardInput"
|
||||
>
|
||||
|
||||
</van-field>
|
||||
<!-- 修改按钮放在输入框右侧 -->
|
||||
<van-button
|
||||
v-if="isInputDisabled"
|
||||
@click="enableEdit"
|
||||
class="edit-button"
|
||||
>
|
||||
修改
|
||||
</van-button>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<van-dialog
|
||||
v-model:show="showDialog"
|
||||
title="确认信息"
|
||||
show-cancel-button
|
||||
cancel-button-text="取消"
|
||||
confirm-button-text="确认"
|
||||
@confirm="confirmEncryption"
|
||||
>
|
||||
<div>
|
||||
确认提交银行卡号吗？
|
||||
</div>
|
||||
</van-dialog>
|
||||
<van-field
|
||||
v-model="notLocalTeacherTwo.bankAddress"
|
||||
name="bankAddress"
|
||||
|
|
@ -270,6 +298,7 @@
|
|||
phone: '',
|
||||
identityId: '',
|
||||
pyCard: '',
|
||||
pyCardMasked:'',
|
||||
carStatus: '0',
|
||||
dormitoryStatus: '0',
|
||||
bankAddress: '',
|
||||
|
|
@ -282,6 +311,19 @@
|
|||
const tphone = ref('');
|
||||
|
||||
const myShowDialog = ref(false);
|
||||
const isValidationEnabled =ref(true);
|
||||
const isInputDisabled = ref(false); // 控制输入框是否禁用
|
||||
const cardInput = ref(null); // 用来引用输入框的 DOM 元素
|
||||
|
||||
// 动态规则，根据 isValidationEnabled 来控制规则
|
||||
const rules = computed(() => {
|
||||
if (isValidationEnabled.value) {
|
||||
return [{ validator: bankCard }];
|
||||
}
|
||||
return []; // 不使用校验规则
|
||||
//return [{ validator: bankCard }];
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 选择器
|
||||
|
|
@ -289,6 +331,58 @@
|
|||
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;
|
||||
};
|
||||
|
||||
// 校验规则
|
||||
|
||||
const bankAddr = (value: string) => {
|
||||
|
|
@ -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; /* 鼠标悬停时显示为手型，表示可点击 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue