fix:bug

src/pages/profile/index.vue

@@ -3,20 +3,21 @@
     <div
       class="h-250 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover"
     >
-      <div class="absolute left-20 bottom-10 right-20">
+      <div class="absolute left-20 bottom-10 right-20 text-black-3">
         <NuxtLink to="/profile/userInfo" class="flex items-center space-x-10">
           <van-image
             :src="userInfo.headImageUrl"
+            class="shrink-0"
             width="75px"
             height="75px"
             fit="cover"
             radius="37.5px"
           />
-          <span class="text-2xl break-all font-semibold text-white">
+          <span class="text-2xl flex-1 break-all font-semibold">
             {{ userInfo.showName }}</span
           >
         </NuxtLink>
-        <div class="text-xl break-all text-white font-semibold mt-15">
+        <div class="text-xl break-all font-semibold mt-15">
           个性签名：{{ userInfo.personalSign || "暂未填写" }}
         </div>
       </div>

src/pages/profile/userInfo.vue

@@ -89,8 +89,6 @@
 const userInfoStore = useUserInfoStore();
 const { userInfo } = storeToRefs(userInfoStore);
 
-const fileList = ref([]);
-
 const form = reactive({
   showName: null,
   email: null,
@@ -102,13 +100,29 @@ const form = reactive({
   personalSign: null,
 });
 
+const fileList = computed({
+  set(val) {
+    if (!val.length) {
+      form.headImageUrl = null;
+      return;
+    }
+    form.headImageUrl = val[0].url;
+  },
+  get() {
+    return [
+      {
+        url: form.headImageUrl,
+      },
+    ];
+  },
+});
+
 const validatorEmail = (val) =>
   /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
     val
   );
 
 async function afterRead(file) {
-  console.log(file);
   const formData = new FormData();
   formData.append("uploadFile", file.file);
   formData.append("asImage", true);
@@ -119,7 +133,9 @@ async function afterRead(file) {
       body: formData,
     });
     form.headImageUrl = data.fileUrl;
-    userInfoStore.getUserInfo();
+    // fileList.value[0] = {
+    //   url: data.fileUrl;
+    // };
   } catch (error) {}
 }
 
@@ -130,9 +146,9 @@ watch(
     form.email = userInfo.value.email;
     form.sex = userInfo.value.sex;
     form.headImageUrl = userInfo.value.headImageUrl;
-    fileList.value[0] = {
-      url: userInfo.value.headImageUrl,
-    };
+    // fileList.value[0] = {
+    //   url: userInfo.value.headImageUrl,
+    // };
     form.address = userInfo.value.address;
     form.job = userInfo.value.job;
     form.personalSign = userInfo.value.personalSign;
@@ -151,11 +167,15 @@ async function handleSubmit() {
   try {
     await request("/website/tourism/user/update", {
       method: "post",
-      body: form,
+      body: {
+        ...form,
+      },
     });
     showToast("保存成功");
     userInfoStore.getUserInfo();
-  } catch (error) {}
+  } catch (error) {
+    console.log(error);
+  }
 }
 </script>