邮箱脱敏

src/utils/common.ts

@@ -448,3 +448,16 @@ export function query (url?:string){
 
   return json
 }
+
+/**
+ * 邮箱脱敏
+ * @param email 邮箱地址
+ * @returns 脱敏后的邮箱地址
+ * @example
+ */
+export function maskEmail(email: string): string {
+   if (!email.includes('@')) return email;
+  let [localPart, domain] = email.split('@');
+  let prefix = localPart.length > 5 ? localPart.substring(0, 5) : localPart;
+  return prefix + '****@' + domain;
+}

src/views/personalCenter/components/accountCenter/account.vue

@@ -68,7 +68,7 @@
             </div>
         </div>
         <div class="text-sm w-[200px] font-medium">
-            <span :class="[userInfor?.email?'':'customColor-text-7']">{{ userInfor?.email?userInfor.email:t('personal.notYetBin') }}</span>
+            <span :class="[userInfor?.email?'':'customColor-text-7']">{{ userInfor?.email||t('personal.notYetBin') }}</span>
         </div>
         <div class="w-[415px] leading-[20px] SourceHanSansCN">
             <div class="customColor-text-7">{{ t('personal.bindEmailTip') }}</div>
@@ -158,7 +158,7 @@ import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
 import { Message } from '@arco-design/web-vue'
-import { query } from '@/utils/common'
+import { query,maskEmail } from '@/utils/common'
 import { useRouter } from 'vue-router'
 import UserService from '@/services/UserService'
 import providerTypeEnum from '@/utils/providerTypeEnum'

src/views/personalCenter/myOrder.vue

@@ -11,7 +11,9 @@
                             {{ t('personal.bindingEmail')}}
                         </div>
                         <div class="mt-[10px] flex items-center">
-                            <span class="text-base font-normal">{{ userInfor?.email || t('personal.unbound') }}</span>
+                            <span class="text-base font-normal">
+                                {{ maskEmail(userInfor?.email || t('personal.unbound')) }}
+                            </span>
                             <img class="w-[15px] h-[15px] ml-[10px] cursor-pointer" 
                             src="../../assets/images/personal/pen.png" 
                             alt="" @click="editEmailClick"/>
@@ -158,6 +160,7 @@ import OrderStatusEnum from '@/utils/orderStautsEnum'
 import ListProductTypeEnum from '@/utils/listProductType'
 import Modal from '@/components/common/modal.vue'
 import editEmail from './components/myOrder/editEmail.vue'
+import { maskEmail } from '@/utils/common'
 
 const { t } = useI18n()