0911 第一版

.gitignore

@@ -26,4 +26,3 @@ pnpm-debug.log*
 /__MACOSX
 /node_modules
 /设计图
-/src/assets/images

pnpm-lock.yaml

@@ -422,67 +422,56 @@ packages:
     resolution: {integrity: sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.50.0':
     resolution: {integrity: sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.50.0':
     resolution: {integrity: sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.50.0':
     resolution: {integrity: sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.50.0':
     resolution: {integrity: sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.50.0':
     resolution: {integrity: sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.50.0':
     resolution: {integrity: sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.50.0':
     resolution: {integrity: sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.50.0':
     resolution: {integrity: sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.50.0':
     resolution: {integrity: sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.50.0':
     resolution: {integrity: sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.50.0':
     resolution: {integrity: sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==}

src/App.vue

@@ -89,6 +89,8 @@ 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

src/components/GenerateImg.vue

@@ -3,7 +3,11 @@ 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 { RequestImg, Storage } from "../libs/utils"
+import { Storage } from "../libs/utils"
+import { globalStore } from "../globalstore.js";
+import faceTemplate from "../static/ali_face_template.js";
+import MyPhoto from './MyPhoto.vue'
+import PhotoSquare from './PhotoSquare.vue'
 
 defineProps({
   show: true
@@ -14,41 +18,63 @@ onMounted(() => {
 
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
+import { tr } from "element-plus/es/locales.mjs"
 
-const imageUrl1 = ref('');
 // 上传前的校验
-// const beforeUpload = (file) => {
+const beforeUpload = (file) => {
-//   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-//   if (!isJpgOrPng) {
+  if (!isJpgOrPng) {
-//     ElMessage.error('只能上传JPG或PNG格式的图片!');
+    ElMessage.error('只能上传JPG或PNG格式的图片!');
-//     return false; // 返回false阻止上传
+    return false;
-//   }
+  }
-//   const isLt2M = file.size / 1024 / 1024 < 2;
+  const isLt2M = file.size / 1024 / 1024 < 2;
-//   if (!isLt2M) {
+  if (!isLt2M) {
-//     ElMessage.error('图片大小不能超过2MB!');
+    ElMessage.error('图片大小不能超过2MB!');
-//     return false;
+    return false;
-//   }
+  }
-//   return true; // 返回true继续上传
+  return true;
-// };
+};
+
+const getTemplateIdsFromUrl = (response, url, index)=> {
+  const filename = url.split('/').pop();
+  const matchedTemplate = faceTemplate.find(template => template.name === filename);
+  if (!matchedTemplate) {
+    console.error(`No template found for filename: ${filename}`);
+    return null;
+  }
+
+  const dataItem = matchedTemplate.data[index];
+  if (!dataItem) {
+    console.error(`No data found at index ${index} for template: ${filename}`);
+    return null;
+  }
+
+  return  {
+      "mergeId": response.id,
+      "template_id": matchedTemplate.template_id,
+      "templateFaceID": dataItem.templateFaceID
+    }
+  ;
+}
 
 // 上传成功回调
-// const handleSuccess = (response, index) => {
+const handleSuccess = (response, index) => {
-//   console.log(index)
+  // 上传成功后，将文件信息添加到数组
-//   imageUrl1.value = response.url;
+  if (response) {
-//   ElMessage.success('上传成功！');
+    const ids = getTemplateIdsFromUrl(response, window.location.href, index);
-// };
+    uploadedFiles.push({
+      templateIds: ids
+    });
+  }
+  uploadItems.value[index].imageUrl = response.url;
+  ElMessage.success('上传成功！');
+};
 
 // 上传失败回调
-// const handleError = (error) => {
+const handleError = (error) => {
-//   // console.error('上传失败:', error);
+  console.error('上传失败:', error);
-//   // ElMessage.error('上传失败，请重试！');
+  ElMessage.error('上传失败，请重试！');
-//   uploadItems.value[0].imageUrl = "src/assets/images/demo.png";
+};
-//   uploadItems.value[1].imageUrl = "src/assets/images/demo.png";
-//   uploadItems.value[2].imageUrl = "src/assets/images/demo.png";
-//   uploadItems.value[3].imageUrl = "src/assets/images/demo.png";
-//   uploadItems.value[4].imageUrl = "src/assets/images/demo.png";
-//   ElMessage.success('上传成功！');
-// };
 
 // 根据imageUrl的结尾编号确定需要多少个上传项
 const getUploadItemsCount = () => {
@@ -102,11 +128,157 @@ const clearUploadFile = (index) => {
   if (uploadRefs.value[index]) {
     uploadRefs.value[index].clearFiles();
     uploadItems.value[index].imageUrl = '';
+    
+    uploadedFiles.value.splice(index, 1);
   }
 };
 
-const generateImage = () => {
+// 存储上传成功的文件数据
+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 generateImage = async (options) => {
+  console.log(uploadedFiles);
+  globalStore.generateStatus = true;
+  const urlParams = new URLSearchParams(window.location.search);
+  currentImageUrl.value = urlParams.get('imageUrl');
+  
+
+  disableClick.value = true;
+  displayScanModel.value = true;
+
+  uploadedFiles.forEach(file => {
+    globalStore.generateImgTemplates.push({
+      merge_id: file.templateIds.mergeId,
+      backgroundImg: currentImageUrl.value
+    });
+    faces.push({
+      image_id: file.templateIds.mergeId,
+      template_face_id: file.templateIds.templateFaceID
+    });
+  });
+
+  const formData = {
+    "template_id": uploadedFiles[0].templateIds.template_id,
+    "faces": faces,
+    "is_public": false
+  }
+
+  try {
+    const mergeResponse = await 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)
+    });
+    
+    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}`
+        }
+      })
+      .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();
+    } else {
+      navigateToSynthesizedResults(); //TODO 上线删除
+      console.log('Status check timed out or failed');
+    }
+    
+  } catch (error) {
+    console.error('Merge API error:', error);
+  }
 }
 
 const router = useRouter();
@@ -223,65 +395,91 @@ const imagePosition = (index) => {
   };
 };
 
-
-
 // 自定义上传方法
 const customUpload = async (options) => {
   const { file, data, onProgress, onSuccess, onError } = options
   
   try {
-    // FormData对象用于构建表单数据
     const formData = new FormData()
     formData.append('type', 'ali-face')
     formData.append('image', file)
 
-    const config = {
+    fetch('https://huodong2.lzlj.com/api/faceFamily/upload/image', {
+      method: 'POST',
       headers: {
-        'Content-Type': 'multipart/form-data'
+          'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
       },
-      onUploadProgress: (progressEvent) => {
+      body: formData
-        if (progressEvent.lengthComputable) {
+    })
-          const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+    .then(response => response.json())
-          onProgress({ percent }) // 更新上传进度
+    .then(data => {
-        }
+        console.log('Success:', data);
-      }
+        onSuccess(data);
-    }
+    })
-    
+    .catch((error) => {
-    // 使用你封装的Request方法调用API
+        console.error('Error:', error);
-    const result = await RequestImg('upload/image', formData)
+    });    
-    
-    // API调用成功处理
-    if (result.code === 'success') { // code字段需要根据你的API实际返回调整
-      onSuccess(result.data) // result.data包含服务器返回的数据
-    } else {
-      onError(new Error(result.message || '上传失败'))
-    }
-    
-    return result
-    
   } catch (error) {
     onError(error)
     throw error
   }
 }
+
+const displayScanModel = ref(false);
+const disableClick = ref(false);
+
+const isMyPhotoVisible = ref(false);
+const isPhotoSquareVisible = ref(false);
+const showMyPhoto = () => {
+  isMyPhotoVisible.value = true;
+  isPhotoSquareVisible.value = false;
+};
+
+const showPhotoSquare = () => {
+  isMyPhotoVisible.value = false;
+  isPhotoSquareVisible.value = true;
+};
+
+const navigateToSynthesizedResults = () => {
+  router.push({
+    name: 'synthesizedResults'
+  })
+}
 </script>
 
 <template>
   <div :show="show">
-    <div class="home-wrapper" style="z-index: 9;">
+    <div class="home-wrapper" :style="{
+      backgroundImage: displayScanModel 
+        ? 'url(src/assets/images/generate-img-loading-bg.png)' 
+        : 'url(src/assets/images/generate-img-bg.png)'
+    }">
       <div class="scene-item item-1">
         <img src="../assets/images/back-btn.png" @click="goBack" alt="后退">
       </div>
 
-      <div class="scene-item img-from-template scene-item-img" style="transition: none !important;">
+      <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img">
         <img :src="imageUrl" alt="模板图片">
       </div>
 
-      <div class="scene-item item-2" @click="generateImage">
+      <div v-if="!displayScanModel" class="scene-item item-2">
+        <img src="../assets/images/generate-title.png" alt="描述">
+      </div>
+
+      <div v-if="!displayScanModel" class="scene-item item-3" @click="generateImage">
         <img src="../assets/images/generate-btn.png" alt="开始合成">
       </div>
 
-      <div class="upload-container">
+      <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">
+
+      <div v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item item-5" @click="showMyPhoto" >
+        <img src="../assets/images/my-photo-btn.png" class="blocked-image" alt="查看我的照片">
+      </div>
+
+      <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="upload-container">
         <div v-for="(item, index) in uploadItems" :key="index" class="upload-item-wrapper">
           <el-upload
             :ref="(el) => (uploadRefs[index] = el)"
@@ -294,7 +492,7 @@ const customUpload = async (options) => {
             accept="image/*"
           >
             <el-button class="upload-img-wrapper upload-btn" :style="buttonPosition(index + 1)">
-              <div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl }"
+              <div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl, 'no-pointer-events': disableClick }"
               :style="{ width: buttonPosition(index + 1)['--item-width'] }">
                 <img 
                   v-if="!item.imageUrl"
@@ -327,9 +525,39 @@ const customUpload = async (options) => {
       </div>
     </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" 
+  />
 </template>
 
 <style scoped>
+.moving-image {
+  width: 100%;
+  position: absolute;
+  animation: moveUpDown 3s linear infinite;
+  z-index: 2;
+}
+
+@keyframes moveUpDown {
+  0%, 100% {
+    top: 44vw;
+    transform: translateY(0);
+  }
+  50% {
+    top: calc(100% + -40vw);
+    transform: translateY(-100%);
+   }
+}
+.no-pointer-events {
+  pointer-events: none;
+}
 .scene-item-img {
   transition: none !important;
 }
@@ -342,7 +570,6 @@ const customUpload = async (options) => {
   z-index: 999;
 }
 .uploaded {
-  margin-top: -18px;
 }
 .upload-btn {
   position: absolute;
@@ -410,7 +637,6 @@ const customUpload = async (options) => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('src/assets/images/generate-img-bg.png');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -421,11 +647,11 @@ const customUpload = async (options) => {
   min-height: -webkit-fill-available;
 }
 .img-from-template {
-  width: 322px;
+  width: 75vw;
-  height: 436px;
+  height: 103vw;
-  margin-top: -28px;
+  margin-top: -6vw;
   border-radius: 16px !important;
-  margin-left: 2px;
+  margin-left: 1vw;
 }
 .scene-item {
   position: absolute;
@@ -439,7 +665,6 @@ const customUpload = async (options) => {
 }
 
 .scene-item:hover {
-  transform: scale(1.05);
   z-index: 10;
 }
 
@@ -451,39 +676,35 @@ const customUpload = async (options) => {
 }
 
 .item-1 {
-  width: 20px;
+  width: 5vw;
   top: 6.7%;
   left: 5%;
   animation-delay: 0s;
 }
 
 .item-2 {
-  width: 240px;
+  width: 70vw;
-  bottom: 28px;
+  bottom: 15%;
+  animation-delay: 0s;
+}
+
+.item-3 {
+  width: 54vw;
+  bottom: 6vw;
   animation-delay: 0s;
 }
 
 .item {
-  width: 48px;
+  width: 17vw;
 }
 .item-4 {
-  width: 48px;
+  width: 72vw;
-  top: 30.6%;
+  top: 23.5%;
-  left: 44.5%;
+  pointer-events: none;
 }
 .item-5 {
-  width: 48px;
+  width: 48vw;
-  top: 34%;
+  bottom: 3vw;
-  left: 72%;
+  animation-delay: 0s;
-}
-.item-6 {
-  width: 48px;
-  top: 49.4%;
-  left: 36.6%;
-}
-.item-7 {
-  width: 48px;
-  top: 40%;
-  left: 57.5%;
 }
 </style>

src/components/GenerateImgConfirm.vue

@@ -16,11 +16,17 @@ const goToGenerateImgPage = () => {
   })
 }
 
+const closeTodoList = () => {
+  router.push({
+    name: 'selectTemplateV2'
+  })
+}
+
 </script>
 
 <template>
   <div :show="show">
-    <div class="home-wrapper" style="z-index: 9;">
+    <div class="home-wrapper">
       <div class="scene-item item-1" @click="closeTodoList">
         <img src="../assets/images/close-btn.png" alt="关闭按钮">
       </div>
@@ -36,7 +42,7 @@ const goToGenerateImgPage = () => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('src/assets/images/generate-img-confirm.png');
+  background-image: url('../assets/images/generate-img-confirm.png');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -49,9 +55,7 @@ const goToGenerateImgPage = () => {
 
 .scene-item {
   position: absolute;
-  z-index: 2;
   cursor: pointer;
-  border-radius: 8px;
   transition: all 0.4s ease;
   overflow: hidden;
   border: 3px solid transparent;
@@ -60,7 +64,6 @@ const goToGenerateImgPage = () => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -71,15 +74,15 @@ const goToGenerateImgPage = () => {
 }
 
 .item-1 {
-  width: 40px;
+  width: 10vw;
   top: 15%;
   right: 4%;
   animation-delay: 0s;
 }
 
 .item-2 {
-  width: 246px;
+  width: 47vw;
-  bottom: 28px;
+  bottom: 5vw;
   animation-delay: 0s;
 }
 </style>

src/components/HomePage.vue

@@ -1,16 +1,22 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter } from 'vue-router'
-import globalToastEvent, { ToastType } from '../globalToastEvent';
 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";
+
 defineProps({
   show: true
 })
 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);
   // 尝试自动播放
@@ -29,12 +35,12 @@ const tryAutoPlay = () => {
       isMusicOn.value = true;
       console.log("自动播放成功");
     })
-      .catch(error => {
+    .catch(error => {
-        // 自动播放被阻止
+      // 自动播放被阻止
-        console.log("自动播放被阻止，需要用户交互:", error);
+      console.log("自动播放被阻止，需要用户交互:", error);
-        isMusicOn.value = false;
+      isMusicOn.value = false;
-        audioElement.value.pause();
+      audioElement.value.pause();
-      });
+    });
   }
 };
 
@@ -42,7 +48,7 @@ const tryAutoPlay = () => {
 const toggleMusicState = () => {
   isMusicOn.value = !isMusicOn.value;
   if (!isMusicOn.value) {
-    audioElement.value.pause();
+      audioElement.value.pause();
   } else {
     audioElement.value.play().catch(error => {
       console.log("播放失败:", error);
@@ -50,13 +56,6 @@ const toggleMusicState = () => {
   }
 };
 
-const router = useRouter();
-const navigateSelectTemplatePage = () => {
-  router.push({
-    name: 'selectTemplateV2'
-  })
-}
-
 const navigateTodoList = () => {
   globalToastEvent.emit(ToastType.SHOW_TODO)
 }
@@ -68,23 +67,58 @@ const handleRule = () => {
 }
 const handleLottery = () => {
   globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+  if (drawChances.value <= 0) return;
+  drawChances.value -= 1;
+  globalStore.draw_chances = drawChances.value
 }
 
+const router = useRouter();
+const navigateSelectTemplatePage = () => {
+  if (gameChances.value <= 0) return;
+  gameChances.value -= 1;
+  globalStore.game_chances = gameChances.value
+  router.push({
+    name: 'selectTemplateV2'
+  })
+}
+
+const isMyPhotoVisible = ref(false);
+const isPhotoSquareVisible = ref(false);
+
+
+const activeTab = ref('my-photo')
+
+const showMyPhoto = () => { activeTab.value = 'my-photo', isMyPhotoVisible.value = true; }
+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">
+      <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': drawChances <= 0 }">
         <img src="../assets/images/lottery.png" alt="抽奖">
         <div class="lottery-main">
-          <p class="lottery-value">3</p>
+          <p class="lottery-value">{{ drawChances }}</p>
         </div>
       </div>
-      <div class="scene-item item-2" @click="navigateSelectTemplatePage">
+      <div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': gameChances <= 0 }">
         <img src="../assets/images/join.png" alt="立即参与">
         <div class="join-main">
-          <p class="join-value">2</p>
+          <p class="join-value">{{ gameChances }}</p>
         </div>
       </div>
       <div class="scene-item item-3" @click="navigateTodoList">
@@ -105,14 +139,17 @@ const handleLottery = () => {
       <div class="scene-item item-7" @click="handlePrizeList">
         <img src="../assets/images/award.png" alt="奖励">
       </div>
-      <div class="scene-item item-8">
+      <div class="scene-item item-8" @click="showMyPhoto">
         <img src="../assets/images/my-photo.png" alt="我的照片">
       </div>
-      <div class="scene-item item-9">
+      <div class="scene-item item-9" @click="showPhotoSquare">
         <img src="../assets/images/photos.png" alt="照片广场">
       </div>
     </div>
   </div>
+
+  <MyPhoto v-if="activeTab === 'my-photo'"  @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
+  <PhotoSquare v-else  @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
 </template>
 
 <style scoped>
@@ -132,10 +169,8 @@ const handleLottery = () => {
 
 .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;
@@ -143,7 +178,6 @@ const handleLottery = () => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -154,7 +188,7 @@ const handleLottery = () => {
 }
 
 .item-1 {
-  width: 90px;
+  width: 21vw;
   bottom: 0;
   left: 0;
   animation-delay: 0s;
@@ -164,11 +198,11 @@ const handleLottery = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 18px;
+  width: 4vw;
-  height: 16px;
+  height: 3.5vw;
   position: absolute;
-  top: 7px;
+  top: 1.5vw;
-  right: 28px;
+  right: 6.6vw;
   color: #fff;
 }
 
@@ -177,18 +211,17 @@ const handleLottery = () => {
 }
 
 .item-2 {
-  width: 200px;
+  width: 48vw;
   bottom: 0;
   animation-delay: 0s;
 }
 
 .join-main {
   position: absolute;
-  top: 16px;
+  top: 3.4vw;
-  right: 8px;
+  right: 2.4vw;
-  width: 30px;
+  width: 7vw;
-  height: 30px;
+  line-height: 7vw;
-  line-height: 30px;
   text-align: left;
 }
 
@@ -202,49 +235,43 @@ const handleLottery = () => {
 }
 
 .item-3 {
-  width: 90px;
+  width: 21vw;
   bottom: 0;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-4 {
-  width: 46px;
+  width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
-
 .item-5 {
-  width: 46px;
+  width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
-
 .item-6 {
-  width: 62px;
+  width: 14.5vw;
   top: 8%;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-7 {
-  width: 62px;
+  width: 14.5vw;
   top: 13.5%;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-8 {
-  width: 50px;
+  width: 11vw;
   bottom: 32%;
   right: 1%;
   animation-delay: 0s;
 }
-
 .item-9 {
-  width: 50px;
+  width: 11vw;
   bottom: 23%;
   right: 1%;
   animation-delay: 0s;

src/components/MyPhoto.vue

@@ -0,0 +1,338 @@
+<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';
+
+defineProps({
+  show: false
+})
+
+const emit = defineEmits(['go-photo-square']);
+const router = useRouter();
+const goBack = () => {
+  emit('update:show', false);
+};
+
+const imageList = ref([])
+const fetchImages = async () => {
+  
+  try {
+    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
+    url.searchParams.append('my_only', '1');
+    url.searchParams.append('page', '1');
+    url.searchParams.append('per_page', '100');
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+      }
+    })
+    const data = await response.json()
+    console.log('Success:', data)
+    images.value = data.data;
+    imageList.value = data;
+
+    // Check for any image with is_public = true after fetching
+    const hasPublicImage = images.value.some(item => item.is_public);
+    if (hasPublicImage) {
+      globalStore.chartsBattle = true;
+      
+      // Find the index of the public image and set its border to active
+      const publicIndex = images.value.findIndex(item => item.is_public);
+      if (publicIndex !== -1) {
+        activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
+      }
+    }
+  } catch (error) {
+      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';
+
+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;
+};
+
+const handleDabangClick = () => {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${mergeId}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: "application/json",
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    },
+    body: {}
+  })
+  .then(response => response.json())
+  .then(data => {
+    ElMessage.success('打榜成功！');
+    console.log('Success:', data);
+    globalStore.chartsBattle = true;
+    return { success: true, data };
+  })
+  .catch((error) => {
+    ElMessage.success('打榜失败！');
+    console.error('Error:', error);
+    return { success: false, error };
+  });
+};
+
+const handleZhuliClick = () => {
+    console.log('助力被点击');
+};
+
+const getGenerateImgStatus = async (item)=> {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    }
+  })
+  .then(response => response.json())
+  .then(data => {
+      console.log('Success:', data);
+      if (data.status = 'failed') {
+        item.result_url = 'src/assets/images/failed.png'
+      } else if (data.status = 'success') {
+        item.result_url = data.result_url;
+      }
+  })
+  .catch((error) => {
+      console.error('Error:', error);
+  });
+}
+
+const getBackgroundImage = (item) => {
+  // If result_url exists, use it
+  if (item.result_url) {
+    return item.result_url;
+  }
+  
+  // 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>
+
+<template>
+  <ModalTransition class="myPhoto" :show="show">
+    <div class="myPhoto-bg">
+      <div class="scene-item item-1" @click="goBack">
+        <img src="../assets/images/close-btn.png" alt="关闭按钮">
+      </div>
+
+      <div class="scene-item item-3" @click="$emit('go-photo-square')">
+        <img src="../assets/images/zpgc.png" alt="照片广场">
+      </div>
+
+      <div class="image-gallery ">
+        <div 
+          v-for="(item, index) in images" 
+          :key="index" 
+          class="image-wrapper"
+        >
+          <div class="image-container mask-background"
+            :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 
+            :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
+             ? activeBorderImage : defaultBorderImage" 
+            class="border-image"
+            alt="border"
+            @click="!globalStore.chartsBattle && toggleBorder(item, index)"
+          />
+        </div>
+      </div>
+      <div class="scene-item item-2">
+        <img 
+          :src="!globalStore.chartsBattle 
+            ? 'src/assets/images/dabang.png' 
+            : 'src/assets/images/zhuli.png'" 
+          alt="角色图片"
+          @click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
+        >
+      </div>
+
+    </div>
+  </ModalTransition>
+
+  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
+</template>
+
+<style scoped>
+.refresh-btn {
+  width: 12vw;
+  position: absolute;
+  top: 12%;
+  right: 8%;
+  cursor: pointer;
+  z-index: 9;
+}
+.image-wrapper {
+  position: relative;
+  margin-bottom: 0;
+  float: left;
+  margin-right: 2vw;
+  margin-left: 2vw;
+}
+.border-image {
+  position: absolute;
+  width: 40vw;
+  top: 1.6333vh;
+  left: -0.4vw;
+}
+.image-gallery {
+  overflow-y: auto;
+  display: block;
+  width: 84vw;
+  height: 57vh;
+  position: absolute;
+  top: 28%;
+}
+
+.image-container {
+  width: 38vw;
+  height: 56vw;
+  top: 2.2vw;
+  margin-bottom: 3vw;
+  background-image: url('../assets/images/test.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;
+  position: relative;
+  cursor: pointer;
+}
+
+.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;
+}
+
+.content-image {
+  position: relative;
+}
+
+.myPhoto-bg {
+  width: 100%;
+  height: 92vh;
+  background-image: url('../assets/images/my-photo-bg.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;
+  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);
+}
+.btn-login {
+  text-align: center;
+  border-radius: 1vw;
+  background-color: #70b2e2;
+  margin-top: 4vw;
+  padding: 3vw;
+  color: #fff;
+  position: relative;
+}
+.item-1 {
+  top: 9%;
+  width: 10vw;
+  right: 4%;
+}
+.item-3 {
+  top: 16.3vh;
+  width: 32vw;
+  position: absolute;
+  left: 11vw;
+}
+.item-2 {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+}
+.scene-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.btn-login.disable {
+  opacity: .6;
+}
+
+.btn-login.subloading {
+  opacity: .6;
+}
+
+.btn-login.subloading::before {
+  content: "";
+  position: absolute;
+  border: .5vw solid #fff;
+  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
+  border-radius: 50%;
+  width: 3vw;
+  height: 3vw;
+  top: 30%;
+  left: calc(50% - 14vw);
+  animation: loginloading 1s linear infinite;
+}
+
+@keyframes loginloading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/PhotoSquare.vue

@@ -0,0 +1,382 @@
+<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';
+
+defineProps({
+  show: false
+})
+
+const emit = defineEmits(['go-my-photo']);
+const router = useRouter();
+const goBack = () => {
+  emit('update:show', false);
+};
+
+const username = ref();
+const likesCount = ref();
+const userImg = ref();
+const ranking = ref();
+
+const fetchImages = async () => {
+  
+  try {
+    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
+    url.searchParams.append('my_only', '0');
+    
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+      }
+    })
+    const data = await response.json()
+    console.log('Success:', data)
+    images.value = data.data
+    username.value = data.my_published_photo.user_name;
+    likesCount.value = data.my_published_photo.likes_count;
+    userImg.value = data.my_published_photo.result_url;
+    ranking.value = data.my_published_photo.ranking;
+  } catch (error) {
+      console.error('Error:', error)
+  }
+}
+onMounted(fetchImages)
+
+
+// 图片数据
+const images = ref([]);
+const disableInviteHelp = ref(true);
+const userinfos = Storage.get("userinfos")
+// TODO 差接口
+const inviteHelp = ()=> {
+  const formData = {
+    invite_code: userinfos.invite_code,
+    merge_id: ''
+  }
+  fetch('https://huodong2.lzlj.com/api/faceFamily/face/like', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    },
+    body: JSON.stringify(formData)
+  })
+  .then(response => response.json())
+  .then(data => {
+    disableInviteHelp.value = true;
+    ElMessage.success('点赞成功！');
+  })
+  .catch((error) => {
+    ElMessage.success('点赞失败！');
+    console.error('Error:', error);
+  }); 
+}
+</script>
+
+<template>
+  <ModalTransition class="photoSquare" :show="show">
+    <div class="photoSquare-bg">
+      <div class="scene-item item-1" @click="goBack">
+        <img src="../assets/images/close-btn.png" alt="关闭按钮">
+      </div>
+
+      <div class="scene-item item-3" @click="$emit('go-my-photo')">
+        <img src="../assets/images/my-photo-tab.png" alt="我的照片">
+      </div>
+
+      <div v-if="!disableInviteHelp" class="image-gallery ">
+        <div 
+          v-for="(item, index) in images" 
+          :key="index" 
+          class="image-wrapper"
+        >
+          <div class="image-container mask-background">
+          </div>          
+          <img 
+            src="../assets/images/zpgc-border.png" 
+            class="border-image"
+            alt="border"
+          />
+          <div class="flex-container-detail">
+            <div class="left-group">
+              <p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
+              <p class="photo-name">{{ item.user_name }}</p>
+            </div>
+            <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
+          </div>
+        </div>
+      </div>
+      <div v-if="!disableInviteHelp" class="fixed-background-container">
+        <div class="flex-container">
+          <div class="left-group">
+            <p class="photo-number">{{ ranking }}</p>
+            <img :src="userImg" class="user-img" alt="我的照片">
+            <p class="photo-name bold">{{ username }}</p>
+          </div>
+          <p class="right-item photo-name bold" style="padding-left: 3vw;">{{ likesCount }}赞</p>
+        </div>
+      </div>
+
+      <div v-if="disableInviteHelp">
+        <div class="image-gallery-share">
+          <div class="image-wrapper-share">
+            <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>
+              <p class="right-item photo-name" style="padding-left: 3vw;">888赞</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="ranking-title" @click="inviteHelp">
+          <img src="/src/assets/images/dianzan.png" alt="点赞">
+        </div>
+      </div>
+    </div>
+  </ModalTransition>
+
+  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
+</template>
+
+<style scoped>
+.ranking-title {
+  width: 48vw;
+  position: absolute;
+  bottom: 20vw;
+  left: 27vw;
+}
+.ranking-title img {
+  width: 100%;
+}
+.image-gallery-share {
+  margin: 0 auto;
+  position: relative;
+  overflow-y: auto;
+  display: block;
+  width: 84vw;
+  height: 57vh;
+  top: 16%;
+}
+.image-wrapper-share {
+  position: relative;
+  margin-bottom: -10vw;
+  float: left;
+  margin-left: 4vw;
+}
+.image-container-share {
+  width: 77vw;
+  height: 43vh;
+  background-image: url(/src/assets/images/test.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: -webkit-fill-available;
+  position: relative;
+  cursor: pointer;
+}
+.border-image-share {
+  position: absolute;
+  width: 72vw;
+  top: -0.5vw;
+  left: 2.6vw;
+}
+.bold {
+  font-weight: bold;
+}
+.photo-number {
+  color: red;
+}
+.photo-name {
+  color: #93551f;
+}
+.flex-container-detail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 3vh;
+  top: -11vw;
+}
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 8vh;
+  padding: 0 6vw;
+}
+
+.left-group {
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+.user-img {
+  width: 8vw;
+  height: 8vw;
+  border-radius: 50%;
+}
+
+.left-group p, .right-item {
+  margin: 0;
+}
+.fixed-background-container {
+  background-image: url('../assets/images/paiming-border.png');
+  position: fixed;
+  bottom: 1vh;
+  left: 5vw;
+  width: 90vw;
+  height: 8vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+.image-wrapper {
+  position: relative;
+  margin-bottom: -10vw;
+  float: left;
+  margin-right: 2vw;
+  margin-left: 2vw;
+}
+.border-image {
+  position: absolute;
+  width: 40vw;
+  top: 1.6333vh;
+  left: -0.4vw;
+}
+.image-gallery {
+  overflow-y: auto;
+  display: block;
+  width: 84vw;
+  height: 57vh;
+  position: absolute;
+  top: 28%;
+}
+
+.image-container {
+  width: 38vw;
+  height: 28vh;
+  background-image: url('../assets/images/test.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;
+  position: relative;
+  cursor: pointer;
+}
+
+.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;
+}
+
+.content-image {
+  position: relative;
+}
+
+.photoSquare-bg {
+  width: 100%;
+  height: 92vh;
+  background-image: url('../assets/images/zpgc-bg.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;
+  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);
+}
+.btn-login {
+  text-align: center;
+  border-radius: 1vw;
+  background-color: #70b2e2;
+  margin-top: 4vw;
+  padding: 3vw;
+  color: #fff;
+  position: relative;
+}
+.item-1 {
+  top: 9%;
+  width: 10vw;
+  right: 4%;
+}
+.item-3 {
+  top: 16.3vh;
+  width: 32vw;
+  position: absolute;
+  right: 11vw;
+}
+
+.scene-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.btn-login.disable {
+  opacity: .6;
+}
+
+.btn-login.subloading {
+  opacity: .6;
+}
+
+.btn-login.subloading::before {
+  content: "";
+  position: absolute;
+  border: .5vw solid #fff;
+  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
+  border-radius: 50%;
+  width: 3vw;
+  height: 3vw;
+  top: 30%;
+  left: calc(50% - 14vw);
+  animation: loginloading 1s linear infinite;
+}
+
+@keyframes loginloading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/Popup.vue

@@ -0,0 +1,149 @@
+<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';
+
+defineProps({
+  show: false
+})
+
+const emit = defineEmits(['update:show']);
+
+const cancelBtn = () => {
+  emit('update:show', false);
+}
+
+const confirmBtn = () => {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${globalStore.mergeId}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: "application/json",
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    },
+    body: {}
+  })
+  .then(response => response.json())
+  .then(data => {
+    ElMessage.success('打榜成功！');
+    console.log('Success:', data);
+    return { success: true, data };
+  })
+  .catch((error) => {
+    ElMessage.success('打榜失败！');
+    return { success: false, error };
+  });
+  emit('update:show', false);
+}
+
+</script>
+
+<template>
+  <ModalTransition class="popup" :show="show">
+    <div class="popup-bg">
+      <div class="scene-item item-1">
+        <img src="../assets/images/confirm.png" @click="confirmBtn" alt="确认">
+      </div>
+      <p class="message">温馨提示：每位用户只能选择一张合影参与打榜，一经确认，在打榜期间将无法更换。</p>
+      <div class="scene-item item-2">
+        <img src="../assets/images/cancel.png" @click="cancelBtn" alt="取消">
+      </div>
+    </div>
+  </ModalTransition>
+
+  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
+</template>
+
+<style scoped>
+.message {
+  width: 60vw;
+  position: absolute;
+  top: 42%;
+  color: #774107;
+}
+.popup-bg {
+  width: 100%;
+  height: 92vh;
+  background-image: url('../assets/images/popup.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;
+  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);
+}
+.btn-login {
+  text-align: center;
+  border-radius: 1vw;
+  background-color: #70b2e2;
+  margin-top: 4vw;
+  padding: 3vw;
+  color: #fff;
+  position: relative;
+}
+.item-1 {
+  top: 55%;
+  width: 40vw;
+  right: 10%;
+}
+.item-2 {
+  top: 55%;
+  width: 40vw;
+  left: 10%;
+}
+.scene-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.btn-login.disable {
+  opacity: .6;
+}
+
+.btn-login.subloading {
+  opacity: .6;
+}
+
+.btn-login.subloading::before {
+  content: "";
+  position: absolute;
+  border: .5vw solid #fff;
+  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
+  border-radius: 50%;
+  width: 3vw;
+  height: 3vw;
+  top: 30%;
+  left: calc(50% - 14vw);
+  animation: loginloading 1s linear infinite;
+}
+
+@keyframes loginloading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/SelectTemplateV2.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onMounted } from "vue"
 import { useRouter } from 'vue-router'
+import GenerateImgConfirm from './GenerateImgConfirm.vue'
 defineProps({
   show: true
 })
 
 const menuData = ref([
   {
-    title: '神仙',
     imgSrc: 'src/assets/images/generate/shenxian.png',
     activeImgSrc: 'src/assets/images/generate/shenxian-selected.png',
     children: [
@@ -20,7 +20,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '仙侠',
     imgSrc: 'src/assets/images/generate/xianxia.png',
     activeImgSrc: 'src/assets/images/generate/xianxia-selected.png',
     children: [
@@ -33,7 +32,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '复古',
     imgSrc: 'src/assets/images/generate/fugu.png',
     activeImgSrc: 'src/assets/images/generate/fugu-selected.png',
     children: [
@@ -46,7 +44,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '新中式',
     imgSrc: 'src/assets/images/generate/xinzhongshi.png',
     activeImgSrc: 'src/assets/images/generate/xinzhongshi-selected.png',
     children: [
@@ -59,7 +56,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '露营',
     imgSrc: 'src/assets/images/generate/luying.png',
     activeImgSrc: 'src/assets/images/generate/luying-selected.png',
     children: [
@@ -72,7 +68,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '派对',
     imgSrc: 'src/assets/images/generate/paidui.png',
     activeImgSrc: 'src/assets/images/generate/paidui-selected.png',
     children: [
@@ -133,8 +128,8 @@ const getImageStyle = (index, actived)=> {
   console.log(actived)
   return {
     position: 'absolute',
-    width: actived? index === 3? '68px' : '54px' : index === 3 ? '66px' : '44px',
+    width: actived? index === 3? '16vw' : '13vw' : index === 3 ? '15vw' : '10.8vw',
-    top: actived? '14.2%' : '15%',
+    top: actived? '14%' : '15%',
     left: calculateMenuLevel1Left(index, actived) + '%'
   }
 }
@@ -174,7 +169,7 @@ const goToGenerateImgPage = (item) => {
 
 <template>
   <div :show="show">
-    <div class="home-wrapper" style="z-index: 9;">
+    <div class="home-wrapper">
       <div class="scene-item item-1">
         <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
       </div>
@@ -214,13 +209,6 @@ const goToGenerateImgPage = (item) => {
           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>
 
@@ -235,8 +223,8 @@ const goToGenerateImgPage = (item) => {
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  gap: 14px;
+  gap: 3vw;
-  margin-top: 192px;
+  margin-top: 43vw;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -255,15 +243,15 @@ const goToGenerateImgPage = (item) => {
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-  width: 168px;
+  width: 39vw;
-  height: 224px;
+  height: 52vw;
 }
 .border-img {
-  width: 170px;
+  width: 39.5vw;
-  height: 231px;
+  height: 54vw;
   position: absolute;
-  top: -2px;
+  top: -0.5vw;
-  left: 0px;
+  left: 0;
 }
 .home-wrapper {
   width: 100%;
@@ -281,10 +269,8 @@ const goToGenerateImgPage = (item) => {
 
 .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;
@@ -292,7 +278,6 @@ const goToGenerateImgPage = (item) => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -303,7 +288,7 @@ const goToGenerateImgPage = (item) => {
 }
 
 .item-1 {
-  width: 20px;
+  width: 5vw;
   top: 6.7%;
   left: 5%;
   animation-delay: 0s;

src/components/SynthesizedResults.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+import Popup from './Popup.vue'
+import { globalStore } from "../globalstore.js";
+import globalToastEvent, { ToastType } from '../globalToastEvent';
+
+defineProps({
+  show: true
+})
+
+
+const isPopupVisible = ref(false);
+
+
+const chartsBattle = ()=> {
+  globalStore.chartsBattle = true;
+  isPopupVisible.value = true;
+}
+
+const router = useRouter();
+const navigateToHome = () => {
+  router.push({
+    name: 'home'
+  })
+}
+
+const handleLottery = () => {
+  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+}
+
+</script>
+
+<template>
+  <div>
+    <div class="home-wrapper">
+      <div class="scene-item item-1">
+        <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>
+      <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="参与打榜">
+      </div>
+
+      <div class="scene-item item-3" @click="handleLottery">
+        <img src="../assets/images/instant-win.png" alt="立即抽奖">
+      </div>
+    </div>
+  </div>
+
+  <Popup v-model:show="isPopupVisible" />
+</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;
+}
+
+.mask-image {
+  /* background-image: url("../assets/images/haibao-bg.webp"); */
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  width: 100vw;
+  height: 60vh;
+}
+.home-wrapper {
+  width: 100%;
+  height: 92vh;
+  background-image: url('../assets/images/img-result-bg.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;
+  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);
+}
+
+.scene-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.item-1 {
+  width: 16vw;
+  top: 6.7%;
+  left: 5%;
+  animation-delay: 0s;
+}
+.item-2 {
+  width: 45vw;
+  bottom: 3%;
+  left: 5%;
+}
+.item-3 {
+  width: 45vw;
+  bottom: 3%;
+  right: 5%;
+}
+</style>

src/components/TodoList.vue

@@ -152,7 +152,6 @@ const handleScan = (e) => {
 
 .scene-item {
   position: absolute;
-  z-index: 2;
   cursor: pointer;
   transition: all 0.4s ease;
   border-radius: 8px;
@@ -163,7 +162,6 @@ const handleScan = (e) => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -174,14 +172,14 @@ const handleScan = (e) => {
 }
 
 .item-1 {
-  width: 40px;
+  width: 10vw;
   bottom: 54%;
   right: 3%;
   animation-delay: 0s;
 }
 
 .item-1 {
-  width: 40px;
+  width: 10vw;
   bottom: 54%;
   right: 3%;
   animation-delay: 0s;

src/globalstore.js

@@ -1,10 +1,17 @@
 import { reactive } from "vue"
 
 export const globalStore = reactive({
+  draw_chances: 0,
+  game_chances: 0,
+  lotteryCount: 0,
+  result_url: '',
+  mergeId: 61,
+  generateStatus: false,
+  generateImgTemplates: [],
+  chartsBattle: false,
   invitees: 0,
   followed_official: false,
   cap_scan: 0,
-  lotteryCount: 0,
   game_chances_view_recipes: 0,
   POINT_1_ICESIP: 100,
   POINT_1_ICON: 100,
@@ -12,13 +19,13 @@ export const globalStore = reactive({
   CONSUME_POINT_1_PER_DRAW: 1000,
   MAX_INVITE_DAILY: 5,
   MAX_VIEW_RECIPES_DAILY: 3,
-  updateViewRecipesCount () {
-    this.game_chances_view_recipes = this.game_chances_view_recipes >= this.MAX_VIEW_RECIPES_DAILY ? this.MAX_VIEW_RECIPES_DAILY : this.game_chances_view_recipes + 1
-  },
   lotteryCut () {
     this.lotteryCount--
   },
   lotteryAdd () {
     this.lotteryCount++
+  },
+  updateViewRecipesCount () {
+    this.game_chances_view_recipes = this.game_chances_view_recipes >= this.MAX_VIEW_RECIPES_DAILY ? this.MAX_VIEW_RECIPES_DAILY : this.game_chances_view_recipes + 1
   }
 })

src/router/routes.js

@@ -3,6 +3,8 @@ import TodoList from '../../src/components/HomePage.vue'
 import GenerateImg from '../../src/components/GenerateImg.vue'
 import SelectTemplateV2 from '../../src/components/SelectTemplateV2.vue'
 import GenerateImgConfirm from '../../src/components/GenerateImgConfirm.vue'
+import MyPhoto from '../../src/components/MyPhoto.vue'
+import SynthesizedResults from '../../src/components/SynthesizedResults.vue'
 
 export default [
   {
@@ -30,6 +32,16 @@ export default [
     name: 'generateImgConfirm',
     component: GenerateImgConfirm
   },
+  {
+    path: '/myPhoto',
+    name: 'myPhoto',
+    component: MyPhoto
+  },
+  {
+    path: '/synthesizedResults',
+    name: 'synthesizedResults',
+    component: SynthesizedResults
+  },
   // {
   //   path: '/todoList',
   //   name: 'todo',

vite.config.js

@@ -22,17 +22,6 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
-  server: {
-    proxy: {
-      '/api': {
-        target: 'https://huodong2.lzlj.com',
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': ''
-        }
-      }
-    }
-  },
   build: {
     assetsInlineLimit: 0,
     rollupOptions: {