号码脱敏什么

src/views/system/user/profile/index.vue

@@ -22,7 +22,8 @@
                      <li class="list-group-item">
                         <svg-icon icon-class="phone" class="tubiao"/>手机号码
                         <!-- <div class="pull-right">{{ state.user.phonenumber }}</div> -->
-                        <div class="pull-right">{{ phoneNumber(state.user.phonenumber) }}</div>
+                        <!-- <div class="pull-right">{{ state.user.phonenumber }}</div> -->
+                        <div class="pull-right">{{ phoneNumber(showP) }}</div>
                      </li>
                      <!-- <li class="list-group-item">
                         <svg-icon icon-class="email" />用户邮箱
@@ -71,8 +72,10 @@ import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
 import { getUserProfile } from "@/api/system/user";
 import { onMounted,toRaw } from "vue";
+import { encode, decode } from '@/utils/sm2util'
 let height = ref(document.documentElement.clientHeight - 16 + "px;");
 const activeTab = ref("userinfo");
+const showP = ref()
 const state = reactive({
   user: {},
   roleGroup: {},
@@ -84,20 +87,36 @@ function getUser() {
     state.user = response.data;
     state.roleGroup = response.roleGroup;
     state.postGroup = response.postGroup;
+    state.user.phonenumber = decode(state.user.phonenumber)
+    showP.value = phoneNumber(state.user.phonenumber)
+   //  console.log('state.user',state.user);
   });
 };
 const phoneNumber = (num)=>{
    if(num){
       // console.log('num',num);
-      const str1 = num.substr(0,3)
+      num = num+''
+       const str1 = num.substr(0,3)
       const str2 = num.substr(3,4)
       const str3 = num.substr(7,4)
-      // console.log(str1,str2,str3);
-      return str1+'****'+str3
+      if(num.length<4){
+        return str1
+      }else if(num.length == 4){
+      return str1+'*'
+      }else if(num.length == 5){
+      return str1+'**'
+      }else if(num.length == 6){
+      return str1+'***'
+      }else if(num.length == 7){
+      return str1+'****'
+      }else{
+        return str1+'****'+str3
+      }
    }
 }
 const chengeUser = (number)=>{
    state.user.phonenumber = number
+   showP.value = phoneNumber(number)
 }
 getUser();
 onMounted(() => {

src/views/system/user/profile/userInfo.vue

@@ -38,7 +38,7 @@ import {
   onDeactivated,
 } from "vue";
 import { updateUserProfile,getUserProfile } from "@/api/system/user";
-
+import { encode, decode } from '@/utils/sm2util'
 const props = defineProps({
   user: {
     type: Object
@@ -55,7 +55,7 @@ const rules = ref({
 const showPhone = ref()
 function getUser() {
   getUserProfile().then(response => {
-   showPhone.value = response.data.phonenumber;
+   showPhone.value = decode(response.data.phonenumber);
    showPhone.value = phoneNumber(showPhone.value)
   });
 };
@@ -64,7 +64,10 @@ const emit = defineEmits(["chengeUser"]);
 function submit() {
   proxy.$refs.userRef.validate(valid => {
     if (valid) {
-      updateUserProfile(props.user).then(response => {
+      const query=props.user
+      query.phonenumber = encode(query.phonenumber)
+      // console.log('props.user',query);
+      updateUserProfile(query).then(response => {
         proxy.$modal.msgSuccess("修改成功");
       });
     }
@@ -76,27 +79,12 @@ function close() {
 };
 const phoneNumChange = (num)=>{
   
-      const str1 = num.substr(0,3)
-      const str2 = num.substr(3,4)
-      const str3 = num.substr(7,4)
-      if(num.length<4){
-        showPhone.value = str1
-      }else if(num.length == 4){
-      showPhone.value = str1+'*'
-      }else if(num.length == 5){
-      showPhone.value = str1+'**'
-      }else if(num.length == 6){
-      showPhone.value = str1+'***'
-      }else if(num.length == 7){
-      showPhone.value = str1+'****'
-      }else{
-        showPhone.value = str1+'****'+str3
-      }
       emit('chengeUser',num)
   // console.log('num',num);
 }
 const phoneNumber = (num)=>{
    if(num){
+    num = num+''
       // console.log('num',num);
       const str1 = num.substr(0,3)
       const str2 = num.substr(3,4)