update

src/components/MyPhoto.vue

@@ -16,9 +16,7 @@ watch(() => props.show, async (newVal) => {
   if (!newVal) {
     return
   }
-  if (newVal) {
-    fetchImages();
-  }
+  fetchImages();
 })
 
 const emit = defineEmits(['go-photo-square', 'update:show']);
@@ -47,6 +45,7 @@ const fetchImages = async () => {
     images.value = data.data;
     const foundItem = data.data.find(item => item.is_public === true);
     if (foundItem) {
+      globalStore.result_url = foundItem.result_url;
       displayZhuli.value = true;
     } else {
       displayZhuli.value = false;
@@ -148,7 +147,15 @@ import Haibao from "@/libs/haibao";
 import mask from "../assets/images/haibao-mask.png";
 import haibaoCoverBorder from "../assets/images/haibao-cover.png";
 import bg from "../assets/images/haibao-bg.png"
-// import userPicture from "../assets/images/home-bg.png"; //TODO: globalStore.result_url 这里得图片后面要换成用户参榜的图片
+const loadImage = (src)=> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`无法加载图片: ${src}`));
+    img.src = src;
+  });
+}
 
 const haibaoShow = ref(false);
 const haibaoUrl = ref('');
@@ -170,6 +177,7 @@ const handleHaibao = async () => {
   const loading = weui.loading()
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
+  const userPicture = await loadImage(globalStore.result_url)
   haibaoCover.add(userPicture, 0, 0)
   haibaoCover.add(mask, 10, 100)
   haibaoCover.add(haibaoCoverBorder, 0, 0)
@@ -204,7 +212,7 @@ const handleHaibao = async () => {
 
 const markers = ref([]);
 markers.value = [
-  { x: 50, y: 50, width: 100, height: 80 }
+  { x: 0, y: 32, width: 50, height: 14 }
 ];
 
 </script>
@@ -220,10 +228,10 @@ markers.value = [
           :key="index"
           class="marker"
           :style="{
-            left: marker.x + 'px',
-            top: marker.y + 'px',
-            width: marker.width + 'px',
-            height: marker.height + 'px'
+            left: marker.x + 'vw',
+            top: marker.y + 'vw',
+            width: marker.width + 'vw',
+            height: marker.height + 'vw'
           }"
           @click.stop="$emit('go-photo-square')">
       </div>
@@ -298,10 +306,6 @@ markers.value = [
   line-height: 50px;
 }
 .marker {
-  left: 0 !important;
-  top: 32vw !important;
-  width: 50vw !important;
-  height: 14vw !important;
   position: absolute;
 }
 .fullsection {