Browse Source

fix: APP 个人信息头像展示优化

zhangying 11 months ago
parent
commit
20f7010f5d
2 changed files with 27 additions and 11 deletions
  1. 1 1
      h5app/src/views/pages/user/myInfo.vue
  2. 26 10
      h5app/src/views/sapp/tabUser.vue

+ 1 - 1
h5app/src/views/pages/user/myInfo.vue

@@ -3,7 +3,7 @@
     <ion-header  class="header-theme2">
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-icon :icon="arrowBackOutline" @click="()=>router.push('./')"></ion-icon>
+          <ion-icon :icon="arrowBackOutline" @click="()=>router.go(-1)"></ion-icon>
         </ion-buttons>
         <ion-title>个人信息修改</ion-title>
       </ion-toolbar>

+ 26 - 10
h5app/src/views/sapp/tabUser.vue

@@ -50,7 +50,9 @@
       <div class="tab-user-content">
          <div class="user_info">
            <div class="user_img">
-             <b-image v-if="loadImage" :file-ref-id="user.userID" :readonly="true" :is-single="true"></b-image>
+             <img v-if="!avtImageUrl" class="img-user" src="@/assets/icon/icon-user-2x.png"
+                  onerror="this.src='@/assets/icon/icon-user-2x.png'" alt=""/>
+             <img v-else :src="avtImageUrl" alt="" style="border-radius: 10px"/>
            </div>
            <div class="user_text">
              <h2>{{user.name}}</h2>
@@ -98,6 +100,7 @@ import {getQRCodeUrlToBase64} from "@/api/wechat";
 import {base64ToBlob} from "@/utils/imageUtils";
 import BImage from "@/components/bImage.vue";
 import {useRouter} from "vue-router";
+import {getFileBase64, getList} from "@/api/system/file";
 
 const $router = useRouter();
 
@@ -118,7 +121,7 @@ const imgStyle = ref({
   height: '0px',
   margin: '0px 0px 0px 40px'
 });
-const loadImage = ref(true);
+const avtImageUrl = ref<any>("")
 
 const updateBrowserWidth = () => {
   const browserWidth = window.innerWidth;
@@ -159,19 +162,32 @@ const presentAlert = async () => {
 // 监听路由变化
 watch(() => $router.currentRoute.value.path, (to, form) => {
   if (form == "/tabs/tabUser/myInfo" && to == "/tabs/tabUser") {
-    loadImage.value = false;
-    setTimeout(() => {
-      loadImage.value = true;
-    }, 500)
+    getAvtImag(user.value.userID);
   }
 }, {immediate: true});
 
+function getAvtImag(fileRefID: any) {
+  getList({fileRefID}).then((res: any) => {
+    if (res.length <= 0) {
+      avtImageUrl.value = false;
+    } else {
+      // 获取图片
+      getFileBase64(res[0].fileId).then(data => {
+        if (data) {
+          avtImageUrl.value = URL.createObjectURL(base64ToBlob("data:image/png;base64," + data));
+        }
+      })
+    }
+  })
+}
+
 onMounted(() => {
   getConfig().then((res: any) => {
     isDev.value = res.isDev;
   }, () => {
     isDev.value = true;
-  })
+  });
+  getAvtImag(user.value.userID);
 })
 
 </script>
@@ -277,12 +293,12 @@ onMounted(() => {
     z-index: 2;
 
     .user_img {
-      width: 30%;
+      width: 25%;
     }
 
     .user_text{
-      width: 44%;
-      padding-left: 5px;
+      width: 49%;
+      padding-left: 10px;
 
       h2 {
         margin-top: 12px;