fix: app用户头像上传与显示fix

h5app/src/views/pages/user/myInfo.vue

@@ -13,7 +13,8 @@
         <div class="bw-vue-form">
         <div class="form-input" >
           <ion-label>头像图片上传</ion-label>
-          <b-image :file-ref-id="curLoginUserInfo.userID" :readonly="false" :is-single="true"  ></b-image>
+          <b-image v-if="userInfo.userID" :file-ref-id="userInfo.userID" :readonly="false"
+                   :is-single="true"></b-image>
         </div>
         <div class="form-input">
           <ion-label>姓名</ion-label>
@@ -259,6 +260,7 @@ export default defineComponent({
         addCircleOutline,
         trashOutline,
         curLoginUserInfo,
+        userInfo,
         nationTypeList,
         politicsStatusList,
         isFullTimeList,

h5app/src/views/sapp/tabUser.vue

@@ -50,13 +50,13 @@
       <div class="tab-user-content">
          <div class="user_info">
            <div class="user_img">
-             <img class="img-user" src="@/assets/icon/icon-user-2x.png" onerror="this.src='@/assets/icon/icon-user-2x.png'" />
+             <b-image v-if="loadImage" :file-ref-id="user.userID" :readonly="true" :is-single="true"></b-image>
            </div>
            <div class="user_text">
              <h2>{{user.name}}</h2>
              <p>驿站工作人员</p>
            </div>
-           <div>
+           <div class="qr_img">
              <img :src="infoQrcodeUrl" :style="imgStyle">
            </div>
          </div>
@@ -88,10 +88,14 @@
 import { alertController } from '@ionic/vue';
 import { useUserStore } from '@/store/modules/user';
 import router from '@/router';
-import {getCurrentInstance, onMounted, onUpdated, ref} from "vue";
+import {getCurrentInstance, onMounted, onUpdated, ref, watch} from "vue";
 import {getConfig} from "@/utils/config";
 import {getQRCodeUrlToBase64} from "@/api/wechat";
 import {base64ToBlob} from "@/utils/imageUtils";
+import BImage from "@/components/bImage.vue";
+import {useRouter} from "vue-router";
+
+const $router = useRouter();
 
 const infoQrcodeUrl = ref("");
 const { appContext : { config: { globalProperties } } } = getCurrentInstance();
@@ -110,12 +114,13 @@ const imgStyle = ref({
   height: '0px',
   margin: '0px 0px 0px 40px'
 });
+const loadImage = ref(true);
 
 const updateBrowserWidth = () => {
   const browserWidth = window.innerWidth;
   imgStyle.value.width = (browserWidth - 130) / 3 + 'px';
   imgStyle.value.height = (browserWidth - 130) / 3 + 'px';
-  imgStyle.value.margin = '0px 0px 0px '+(browserWidth - 200) / 4 + 'px';
+  imgStyle.value.margin = '0px 0px 0px ' + (browserWidth - 200) / 15 + 'px';
 }
 // 设置初始浏览器宽度
 updateBrowserWidth();
@@ -147,6 +152,16 @@ const presentAlert = async () => {
   await alert.present();
 }
 
+// 监听路由变化
+watch(() => $router.currentRoute.value.path, (to, form) => {
+  if (form == "/tabs/tabUser/myInfo" && to == "/tabs/tabUser") {
+    loadImage.value = false;
+    setTimeout(() => {
+      loadImage.value = true;
+    }, 500)
+  }
+}, {immediate: true});
+
 onMounted(() => {
   getConfig().then((res: any) => {
     isDev.value = res.isDev;
@@ -249,6 +264,7 @@ onMounted(() => {
   .user_info{
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin: 90px 10px 10px 10px;
     padding: 10px;
     border-radius: 10px;
@@ -301,5 +317,15 @@ onMounted(() => {
 
 }
 
+.user_img {
+  .img-list {
+    padding: 0;
+  }
+
+  .img-item {
+    width: 100%;
+  }
+}
+
 
 </style>