update

2025-09-12 22:20:39 +08:00
parent e3783c5f0a
commit 7d65fd2a3a
17 changed files with 605 additions and 730 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ pnpm-debug.log*
 /__MACOSX
 /node_modules
 /设计图
+/src/assets/images
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,13 +11,8 @@ import Todolist from "./components/TodoList.vue";
 import Rule from "./components/Rule.vue";
 import Ad from "./components/Ad.vue"
 import Lottery from './components/Lottery.vue';
-import SelectTemplate from './components/SelectTemplate.vue'
-import GenerateLoading from './components/GenerateLoading.vue'
-import SelectTemplateV2 from './components/SelectTemplateV2.vue'
 import { globalStore } from "./globalstore";
-import { useRouter } from 'vue-router'
 import bgmUrl from "./assets/audio/bgm.mp3"
-import GenerateImg from './components/GenerateImg.vue';
 var bgmSound = new Howl({
  src: [bgmUrl],
  loop: true
@@ -34,32 +29,6 @@ const activePrizeId = ref(0)
 const adShow = ref(false)
 const lotteryShow = ref(false)

-//分享进来
-const fromShare = async () => {
-  const fromId = getParam("fromid")
-  if (!fromId) {
-    return
-  }
-
-  const userinfos = Storage.get("userinfos")
-  if (fromId === userinfos.invite_code) {
-    return
-  }
-
-  const inviteInfos = await Request("invite/info", { invite_code: fromId, type: "iceSpr" }, "GET")
-  if (inviteInfos.res.status == 200) {
-    const isHelp = inviteInfos.json.helps.find(v => v.id === inviteInfos.json.id)
-    if (!isHelp) {
-      const result = await Request("invite/help", { invite_code: fromId, type: "iceSpr" })
-      if (result.res.status == 200) {
-        weui.alert("受邀成功！")
-      }
-    } else {
-      weui.alert("您已接受过其他好友邀请，每人只能受邀一次哦～")
-    }
-  }
-}
-
 // 登录状态
 const userStatus = async (callback) => {
  const pageCode = getParam("code")
@@ -99,6 +68,8 @@ const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
    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)
  }
 }

