update

src/App.vue

@@ -141,7 +141,6 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS, (id) => {
     @address-close="addressShow = false"></Address>
   <Ad :show="adShow" @close="adShow = false"></Ad>
   <Lottery :show="lotteryShow" @close="lotteryShow = false"></Lottery>
-  <Login :show="loginShow" @login-success="handleLoginSuccess" />
 </template>
 
 <style scoped>

src/components/GenerateImg.vue

@@ -19,7 +19,7 @@ onMounted(() => {
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
 import { tr } from "element-plus/es/locales.mjs"
-
+const router = useRouter();
 // 上传前的校验
 const beforeUpload = (file) => {
   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -83,7 +83,12 @@ const handleError = (error) => {
 
 const uploadItems = ref([])
 
-const initializeUploadItems = () => {
+const initializeUploadItems = (item) => {
+  if (!item) {
+    router.push({
+      name: 'home'
+    });
+  }
   const count = globalStore.people_count;
   
   const items = Array(count).fill(null).map(() => ({
@@ -97,8 +102,8 @@ const initializeUploadItems = () => {
 const route = useRoute()
 const imageUrl = ref(globalStore.select_template);
 
-watch(imageUrl, () => {
+watch(imageUrl, (item) => {
-  initializeUploadItems()
+  initializeUploadItems(item)
 }, { immediate: true })
 
 const uploadRefs = ref([]);
@@ -210,7 +215,6 @@ const generateImage = async (options) => {
   }
 }
 
-const router = useRouter();
 const goBack = () => {
   router.back();
 };
@@ -370,7 +374,6 @@ const showPhotoSquare = () => {
   isPhotoSquareVisible.value = true;
 };
 
-
 </script>
 
 <template>
@@ -421,7 +424,7 @@ const showPhotoSquare = () => {
           >
             <el-button class="upload-img-wrapper upload-btn" :style="buttonPosition(index + 1)">
               <div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl, 'no-pointer-events': disableClick }"
-              :style="{ width: buttonPosition(index + 1)['--item-width'] }">
+              :style="{ width: buttonPosition(index + 1)['--item-width'], 'z-index': 11 }">
                 <img 
                   v-if="!item.imageUrl"
                   src="../assets/images/upload-img.png" 
@@ -454,12 +457,10 @@ const showPhotoSquare = () => {
     </div>
   </div>
   <MyPhoto 
-    v-if="isMyPhotoVisible" 
     @go-photo-square="showPhotoSquare" 
     v-model:show="isMyPhotoVisible" 
   />
   <PhotoSquare 
-    v-else  
     @go-my-photo="showMyPhoto" 
     v-model:show="isPhotoSquareVisible" 
   />

src/components/HomePage.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter } from 'vue-router'
-import { Request, Storage } from "../libs/utils"
 import faceFamily from "../assets/audio/faceFamily.mp3"
 import MyPhoto from './MyPhoto.vue'
 import PhotoSquare from './PhotoSquare.vue'
 import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { globalStore } from "../globalstore.js";
+import Login from '../components/Login.vue'
+import { isWeixin, isLogin, getParam, Storage, Request } from "../libs/utils"
 
 defineProps({
   show: true
@@ -86,6 +87,66 @@ const showPhotoSquare=()=>{
   isMyPhotoVisible.value = false;
   isPhotoSquareVisible.value = true;
 }
+
+const loginShow = ref(false)
+// 登录状态
+const userStatus = async (callback) => {
+  const pageCode = getParam("code")
+  const userinfos = Storage.get("userinfos")
+  if (isWeixin()) {
+    if (!pageCode) {
+      weui.alert("未获取到code")
+      return
+    }
+    const weixinResult = await Request("wechat/login", {
+      code: pageCode
+    })
+    Storage.set("userinfos", weixinResult.json)
+    if (weixinResult.json && weixinResult.json.phone) {
+      loginShow.value = false
+      callback && callback()
+    } else {
+      loginShow.value = true
+    }
+  } else {
+    loginShow.value = true
+  }
+}
+
+//初始化持久数据
+const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
+  const result = await Request('game/info', { refresh_official: refresh_official, refresh_cap_scan: refresh_cap_scan }, "GET")
+
+  if (result.res.status === 200) {
+    globalStore.draw_chances = result.json.draw_chances
+    globalStore.game_chances = result.json.game_chances
+    globalStore.invitees = result.json.invitees
+    globalStore.followed_official = result.json.followed_official
+    globalStore.cap_scan = result.json.cap_scan
+    globalStore.game_chances_view_recipes = result.json.game_chances_view_recipes
+    globalStore.MAX_VIEW_RECIPES_DAILY = result.json.constants.MAX_VIEW_RECIPES_DAILY
+    globalStore.CONSUME_POINT_1_PER_DRAW = result.json.constants.CONSUME_POINT_1_PER_DRAW
+    globalStore.MAX_CAP_SCAN = result.json.constants.MAX_CAP_SCAN
+    globalStore.MAX_INVITE_DAILY = result.json.constants.MAX_INVITE_DAILY
+
+    globalToastEvent.emit(ToastType.MOUNTED)
+  }
+}
+
+const handleLoginSuccess = async () => {
+  console.log("已登录")
+  loginShow.value = false
+
+  await initUserGameInfos(true, true)
+}
+
+if (isLogin()) {
+  handleLoginSuccess()
+} else {
+  userStatus(handleLoginSuccess)
+}
+
+
 </script>
 
 <template>
@@ -132,6 +193,7 @@ const showPhotoSquare=()=>{
 
   <MyPhoto @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
   <PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
+  <Login :show="loginShow" @login-success="handleLoginSuccess" />
 </template>
 
 <style scoped>

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',
+            left: marker.x + 'vw',
-            top: marker.y + 'px',
+            top: marker.y + 'vw',
-            width: marker.width + 'px',
+            width: marker.width + 'vw',
-            height: marker.height + 'px'
+            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 {

src/components/PhotoSquare.vue

@@ -15,9 +15,7 @@ watch(() => props.show, async (newVal) => {
   if (!newVal) {
     return
   }
-  if (newVal) {
+  fetchImages();
-    fetchImages();
-  }
 })
 
 const emit = defineEmits(['go-my-photo', 'update:show']);
@@ -73,7 +71,7 @@ watch(() => mergeId, async (newVal) => {
     return
   }
   if (newVal.value) {
-    fetchImages();
+    getInviteInfo();
   }
 })
 
@@ -127,7 +125,7 @@ const inviteHelp = ()=> {
 // })
 const markers = ref([]);
 markers.value = [
-  { x: 50, y: 50, width: 100, height: 80 }
+  { x: 50, y: 32, width: 50, height: 14 }
 ];
 
 </script>
@@ -143,10 +141,10 @@ markers.value = [
           :key="index"
           class="marker"
           :style="{
-            left: marker.x + 'px',
+            left: marker.x + 'vw',
-            top: marker.y + 'px',
+            top: marker.y + 'vw',
-            width: marker.width + 'px',
+            width: marker.width + 'vw',
-            height: marker.height + 'px'
+            height: marker.height + 'vw'
           }"
           @click.stop="$emit('go-my-photo')">
       </div>
@@ -244,10 +242,6 @@ markers.value = [
   line-height: 50px;
 }
 .marker {
-  left: 50vw !important;
-  top: 32vw !important;
-  width: 50vw !important;
-  height: 14vw !important;
   position: absolute;
 }
 .flex-container-detail-invite {

src/components/SelectTemplateV2.vue

@@ -27,8 +27,7 @@ const goToGenerateImgPage = (item) => {
   if (!hasVisitedBefore) {
     localStorage.setItem('hasVisitedGenerateImg', 'true');
     router.push({
-      name: 'generateImgConfirm',
+      name: 'generateImgConfirm'
-      query: { imageUrl: item.imageUrl }
     });
   } else {
     router.push({

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;

src/components/TodoList.vue

@@ -53,13 +53,17 @@ const handleHaibao = async () => {
   if (haibaoUrl.value) {
     return
   }
-
+  // let userPicture = 'https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg'
-  const loading = weui.loading()
+  let userPicture = '';
-  const userPicture = await loadImage('https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250910/face-merge-406c6990-249c-4248-b719-ecedf6e20848.jpg')
+  if (!globalStore.result_url) {
+    weui.alert("请先参与活动合成图片并打榜！")
+  } else {
+    userPicture = await loadImage(globalStore.result_url)
+  }
 
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
-  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(userPicture, 50, 50)
   haibaoCover.add(mask, 10, 100)
   haibaoCover.add(haibaoCoverBorder, 0, 0)
   haibaoCover.draw('destination-in').then(() => {