实现个人信息的显示、隐藏小眼睛功能

src/views/mainPage.vue

@@ -45,7 +45,12 @@
                       v-model="userInfo.identityId"
                       name="userCardId"
                       label="身份证号"
-                    />
+                      :type="showIdentityId ? 'text' : 'text'"
+                    >
+                    <template #right-icon>
+                        <van-icon class="icon" :name="showIdentityId ? 'eye-o' : 'closed-eye'"  @click="toggleIdentityId"/>
+                    </template>
+                    </van-field>
                     <!--                   <van-field-->
                     <!--                       style="height: 35px; line-height: 100%"-->
                     <!--                       v-model="user.sex"-->
@@ -70,8 +75,12 @@
                       v-model="userInfo.phone"
                       name="phone"
                       label="手机号"
-                      type="number"
+                      type="text"
-                    />
+                    >
+                    <template #right-icon>
+                        <van-icon class="icon" :name="showphone ? 'eye-o' : 'closed-eye'" @click="togglephone"/>
+                    </template>
+                  </van-field>
                     <van-field
                       style="height: 35px; line-height: 100%"
                       v-if="userInfo.jobTitle"
@@ -114,8 +123,12 @@
                       v-model="userInfo.pyCard"
                       name="pyCard"
                       label="银行卡号"
-                      type="number"
+                      type="text"
-                    />
+                    >
+                    <template #right-icon>
+                        <van-icon class="icon" :name="showpyCard ? 'eye-o' : 'closed-eye'" @click="togglepyCard"/>
+                    </template>
+                  </van-field>
 
                     <van-field
                       style="height: 35px; line-height: 100%"
@@ -199,7 +212,7 @@
                 </van-form>
               </div>
 
-              <span class="dialog-close-content" @click="show0 = false">×</span>
+              <span class="dialog-close-content" @click="show0 = false, showIdentityId = false, showphone = false , showpyCard =false ">×</span>
             </van-dialog>
             <p>我的信息</p>
           </van-col>
@@ -347,6 +360,9 @@
   const showDitu = ref(false);
   const handoff = ref(false);
   const handoffValue = ref('xysh-img1');
+  const showIdentityId = ref(false);
+  const showphone = ref(false);
+  const showpyCard = ref(false);
 
   function toggleShow() {
     if (handoff.value) {
@@ -400,6 +416,13 @@
     dormitoryStatus: 0, // 是否住宿（1：是，0：否）
     mealCard: '', // 饭卡
     dormitoryId: '',
+    identityIdFull:'',
+    phoneFull:'',
+    pyCardFull:'',
+    identityIdMasked:'',
+    phoneMasked:'',
+    pyCardMasked:'',
+    
   });
 
   const showGroup = () => {
@@ -441,7 +464,22 @@
       (res) => {
         console.log('获取到的用户信息', res);
         Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性
-        // console.log( store.LoginUser.majorId)
+
+        // 保存完整的用户信息
+        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;
+        
+        console.log("userInfo.phone",userInfo.phone);
         store.setMajorId(store.LoginUser.majorId);
         Object.assign(showIcon, res.result);
       },
@@ -460,6 +498,33 @@
     });
     return majorName;
   }
+   // 切换显示和隐藏身份证号
+   const toggleIdentityId = () => {
+      showIdentityId.value = !showIdentityId.value;
+      if(showIdentityId.value){
+        userInfo.identityId = userInfo.identityIdFull;  // 显示完整身份证号
+      }else{
+        userInfo.identityId = userInfo.identityIdMasked;  // 显示完整身份证号
+      }
+    };
+    // 切换显示和隐藏身份证号
+   const togglephone = () => {
+      showphone.value = !showphone.value;
+      if(showphone.value){
+        userInfo.phone = userInfo.phoneFull;  // 显示完整身份证号
+      }else{
+        userInfo.phone = userInfo.phoneMasked;  // 显示完整身份证号
+      }
+    };
+    // 切换显示和隐藏身份证号
+   const togglepyCard = () => {
+      showpyCard.value = !showpyCard.value;
+      if(showpyCard.value){
+        userInfo.pyCard = userInfo.pyCardFull;  // 显示完整身份证号
+      }else{
+        userInfo.pyCard = userInfo.pyCardMasked;  // 显示完整身份证号
+      }
+    };
 
   const majors = [
     {
@@ -680,4 +745,9 @@
     background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
     background-size: cover;
   }
+  .icon {
+    font-size: 24px; 
+    color: #666; 
+    margin-right: -20px;
+  }
 </style>