@@ -119,6 +90,7 @@ const getUserLottery = async () => {
  // if (result.res.status === 200) {
  //   prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : []
  // }
+  //TODO 上线换成上面的
  prizelist.value = [
    { id: 1, prize_code: "FIRST", prize_name: "一等奖", coupon_type: "scene", pushed: 0 },
    { id: 2, prize_code: "FIRST1", prize_name: "二等奖", coupon_type: "scene", pushed: 1 }
@@ -170,11 +142,6 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS, (id) => {
  <Ad :show="adShow" @close="adShow = false"></Ad>
  <Lottery :show="lotteryShow" @close="lotteryShow = false"></Lottery>
  <Login :show="loginShow" @login-success="handleLoginSuccess" />
-  <!-- <HomePage :show="homePageShow" /> -->
-  <!-- <SelectTemplateV2 /> -->
-  <!-- <GenerateImg /> -->
-  <!-- <GenerateLoading /> -->
-  <!-- <GenerateImgConfirm /> -->
 </template>

 <style scoped>
--- a/src/components/GenerateImg.vue
+++ b/src/components/GenerateImg.vue
@@ -3,7 +3,7 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRouter, useRoute } from 'vue-router'
 import positionMaps from '../static/positionMaps.js'
 import imagePositionMaps from '../static/imagePositionMaps.js'
-import { Storage } from "../libs/utils"
+import { Request, Storage } from "../libs/utils"
 import { globalStore } from "../globalstore.js";
 import faceTemplate from "../static/ali_face_template.js";
 import MyPhoto from './MyPhoto.vue'
@@ -61,13 +61,15 @@ const getTemplateIdsFromUrl = (response, url, index)=> {
 const handleSuccess = (response, index) => {
  // 上传成功后，将文件信息添加到数组
  if (response) {
-    const ids = getTemplateIdsFromUrl(response, window.location.href, index);
+    const ids = getTemplateIdsFromUrl(response, globalStore.select_template, index);
    uploadedFiles.push({
      templateIds: ids
    });
  }
+  if (response && response.url) {
    uploadItems.value[index].imageUrl = response.url;
    ElMessage.success('上传成功！');
+  }
 };

 // 上传失败回调
@@ -76,36 +78,10 @@ const handleError = (error) => {
  ElMessage.error('上传失败，请重试！');
 };

-// 根据imageUrl的结尾编号确定需要多少个上传项
-const getUploadItemsCount = () => {
-  if (!imageUrl.value) return 2 // 默认值
-
-  const url = imageUrl.value.toString()
-
-  if (url.includes('xianxia') && url.endsWith('_3.png')) {
-    return 3
-  }
-
-  if (url.includes('paidui') && url.endsWith('_5.png')) {
-    return 3
-  }
-
-  if (url.endsWith('_1.png') || url.endsWith('_2.png') || url.endsWith('_3.png')) {
-    return 2
-  } else if (url.endsWith('_4.png')) {
-    return 3
-  } else if (url.endsWith('_5.png')) {
-    return 4
-  } else if (url.endsWith('_6.png')) {
-    return 5
-  }
-
-  return 2 // fallback
-}
 const uploadItems = ref([])

 const initializeUploadItems = () => {
-  const count = getUploadItemsCount()
+  const count = globalStore.people_count;
  
  const items = Array(count).fill(null).map(() => ({
    imageUrl: '',
@@ -116,7 +92,7 @@ const initializeUploadItems = () => {
 }

 const route = useRoute()
-const imageUrl = computed(() => route.query.imageUrl)
+const imageUrl = ref(globalStore.select_template);

 watch(imageUrl, () => {
  initializeUploadItems()
@@ -124,89 +100,28 @@ watch(imageUrl, () => {

 const uploadRefs = ref([]);

+// 删除图片
 const clearUploadFile = (index) => {
  if (uploadRefs.value[index]) {
    uploadRefs.value[index].clearFiles();
    uploadItems.value[index].imageUrl = '';
    
-    uploadedFiles.value.splice(index, 1);
+    uploadedFiles.splice(index, 1);
  }
 };

 // 存储上传成功的文件数据
 const uploadedFiles = [];
 const currentImageUrl = ref(null)
-// const generateImage = (options) => {
-//   globalStore.generateStatus = true;
-//   const urlParams = new URLSearchParams(window.location.search);
-//   currentImageUrl.value = urlParams.get('imageUrl');
-//   globalStore.generateImgTemplates.push(currentImageUrl.value);

-//   disableClick.value = true;
-//   displayScanModel.value = true;
-//   const formData = {
-//     "template_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee",
-//     "faces": [
-//       {
-//         "image_id": 65,
-//         "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_0"
-//       },
-//       {
-//         "image_id": 66,
-//         "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_1"
-//       }
-//     ],
-//     "is_public": false
-//   }
-
-//   const timeoutPromise = new Promise((resolve, reject) => {
-//     setTimeout(() => {
-//       resolve({ timedOut: true });
-//     }, 4000);
-//   });
-
-//   const apiPromise = fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
-//     method: 'POST',
-//     headers: {
-//       'Content-Type': 'application/json',
-//       Accept: "application/json",
-//       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
-//     },
-//     body: JSON.stringify(formData)
-//   })
-//   .then(response => response.json())
-//   .then(data => {
-//     globalStore.mergeId = data.merge_id;
-//     fetch(`https://api.example.com/face/merge/${data.merge_id}/status`, {
-//       method: 'GET',
-//       headers: {
-//         'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
-//       }
-//     })
-//     const res = response.json()
-//     console.log('get status Success:', res)
-//     console.log('merge Success:', data);
-//     return { success: true, data };
-//   })
-//   .catch((error) => {
-//     console.error('Error:', error);
-//     return { success: false, error };
-//   });
-
-//   Promise.race([apiPromise, timeoutPromise])
-//     .then(result => {
-//       if (result.success) {
-//         navigateToSynthesizedResults();
-//       }
-//     })
-//     .catch((error) => {
-//       console.error('Error:', error);
-//     });
-// }
 const faces = [];
+const displayMyPhotoBtn = ref(false);
+const displayScanImg = ref(false);
+const disableScanAnimation = ref(false);
 const generateImage = async (options) => {
  console.log(uploadedFiles);
  globalStore.generateStatus = true;
+  displayScanImg.value = true;
  const urlParams = new URLSearchParams(window.location.search);
  currentImageUrl.value = urlParams.get('imageUrl');
  
@@ -232,6 +147,7 @@ const generateImage = async (options) => {
  }

  try {
+    const loading = weui.loading();
    const mergeResponse = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
      method: 'POST',
      headers: {
@@ -244,36 +160,46 @@ const generateImage = async (options) => {
    
    const mergeData = await mergeResponse.json();
    globalStore.mergeId = mergeData.merge_id;
-    
-    let statusSuccess = false;
-    const startTime = Date.now();
-    const timeoutDuration = 2000;
-    
-    while (Date.now() - startTime < timeoutDuration) {
-      fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeData.merge_id}/status`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
-        }
+    const navigateToSynthesizedResults = () => {
+      router.push({
+        name: 'synthesizedResults'
      })
-      .then(response => response.json())
-      .then(data => {
-          console.log('Success:', data);
-          if (data.status = 'success') {
-            globalStore.result_url = data.result_url;
-            statusSuccess = true;
-          }
-      })
-      .catch((error) => {
-          console.error('Error:', error);
-      });
    }
    
-    if (statusSuccess) {
-      navigateToSynthesizedResults();
+    let index = 0
+    const max = 4;
+    const Timer = setInterval(()=>{
+      if (index >= max) {
+        loading.hide();
+        clearInterval(Timer)
      } else {
-      navigateToSynthesizedResults(); //TODO 上线删除
-      console.log('Status check timed out or failed');
+        index++
+        mergeFetch(index)
+      }
+    }, 1000)
+
+    const mergeFetch = async (index)=> {
+      const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', false)
+
+      if (statusRes.res.status === 200) {
+        if (statusRes.json.status === 'success') {
+          displayMyPhotoBtn.value = false;
+          loading.hide();
+          clearInterval(Timer)
+          navigateToSynthesizedResults();
+          globalStore.result_url = statusRes.json.result_url;
+        } else {
+          if (index === 4) {
+            disableScanAnimation.value = true;
+            displayMyPhotoBtn.value = true;
+          }
+        }
+      } else {
+        if (index === 4) {
+          disableScanAnimation.value = true;
+          displayMyPhotoBtn.value = true;
+        }
+      }
    }
    
  } catch (error) {
@@ -432,6 +358,7 @@ const isMyPhotoVisible = ref(false);
 const isPhotoSquareVisible = ref(false);
 const showMyPhoto = () => {
  isMyPhotoVisible.value = true;
+  // displayMyPhotoBtn.value = false;
  isPhotoSquareVisible.value = false;
 };

@@ -440,11 +367,7 @@ const showPhotoSquare = () => {
  isPhotoSquareVisible.value = true;
 };

-const navigateToSynthesizedResults = () => {
-  router.push({
-    name: 'synthesizedResults'
-  })
-}
+
 </script>

 <template>
@@ -458,7 +381,8 @@ const navigateToSynthesizedResults = () => {
        <img src="../assets/images/back-btn.png" @click="goBack" alt="后退">
      </div>

-      <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img">
+      <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img" 
+      :style="{ pointerEvents: displayMyPhotoBtn ? 'none' : 'auto' }" >
        <img :src="imageUrl" alt="模板图片">
      </div>

@@ -473,9 +397,10 @@ const navigateToSynthesizedResults = () => {
      <div class="scene-item item-4" v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible">
        <img src="../assets/images/scan.png" class="blocked-image" alt="扫描框">
      </div>
-      <img v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" src="../assets/images/scan-line.png" class="moving-image" alt="扫描line">
+      <img v-if="displayScanImg" src="../assets/images/scan-line.png" class="moving-image"
+       :style="{ animationPlayState: disableScanAnimation ? 'paused' : 'running' }" alt="扫描line">

-      <div v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item item-5" @click="showMyPhoto" >
+      <div v-if="displayMyPhotoBtn" class="scene-item item-5" @click="showMyPhoto" >
        <img src="../assets/images/my-photo-btn.png" class="blocked-image" alt="查看我的照片">
      </div>

@@ -505,7 +430,7 @@ const navigateToSynthesizedResults = () => {
          </el-upload>

          <!-- 图片预览 -->
-          <div v-if="item.imageUrl" class="preview-container">
+          <div v-if="item.imageUrl" class="preview-container" :style="{ pointerEvents: displayMyPhotoBtn ? 'none' : 'auto' }">
            <img 
              :src="item.imageUrl" 
              alt="预览图" 
@@ -542,7 +467,7 @@ const navigateToSynthesizedResults = () => {
  width: 100%;
  position: absolute;
  animation: moveUpDown 3s linear infinite;
-  z-index: 2;
+  z-index: 9;
 }

@keyframes moveUpDown {
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -13,14 +13,12 @@ defineProps({
 })
 const isMusicOn = ref(false);
 const audioElement = ref(null);
-const drawChances = ref(0);
-const gameChances = ref(0);
 onMounted(() => {
-  initUserGameInfos(true, true);
  // 创建音频
  audioElement.value = new Audio(faceFamily);
  // 尝试自动播放
  tryAutoPlay();
+  //TODO 判断登录之后获取浏览器参数fromid, mergeid
 })

 // 尝试自动播放
@@ -67,16 +65,14 @@ const handleRule = () => {
 }
 const handleLottery = () => {
  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
-  if (drawChances.value <= 0) return;
-  drawChances.value -= 1;
-  globalStore.draw_chances = drawChances.value
+  if (globalStore.draw_chances <= 0) return;
+  globalStore.reducerDrawChances();
 }

 const router = useRouter();
 const navigateSelectTemplatePage = () => {
-  if (gameChances.value <= 0) return;
-  gameChances.value -= 1;
-  globalStore.game_chances = gameChances.value
+  if (globalStore.game_chances <= 0) return;
+  globalStore.reducerGameChances();
  router.push({
    name: 'selectTemplateV2'
  })
@@ -93,32 +89,21 @@ const showPhotoSquare=()=>{
  activeTab.value='photo-square',
  isPhotoSquareVisible.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) {
-    drawChances.value = result.json.draw_chances
-    gameChances.value = result.json.game_chances
-    globalStore.draw_chances = drawChances.value
-    globalStore.game_chances = gameChances.value
-  }
-}
 </script>

 <template>
  <div :show="show">
    <div class="home-wrapper">
-      <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': drawChances <= 0 }">
+      <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': globalStore.draw_chances <= 0 }">
        <img src="../assets/images/lottery.png" alt="抽奖">
        <div class="lottery-main">
-          <p class="lottery-value">{{ drawChances }}</p>
+          <p class="lottery-value">{{ globalStore.draw_chances }}</p>
        </div>
      </div>
-      <div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': gameChances <= 0 }">
+      <div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': globalStore.game_chances <= 0 }">
        <img src="../assets/images/join.png" alt="立即参与">
        <div class="join-main">
-          <p class="join-value">{{ gameChances }}</p>
+          <p class="join-value">{{ globalStore.game_chances }}</p>
        </div>
      </div>
      <div class="scene-item item-3" @click="navigateTodoList">
@@ -219,7 +204,7 @@ const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
 .join-main {
  position: absolute;
  top: 3.4vw;
-  right: 2.4vw;
+  right: 2.6vw;
  width: 7vw;
  line-height: 7vw;
  text-align: left;
--- a/src/components/Lottery.vue
+++ b/src/components/Lottery.vue
@@ -32,7 +32,7 @@ import ModalTransition from "./ModalTransition.vue"
 import confetti from "canvas-confetti";
 import { Request, Sleep } from "../libs/utils"
 import { globalStore } from "@/globalstore";
-//TODO: 这里这张图要用用户分享那张图
+//TODO: globalStore.result_url 这里这张图要用用户分享那张图
 import lotteryFace from "../assets/images/haibao-cover.png"

 const lotteryFaceUrl = ref(lotteryFace)
--- a/src/components/ModalTransition.vue
+++ b/src/components/ModalTransition.vue
@@ -51,6 +51,9 @@ switch (props.name) {
 </script>

 <style>
+.global-modal-content {
+  z-index: 10;
+}
 .transBottom-enter-active .global-modal-wrapper,
 .transBottom-leave-active .global-modal-wrapper {
  transform: translate3d(0, 0, 0);
--- a/src/components/MyPhoto.vue
+++ b/src/components/MyPhoto.vue
@@ -1,16 +1,21 @@
 <script setup>
 import { ref, onMounted, computed, watch } from "vue"
-import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
-import Agreement from "./Agreement.vue"
 import { useRouter } from 'vue-router'
 import { globalStore } from "../globalstore.js";
 import { ElMessage } from 'element-plus';
+import { isLogin, Storage, Request } from "../libs/utils"
+import globalToastEvent, { ToastType } from '../globalToastEvent';

 defineProps({
  show: false
 })

+//TODO 帮我看一下对不对
+globalToastEvent.on(ToastType.MOUNTED, () => {
+  fetchImages()
+})
+
 const emit = defineEmits(['go-photo-square']);
 const router = useRouter();
 const goBack = () => {
@@ -51,22 +56,20 @@ const fetchImages = async () => {
      console.error('Error:', error)
  }
 }
-onMounted(fetchImages)
+

 // 图片数据
 const images = ref([]);
 
-const defaultBorderImage = 'src/assets/images/my-photo-border.png';
-const activeBorderImage = 'src/assets/images/my-photo-selected-border.png';
+import defaultBorderImage from '../assets/images/my-photo-border.png';
+import activeBorderImage from '../assets/images/my-photo-selected-border.png';

 const activeBorders = ref(images.value.map(() => false));
 let mergeId = '';
 // 切换边框状态
 const toggleBorder = (item, index) => {
-  // 先重置所有状态为 false
  activeBorders.value = activeBorders.value.map(() => false);
  
-  // 然后设置当前点击的为 true
  activeBorders.value[index] = true;
  mergeId = item.id;
 };
@@ -99,6 +102,7 @@ const handleZhuliClick = () => {
    console.log('助力被点击');
 };

+import failedImg from '../assets/images/failed.png';
 const getGenerateImgStatus = async (item)=> {
  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
    method: 'GET',
@@ -110,7 +114,7 @@ const getGenerateImgStatus = async (item)=> {
  .then(data => {
      console.log('Success:', data);
      if (data.status = 'failed') {
-        item.result_url = 'src/assets/images/failed.png'
+        item.result_url = failedImg;
      } else if (data.status = 'success') {
        item.result_url = data.result_url;
      }
@@ -121,18 +125,11 @@ const getGenerateImgStatus = async (item)=> {
 }

 const getBackgroundImage = (item) => {
-  // If result_url exists, use it
  if (item.result_url) {
    return item.result_url;
+  } else {
+    return item.result_url = failedImg;
  }
-  
-  // Otherwise, search in generateImgTemplates for matching merge_id
-  const matchingTemplate = globalStore.generateImgTemplates.find(
-    template => template.merge_id === item.id
-  );
-  
-  // Return the backgroundImg if found, or empty string as fallback
-  return matchingTemplate?.backgroundImg || '';
 };
 </script>

@@ -146,7 +143,7 @@ const getBackgroundImage = (item) => {
      <div class="scene-item item-3" @click="$emit('go-photo-square')">
        <img src="../assets/images/zpgc.png" alt="照片广场">
      </div>
-
+      <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p>
      <div class="image-gallery">
        <div 
          v-for="(item, index) in images" 
@@ -157,7 +154,7 @@ const getBackgroundImage = (item) => {
            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
          >
          </div> 
-          <img v-if="!item.result_url" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
          <img 
            :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
             ? activeBorderImage : defaultBorderImage" 
@@ -179,11 +176,16 @@ const getBackgroundImage = (item) => {

    </div>
  </ModalTransition>
-
-  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
 </template>

 <style scoped>
+.my-photo-desc {
+  position: absolute;
+  width: 87vw;
+  top: 48vw;
+  text-align: center;
+  color: #855211
+}
 .refresh-btn {
  width: 12vw;
  position: absolute;
@@ -211,7 +213,7 @@ const getBackgroundImage = (item) => {
  width: 84vw;
  height: 57vh;
  position: absolute;
-  top: 28%;
+  top: 30%;
 }

 .image-container {
--- a/src/components/PhotoSquare.vue
+++ b/src/components/PhotoSquare.vue
@@ -2,9 +2,7 @@
 import { ref, onMounted, computed, watch } from "vue"
 import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
-import Agreement from "./Agreement.vue"
 import { useRouter } from 'vue-router'
-import { globalStore } from "../globalstore.js";
 import { ElMessage } from 'element-plus';

 defineProps({
@@ -45,14 +43,41 @@ const fetchImages = async () => {
      console.error('Error:', error)
  }
 }
-onMounted(fetchImages)
-

 // 图片数据
 const images = ref([]);
 const disableInviteHelp = ref(true);
 const userinfos = Storage.get("userinfos")
-// TODO 差接口
+
+// TODO 需要测试
+
+const mergeId = ref();
+const rankingInvite = ref(0);
+const nameInvite = ref('');
+const linkCountInvite = ref(0);
+
+const getInviteInfo = ()=> {
+  const urlParams = new URLSearchParams(window.location.search);
+  mergeId.value = urlParams.get('merge_id');
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/89`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    }
+  })
+  .then(response => response.json())
+  .then(data => {
+    rankingInvite.value = data.ranking;
+    nameInvite.value = data.user_name;
+    linkCountInvite.value = data.likes_count;
+
+  })
+  .catch((error) => {
+    ElMessage.success('点赞失败！');
+    console.error('Error:', error);
+  }); 
+}
+
 const inviteHelp = ()=> {
  const formData = {
    invite_code: userinfos.invite_code,
@@ -75,6 +100,8 @@ const inviteHelp = ()=> {
    console.error('Error:', error);
  }); 
 }
+
+onMounted(getInviteInfo(), fetchImages())
 </script>

 <template>
@@ -127,12 +154,12 @@ const inviteHelp = ()=> {
            <div class="image-container-share mask-background">
            </div>          
            <img src="../assets/images/zpgc-border.png" class="border-image-share" alt="border" />
-            <div class="flex-container-detail">
-              <div class="left-group">
-                <p class="photo-number">000</p>
-                <p class="photo-name">name</p>
+            <div class="flex-container-detail-invite">
+              <div class="left-group-left">
+                <p class="photo-number">111</p>
+                <p class="photo-name">222</p>
              </div>
-              <p class="right-item photo-name" style="padding-left: 3vw;">888赞</p>
+              <p class="right-item photo-name" style="padding-left: 3vw;">333赞</p>
            </div>
          </div>
        </div>
@@ -143,11 +170,22 @@ const inviteHelp = ()=> {
      </div>
    </div>
  </ModalTransition>
-
-  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
 </template>

 <style scoped>
+.flex-container-detail-invite {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  position: relative;
+  top: -8vw;
+}
+.left-group-left {
+  display: flex;
+  flex-flow: row;
+  padding-right: 16vw;
+  gap: 3vw;
+}
 .ranking-title {
  width: 48vw;
  position: absolute;
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -1,8 +1,6 @@
 <script setup>
-import { ref, computed, watch } from "vue"
 import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
-import Agreement from "./Agreement.vue"
 import { globalStore } from "../globalstore.js";
 import { ElMessage } from 'element-plus';

@@ -28,6 +26,10 @@ const confirmBtn = () => {
  })
  .then(response => response.json())
  .then(data => {
+    if (data.message === '您已经有一张发布的照片，不能再次发布') {
+      weui.alert('您已经有一张发布的照片，不能再次发布')
+      return
+    }
    ElMessage.success('打榜成功！');
    console.log('Success:', data);
    return { success: true, data };
@@ -43,6 +45,7 @@ const confirmBtn = () => {

 <template>
  <ModalTransition class="popup" :show="show">
+    <div class="home-bg">
      <div class="popup-bg">
        <div class="scene-item item-1">
          <img src="../assets/images/confirm.png" @click="confirmBtn" alt="确认">
@@ -52,12 +55,16 @@ const confirmBtn = () => {
          <img src="../assets/images/cancel.png" @click="cancelBtn" alt="取消">
        </div>
      </div>
+    </div>
  </ModalTransition>
-
-  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
 </template>

 <style scoped>
+.home-bg {
+  position: absolute;
+  top: 72vw;
+  left: 12vw;
+}
 .message {
  width: 60vw;
  position: absolute;
@@ -65,8 +72,8 @@ const confirmBtn = () => {
  color: #774107;
 }
 .popup-bg {
-  width: 100%;
-  height: 92vh;
+  width: 77vw;
+  height: 60vw;
  background-image: url('../assets/images/popup.png');
  background-size: cover;
  background-repeat: no-repeat;
@@ -100,14 +107,14 @@ const confirmBtn = () => {
  position: relative;
 }
 .item-1 {
-  top: 55%;
+  top: 50vw;
  width: 40vw;
-  right: 10%;
+  right: 0;
 }
 .item-2 {
-  top: 55%;
+  top: 50vw;
  width: 40vw;
-  left: 10%;
+  left: 0;
 }
 .scene-item img {
  width: 100%;
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -19,6 +19,7 @@ const props = defineProps({
  show: false,
 })
 const emit = defineEmits(['close'])
+//TODO 上线更换rule的图片
 </script>

 <style scoped>
--- a/src/components/SelectTemplate.vue
+++ b/src/components/SelectTemplate.vue
@@ -1,294 +0,0 @@
-<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"
-defineProps({
-  show: true
-})
-
-const menuData = ref([
-  {
-    title: '神仙',
-    imgSrc: 'src/assets/images/shenxian.png',
-    children: [
-      {
-        title: '2人的图片',
-        subMenuImg: 'src/assets/images/2.png'
-      },
-      {
-        title: '3人的图片',
-        subMenuImg: 'src/assets/images/3.png'
-      },
-      {
-        title: '4人的图片',
-        subMenuImg: 'src/assets/images/4.png'
-      },
-      {
-        title: '5人的图片',
-        subMenuImg: 'src/assets/images/5.png'
-      }
-    ]
-  },
-  {
-    title: '仙侠',
-    imgSrc: 'src/assets/images/xianxia.png',
-    children: [
-      {
-        title: '2人的图片',
-        subMenuImg: 'src/assets/images/2.png'
-      },
-      {
-        title: '3人的图片',
-        subMenuImg: 'src/assets/images/3.png'
-      },
-      {
-        title: '4人的图片',
-        subMenuImg: 'src/assets/images/4.png'
-      },
-      {
-        title: '5人的图片',
-        subMenuImg: 'src/assets/images/5.png'
-      }
-    ]
-  },
-  {
-    title: '唐风',
-    imgSrc: 'src/assets/images/tangfeng.png',
-    children: [
-      {
-        title: '2人的图片',
-        subMenuImg: 'src/assets/images/2.png'
-      },
-      {
-        title: '3人的图片',
-        subMenuImg: 'src/assets/images/3.png'
-      },
-      {
-        title: '4人的图片',
-        subMenuImg: 'src/assets/images/4.png'
-      },
-      {
-        title: '5人的图片',
-        subMenuImg: 'src/assets/images/5.png'
-      }
-    ]
-  },
-  {
-    title: '怀旧',
-    imgSrc: 'src/assets/images/huaijiu.png',
-    children: [
-      {
-        title: '2人的图片',
-        subMenuImg: 'src/assets/images/2.png'
-      },
-      {
-        title: '3人的图片',
-        subMenuImg: 'src/assets/images/3.png'
-      },
-      {
-        title: '4人的图片',
-        subMenuImg: 'src/assets/images/4.png'
-      },
-      {
-        title: '5人的图片',
-        subMenuImg: 'src/assets/images/5.png'
-      }
-    ]
-  },
-  {
-    title: '现代',
-    imgSrc: 'src/assets/images/xiandai.png',
-    children: [
-      {
-        title: '2人的图片',
-        subMenuImg: 'src/assets/images/2.png'
-      },
-      {
-        title: '3人的图片',
-        subMenuImg: 'src/assets/images/3.png'
-      },
-      {
-        title: '4人的图片',
-        subMenuImg: 'src/assets/images/4.png'
-      },
-      {
-        title: '5人的图片',
-        subMenuImg: 'src/assets/images/5.png'
-      }
-    ]
-  }
-]);
-
-onMounted(() => {
-})
-
-const router = useRouter();
-const navigateTodoList = () => {
-  router.push({
-    name: 'home'
-  })
-}
-
-const activeMenu = ref({
-  level1: 0,
-  level2: 0
-});
-
-const selectMenu = (level, index) => {
-  // 更新选中菜单
-  activeMenu.value[`level${level}`] = index;
-  
-  // 重置下级菜单
-  if (level < 3) {
-      for (let i = level + 1; i <= 3; i++) {
-          activeMenu.value[`level${i}`] = 0;
-      }
-  }
-  
-  // 更新内容显示
-  if (level === 3) {
-      const contentId = menuData.value[activeMenu.value.level1]
-          .children[activeMenu.value.level2]
-          .children[index].contentId;
-      activeContent.value = contentId;
-  }
-};
-
-
-const contentPanels = ref([{}]);
-
-const getMenuLevelTitle = (level) => {
-  const index = activeMenu.value[`level${level}`];
-  if (index === null || index === undefined) return '-';
-  
-  if (level === 1) {
-      return menuData.value[index]?.title || '-';
-  } else if (level === 2) {
-      return menuData.value[activeMenu.value.level1]?.children[index]?.title || '-';
-  }
-  return '-';
-};
-
-// 计算一级菜单位置
-const calculateMenuLevel1Left = (index) => {
-  return (11.6 + index * 17.4).toFixed(1);
-};
-
-// 计算二级菜单位置
-const calculateMenuLevel2Left = (index) => {
-  return (22 + index * 16.6).toFixed(1);
-};
-
-</script>
-
-<template>
-  <div :show="show">
-    <div class="home-wrapper" style="z-index: 9;">
-      <div class="scene-item item-1">
-        <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
-      </div>
-
-      <!-- 一级菜单 -->
-      <div class="menu-level-1">
-        <div 
-          v-for="(item, index) in menuData" 
-          :key="'level1-' + index"
-          class="menu-item"
-          :class="{ active: activeMenu.level1 === index }"
-          @click="selectMenu(1, index)"
-        >
-          <img :src="item.imgSrc" :style="{
-                                position: 'absolute',
-                                width: '44px',
-                                top: '17.3%',
-                                left: calculateMenuLevel1Left(index) + '%'
-                            }" />
-        </div>
-      </div>
-
-      <!-- 二级菜单 -->
-      <div class="menu-level-2">
-        <div 
-          v-for="(item, index) in menuData[activeMenu.level1]?.children" 
-          :key="'level2-' + index"
-          class="menu-item"
-          :class="{ active: activeMenu.level2 === index }"
-          @click="selectMenu(2, index)"
-        >
-          <img :src="item.subMenuImg" :style="{
-                                position: 'absolute',
-                                width: '30px',
-                                top: '26%',
-                                left: calculateMenuLevel2Left(index) + '%'
-                            }" />
-        </div>
-      </div>
-
-      <div class="content-area">
-        <div 
-          v-for="(item, index) in contentPanels" 
-          :key="'panel-' + index"
-          class="content-panel"
-          :class="{ active: activeContent === index }"
-        >
-          <div class="content-header">
-            <div class="breadcrumb">
-              <span>{{ getMenuLevelTitle(1) }}</span>
-              <span>{{ getMenuLevelTitle(2) }}</span>
-            </div>
-            <h2>{{ item.title }}</h2>
-          </div>
-        </div>
-    </div>
-
-
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.home-wrapper {
-  width: 100%;
-  height: 92vh;
-  background-image: url('../assets/images/select-tem.png');
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  min-height: -webkit-fill-available;
-}
-
-.scene-item {
-  position: absolute;
-  z-index: 2;
-  cursor: pointer;
-  transition: all 0.4s ease;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 3px solid transparent;
-  animation: float 4s ease-in-out infinite;
-}
-
-.scene-item:hover {
-  transform: scale(1.05);
-  z-index: 10;
-}
-
-.scene-item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.item-1 {
-  width: 20px;
-  top: 6.7%;
-  left: 5%;
-  animation-delay: 0s;
-}
-</style>
--- a/src/components/SelectTemplateV2.vue
+++ b/src/components/SelectTemplateV2.vue
@@ -1,89 +1,15 @@
 <script setup>
 import { ref, onMounted } from "vue"
 import { useRouter } from 'vue-router'
-import GenerateImgConfirm from './GenerateImgConfirm.vue'
+import imageBackground from '../static/imageBackground.js';
+import { globalStore } from "../globalstore.js";
+
 defineProps({
  show: true
 })

-const menuData = ref([
-  {
-    imgSrc: 'src/assets/images/generate/shenxian.png',
-    activeImgSrc: 'src/assets/images/generate/shenxian-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_6.png' }
-    ]
-  },
-  {
-    imgSrc: 'src/assets/images/generate/xianxia.png',
-    activeImgSrc: 'src/assets/images/generate/xianxia-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_6.png' }
-    ]
-  },
-  {
-    imgSrc: 'src/assets/images/generate/fugu.png',
-    activeImgSrc: 'src/assets/images/generate/fugu-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/fugu/fugu_6.png' }
-    ]
-  },
-  {
-    imgSrc: 'src/assets/images/generate/xinzhongshi.png',
-    activeImgSrc: 'src/assets/images/generate/xinzhongshi-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_6.png' }
-    ]
-  },
-  {
-    imgSrc: 'src/assets/images/generate/luying.png',
-    activeImgSrc: 'src/assets/images/generate/luying-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/luying/luying_6.png' }
-    ]
-  },
-  {
-    imgSrc: 'src/assets/images/generate/paidui.png',
-    activeImgSrc: 'src/assets/images/generate/paidui-selected.png',
-    children: [
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_1.png' },
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_2.png' },
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_3.png' },
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_4.png' },
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_5.png' },
-      { imageUrl: 'src/assets/images/generate/template/paidui/paidui_6.png' }
-    ]
-  }
-]);
-
 onMounted(() => {
-  activeMenu.value = { ...activeMenu.value, level1: 0 };
-  updateDisplayedImages();
+  displayedImages.value = imageBackground[0].children;
 })

 const router = useRouter();
@@ -93,64 +19,10 @@ const navigateTodoList = () => {
  })
 }

-const activeMenu = ref({
-  level1: 0
-});
-
-const selectMenu = (level, index)=> {
-  if (level === 1) {
-    activeMenu.value = { ...activeMenu.value, level1: index }; 
-    updateDisplayedImages();
-  }
-}
-
-const updateDisplayedImages = ()=> {
-    if (activeMenu.value.level1 !== null && menuData.value[activeMenu.value.level1]) {
-        displayedImages.value = menuData.value[activeMenu.value.level1].children;
-    } else {
-        displayedImages.value = [];
-    }
-}
-
-const contentPanels = ref([{}]);
-
-const getMenuLevelTitle = (level) => {
-  const index = activeMenu.value[`level${level}`];
-  if (index === null || index === undefined) return '-';
-  
-  if (level === 1) {
-      return menuData.value[index]?.title || '-';
-  }
-  return '-';
-};
-
-const getImageStyle = (index, actived)=> {
-  console.log(actived)
-  return {
-    position: 'absolute',
-    width: actived? index === 3? '16vw' : '13vw' : index === 3 ? '15vw' : '10.8vw',
-    top: actived? '14%' : '15%',
-    left: calculateMenuLevel1Left(index, actived) + '%'
-  }
-}
-
-// 计算一级菜单位置
-const calculateMenuLevel1Left = (index, actived) => {
-  const multiplier = 
-    index === 1 ? actived? 12.5 : 13.5 :
-    index === 2 ? actived? 13 : 13.5 :
-    index === 3 ? 13.5 :
-    index === 4 ? actived? 14.6 : 14.8 :
-    index === 5 ? 14.6 :
-    13.8;
-  
-  return (8.4 + index * multiplier).toFixed(1);
-};
-
-
 const displayedImages = ref([]);
-
 const goToGenerateImgPage = (item) => {
+  globalStore.people_count = item.peopleCount;
+  globalStore.select_template = item.imgUrl;
  const hasVisitedBefore = localStorage.getItem('hasVisitedGenerateImg');
  if (!hasVisitedBefore) {
    localStorage.setItem('hasVisitedGenerateImg', 'true');
@@ -165,6 +37,28 @@ const goToGenerateImgPage = (item) => {
    });
  }
 }
+
+
+const currentBackground = ref(imageBackground[0].titleImgUrl);
+const navImage = ref(null);
+
+// 处理导航条点击事件
+const handleNavClick = (event) => {
+  // 获取点击区域的id
+  const zone = event.target.closest('.click-zone');
+  if (!zone) return;
+  
+  const id = parseInt(zone.dataset.id);
+  
+  // 根据id找到对应的背景图片
+  const selectedItem = imageBackground.find(item => item.id === id);
+  if (selectedItem) {
+    currentBackground.value = selectedItem.titleImgUrl;    
+    displayedImages.value = selectedItem.children || [];
+    console.log(`切换到ID ${id}的背景图`);
+  }
+};
+
 </script>

 <template>
@@ -174,19 +68,27 @@ const goToGenerateImgPage = (item) => {
        <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
      </div>

-      <!-- 一级菜单 -->
-      <div class="menu-level-1">
+      <!-- 显示当前选中的背景图片 -->
+      <div class="main-image">
+        <img :src="currentBackground" alt="Background Image" />
+      </div>
+      
+      <!-- 导航条图片，分成6个可点击区域 -->
+      <div class="nav-container">
        <div 
-          v-for="(item, index) in menuData" 
-          :key="'level1-' + index"
-          class="menu-item"
-          :class="{ active: activeMenu.level1 === index }"
-          @click="selectMenu(1, index)"
+          class="nav-image-wrapper"
+          ref="navImage"
+          @click="handleNavClick"
        >
-          <img 
-            :src="activeMenu.level1 === index ? item.activeImgSrc : item.imgSrc" 
-            :style="getImageStyle(index, activeMenu.level1 === index)" 
-          />
+          <img :src="imageBackground[0].titleImgUrl" alt="Navigation Image" />
+          <!-- 创建6个可点击区域 -->
+          <div 
+            v-for="n in 6" 
+            :key="n"
+            class="click-zone"
+            :style="{ left: `${(n-1)*16.666}%` }"
+            :data-id="n"
+          ></div>
        </div>
      </div>

@@ -196,35 +98,59 @@ const goToGenerateImgPage = (item) => {
          :key="index" 
          @click="goToGenerateImgPage(item)"
          class="mask-image mask-background"
-          :style="{ 'background-image': `url(${item.imageUrl})` }"
+          :style="{ 'background-image': `url(${item.imgUrl})` }"
        >
          <img class="border-img" src="../assets/images/generate/border.png" alt="边框">
        </div>
      </div>
-
-      <div class="content-area">
-        <div 
-          v-for="(item, index) in contentPanels" 
-          :key="'panel-' + index"
-          class="content-panel"
-          :class="{ active: activeContent === index }"
-        >
-        </div>
-    </div>
-
-
    </div>
  </div>
 </template>

 <style scoped>
+.main-image {
+  position: absolute;
+  top: 24vw;
+  padding: 0 3vw;
+}
+.main-image img {
+  width: 100%;
+}
+
+.nav-container {
+  position: relative;
+}
+
+.nav-image-wrapper {
+  top: 24vw;
+  opacity: 0;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.nav-image-wrapper img {
+  width: 100%;
+  display: block;
+  max-width: none;
+}
+
+.click-zone {
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  width: calc(100% /6);
+  background-color: transparent;
+  transition: background-color .2s ease-in-out;
+}
+
 .images-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 3vw;
-  margin-top: 43vw;
+  margin-top: 26vw;
  overflow: hidden;
  overflow-y: auto;
 }
--- a/src/components/SynthesizedResults.vue
+++ b/src/components/SynthesizedResults.vue
@@ -1,15 +1,20 @@
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, computed } from "vue"
 import { useRouter } from 'vue-router'
 import Popup from './Popup.vue'
 import { globalStore } from "../globalstore.js";
 import globalToastEvent, { ToastType } from '../globalToastEvent';
+import { Storage, generateQR } from "../libs/utils";
+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 这里得图片后面要换成用户参榜的图片

 defineProps({
  show: true
 })

-
 const isPopupVisible = ref(false);


@@ -29,6 +34,58 @@ const handleLottery = () => {
  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
 }

+// 海报
+const haibaoShow = ref(false);
+const haibaoUrl = ref('');
+const userHaibaoUrl = ref('');
+const userhaibaoCover = computed(() => {
+  return { backgroundImage: `url(${userHaibaoUrl.value})` }
+})
+
+const openHaibao = (e) => {
+  haibaoShow.value = true
+  handleHaibao()
+}
+onMounted(openHaibao)
+const handleHaibao = async () => {
+  if (haibaoUrl.value) {
+    return
+  }
+
+  const loading = weui.loading()
+  const infos = Storage.get("userinfos")
+  const haibaoCover = new Haibao(951, 1607)
+  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(mask, 10, 100)
+  haibaoCover.add(haibaoCoverBorder, 0, 0)
+  haibaoCover.draw('destination-in').then(() => {
+    haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
+      userHaibaoUrl.value = url
+
+      const haibaoSave = new Haibao(1080, 2160)
+      const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
+      haibaoSave.add(url, 62, 350)
+      haibaoSave.add(bg, 0, 0)
+      haibaoSave.add(qrcode, 115, 1875)
+      haibaoSave.draw().then(() => {
+        haibaoSave.text(infos.nickname, haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#ffee6f' })
+        haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
+          haibaoUrl.value = url
+          loading.hide()
+        }).catch(err => {
+          console.log(err)
+          weui.alert("海报生成失败，请重新生成")
+          loading.hide()
+        })
+      }).catch(err => {
+        console.log(err)
+        weui.alert("海报生成失败，请重新生成")
+        loading.hide()
+      })
+    })
+  })
+
+}
 </script>

 <template>
@@ -38,9 +95,15 @@ const handleLottery = () => {
        <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 mask-image" :style="{ backgroundImage: `url(${globalStore.result_url})` }">
+      </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>
      </div>
-      <img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版">

      <div class="scene-item item-2">
        <img src="../assets/images/charts-battle.png" @click="chartsBattle" alt="参与打榜">
@@ -56,30 +119,52 @@ const handleLottery = () => {
 </template>

 <style scoped>
-.mengban-border {
-  width: 85vw;
-  position: absolute;
-  top: 13%;
-}
-.mask-background {
-  -webkit-mask-image: url("../assets/images/mengban.png");
-  mask-image: url("../assets/images/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;
+.fullsection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, .7);
 }

-.mask-image {
-  /* background-image: url("../assets/images/haibao-bg.webp"); */
-  background-size: cover;
-  background-repeat: no-repeat;
+.haibao {
  position: relative;
-  width: 100vw;
-  height: 60vh;
+  width: 65.37037vw;
+  height: 119.444444vw;
+  background-image: url("../assets/images/haibao-cover.webp");
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
+
+.haibao img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  opacity: 0;
+}
+
+.close {
+  position: absolute;
+  width: 8.148148vw;
+  height: 8.148148vw;
+  right: 5vw;
+  top: 15vw;
+  background-image: url("../assets/images/close-btn.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.haibao .close {
+  left: 50%;
+  bottom: -5vw;
+  top: initial;
+  transform: translate3d(-50%,0,0);
+}
+
 .home-wrapper {
  width: 100%;
  height: 92vh;
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -32,7 +32,7 @@ import { globalStore } from "@/globalstore";
 import ModalTransition from "./ModalTransition.vue"
 import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
 import Haibao from "@/libs/haibao"
-import userPicture from "../assets/images/home-bg.png" //TODO: 这里得图片后面要换成用户参榜的图片
+import userPicture from "../assets/images/home-bg.png" //TODO: globalStore.result_url 这里得图片后面要换成用户参榜的图片
 import bg from "../assets/images/haibao-bg.png"
 import mask from "../assets/images/haibao-mask.png"
 import haibaoCoverBorder from "../assets/images/haibao-cover.png"
--- a/src/globalToastEvent.js
+++ b/src/globalToastEvent.js
@@ -7,7 +7,8 @@ export const ToastType = {
  SHOW_PRIZELIST: "show_prizelist",
  SHOW_LOTTERY: "show_lottery",
  SHOW_AD:"show_ad",
-  SHOW_ADDRESS:"show_address"
+  SHOW_ADDRESS:"show_address",
+  MOUNTED: "mounted"
 };

 export default globalToastEvent;
--- a/src/globalstore.js
+++ b/src/globalstore.js
@@ -1,6 +1,8 @@
 import { reactive } from "vue"

 export const globalStore = reactive({
+  select_template: '',
+  people_count: 0,
  draw_chances: 0,
  game_chances: 0,
  lotteryCount: 0,
@@ -19,6 +21,12 @@ export const globalStore = reactive({
  CONSUME_POINT_1_PER_DRAW: 1000,
  MAX_INVITE_DAILY: 5,
  MAX_VIEW_RECIPES_DAILY: 3,
+  reducerDrawChances () {
+    this.draw_chances--
+  },
+  reducerGameChances () {
+    this.game_chances--
+  },
  lotteryCut () {
    this.lotteryCount--
  },
--- a/src/static/imageBackground.js
+++ b/src/static/imageBackground.js
@@ -0,0 +1,220 @@
+const imageBackground = [
+    {
+        id: 1,
+        titleImgUrl: 'src/assets/images/generate/template/shenxian/shenxian_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_3.png',
+                peopleCount: 2
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_5.png',
+                peopleCount: 4
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_6.png',
+                peopleCount: 5
+            }
+        ]
+    },
+    {
+        id: 2,
+        titleImgUrl: 'src/assets/images/generate/template/xianxia/xianxia_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_3.png',
+                peopleCount: 3
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_5.png',
+                peopleCount: 4
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_6.png',
+                peopleCount: 5
+            }
+        ]
+    },
+    {
+        id: 3,
+        titleImgUrl: 'src/assets/images/generate/template/fugu/fugu_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_3.png',
+                peopleCount: 2
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_5.png',
+                peopleCount: 4
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_6.png',
+                peopleCount: 5
+            }
+        ]
+    },
+    {
+        id: 4,
+        titleImgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_3.png',
+                peopleCount: 2
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_5.png',
+                peopleCount: 4
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_6.png',
+                peopleCount: 5
+            }
+        ]
+    },
+    {
+        id: 5,
+        titleImgUrl: 'src/assets/images/generate/template/luying/luying_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_3.png',
+                peopleCount: 2
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_5.png',
+                peopleCount: 4
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/luying/luying_6.png',
+                peopleCount: 5
+            }
+        ]
+    },
+    {
+        id: 6,
+        titleImgUrl: 'src/assets/images/generate/template/paidui/paidui_bg.png',
+        children: [
+            {
+                id: 1,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_1.png',
+                peopleCount: 2
+            },
+            {
+                id: 2,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_2.png',
+                peopleCount: 2
+            },
+            {
+                id: 3,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_3.png',
+                peopleCount: 2
+            },
+            {
+                id: 4,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_4.png',
+                peopleCount: 3
+            },
+            {
+                id: 5,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_5.png',
+                peopleCount: 3
+            },
+            {
+                id: 6,
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_6.png',
+                peopleCount: 5
+            }
+        ]
+    }
+]
+
+export default imageBackground;