0911 第一版

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 isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-//   if (!isJpgOrPng) {
-//     ElMessage.error('只能上传JPG或PNG格式的图片!');
-//     return false; // 返回false阻止上传
-//   }
-//   const isLt2M = file.size / 1024 / 1024 < 2;
-//   if (!isLt2M) {
-//     ElMessage.error('图片大小不能超过2MB!');
-//     return false;
-//   }
-//   return true; // 返回true继续上传
-// };
+const beforeUpload = (file) => {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJpgOrPng) {
+    ElMessage.error('只能上传JPG或PNG格式的图片!');
+    return false;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过2MB!');
+    return false;
+  }
+  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) => {
-//   console.log(index)
-//   imageUrl1.value = response.url;
-//   ElMessage.success('上传成功！');
-// };
+const handleSuccess = (response, index) => {
+  // 上传成功后，将文件信息添加到数组
+  if (response) {
+    const ids = getTemplateIdsFromUrl(response, window.location.href, index);
+    uploadedFiles.push({
+      templateIds: ids
+    });
+  }
+  uploadItems.value[index].imageUrl = response.url;
+  ElMessage.success('上传成功！');
+};
 
 // 上传失败回调
-// const handleError = (error) => {
-//   // console.error('上传失败:', 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('上传成功！');
-// };
+const handleError = (error) => {
+  console.error('上传失败:', error);
+  ElMessage.error('上传失败，请重试！');
+};
 
 // 根据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) => {
-        if (progressEvent.lengthComputable) {
-          const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
-          onProgress({ percent }) // 更新上传进度
-        }
-      }
-    }
-    
-    // 使用你封装的Request方法调用API
-    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
-    
+      body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Success:', data);
+        onSuccess(data);
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+    });    
   } 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;
-  height: 436px;
-  margin-top: -28px;
+  width: 75vw;
+  height: 103vw;
+  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;
-  bottom: 28px;
+  width: 70vw;
+  bottom: 15%;
+  animation-delay: 0s;
+}
+
+.item-3 {
+  width: 54vw;
+  bottom: 6vw;
   animation-delay: 0s;
 }
 
 .item {
-  width: 48px;
+  width: 17vw;
 }
 .item-4 {
-  width: 48px;
-  top: 30.6%;
-  left: 44.5%;
+  width: 72vw;
+  top: 23.5%;
+  pointer-events: none;
 }
 .item-5 {
-  width: 48px;
-  top: 34%;
-  left: 72%;
-}
-.item-6 {
-  width: 48px;
-  top: 49.4%;
-  left: 36.6%;
-}
-.item-7 {
-  width: 48px;
-  top: 40%;
-  left: 57.5%;
+  width: 48vw;
+  bottom: 3vw;
+  animation-delay: 0s;
 }
 </style>