update

src/components/SynthesizedResults.vue

@@ -47,6 +47,16 @@ const openHaibao = (e) => {
   handleHaibao()
 }
 onMounted(openHaibao)
+
+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 handleHaibao = async () => {
   if (haibaoUrl.value) {
     return
@@ -55,6 +65,12 @@ const handleHaibao = async () => {
   const loading = weui.loading()
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
+  if (!globalStore.result_url) {
+    router.push({
+      name: 'home'
+    });
+  }
+  const userPicture = await loadImage(globalStore.result_url)
   haibaoCover.add(userPicture, 0, 0)
   haibaoCover.add(mask, 10, 100)
   haibaoCover.add(haibaoCoverBorder, 0, 0)
@@ -84,8 +100,15 @@ const handleHaibao = async () => {
       })
     })
   })
-
 }
+let userPictureVal = userPicture;
+const getBackgroundImage = () => {
+  if (globalStore.result_url) {
+    return userPictureVal = globalStore.result_url;
+  } else {
+    return userPictureVal;
+  }
+};
 </script>
 
 <template>
@@ -95,13 +118,13 @@ const handleHaibao = async () => {
         <img src="../assets/images/go-home-btn.png" @click="navigateToHome" alt="回到首页">
       </div>
 
-      <!-- <div class="mask-background mask-image" :style="{ backgroundImage: `url(${globalStore.result_url})` }">
+      <!-- <div class="mask-background image-container" :style="{ backgroundImage: `url(${getBackgroundImage()})` }">
       </div>
       <img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版"> -->
       <div class="fullsection" v-show="haibaoShow">
         <div class="haibao" :style="userhaibaoCover">
           <img :src="haibaoUrl" alt="">
-          <div class="close" @click="haibaoShow = false"></div>
+          <!-- <div class="close" @click="haibaoShow = false"></div> -->
         </div>
       </div>
 
@@ -119,6 +142,35 @@ const handleHaibao = async () => {
 </template>
 
 <style scoped>
+.mask-background {
+  -webkit-mask-image: url("../assets/images/my-photo-mengban.png");
+  mask-image: url("../assets/images/my-photo-mengban.png");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.mengban-border {
+  width: 81vw;
+  position: absolute;
+  top: 28vw;
+}
+
+.image-container {
+  width: 80vw;
+  top: 5.2vw;
+  margin-bottom: 3vw;
+  background-image: url('../assets/images/home-bg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  min-height: -webkit-fill-available;
+  position: absolute;
+  cursor: pointer;
+}
+
 .fullsection {
   position: fixed;
   top: 0;
@@ -128,12 +180,12 @@ const handleHaibao = async () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, .7);
+  /* background-color: rgba(0, 0, 0, .7); */
 }
 
 .haibao {
   position: relative;
-  width: 65.37037vw;
+  width: 70vw;
   height: 119.444444vw;
   background-image: url("../assets/images/haibao-cover.webp");
   background-repeat: no-repeat;