update

No changes 11

index.html

@@ -71,7 +71,8 @@
       background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23ededed' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23ededed' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23ededed' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center;
       background-size: 10% 10%;
     }
-    .preload{
+
+    .preload {
       display: none;
     }
   </style>
@@ -144,7 +145,7 @@
     var _hmt = _hmt || [];
     (function () {
       var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?71eeb5d8fcd3c242670077b6398b3a0d";
+      hm.src = "https://hm.baidu.com/hm.js?eea1d73562644a65f05fa3b1c04c3894";
       var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(hm, s);
     })();

src/components/Ad.vue

@@ -10,23 +10,25 @@
 <script setup>
 import ModalTransition from "./ModalTransition.vue"
 import { ref } from "vue"
-import { isWeixinPlatform, miniJumpToScene, getMiniPageBtnHack } from "../libs/utils"
+import { isWeixinPlatform, miniJumpToActive, getMiniPageBtnHack } from "../libs/utils"
 const props = defineProps({
   show: false,
 })
 const emit = defineEmits(['close'])
 const adHtml = ref('')
 //TODO: 这个地址后面要改的
-adHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fcoupon%2Fcoupons-list")
+adHtml.value = getMiniPageBtnHack("/pages/retail-act/landing-page/ordinary?id=897432916524553363&orgId=200282401019674482&programId=84796583983972352")
 const adGoto = () => {
   if (!isWeixinPlatform()) {
     weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
+  }else{
+    miniJumpToActive()
   }
 }
 
 </script>
 
-<style scoped>
+<style>
 .ad-wrapper {
   position: relative;
   width: 100vw;
@@ -48,7 +50,13 @@ const adGoto = () => {
   background-size: 100%;
 }
 
-.close {
+.btn-ad wx-open-launch-weapp#launch-btn{
+  width: 100%;
+  height: 100%;
+  display: block !important;
+}
+
+.ad .close {
   position: absolute;
   width: 8.148148vw;
   height: 8.148148vw;

src/components/GenerateImg.vue

@@ -32,9 +32,9 @@ const beforeUpload = (file) => {
     return false;
   }
   
-  const isLt2M = file.size / 1024 / 1024 < 5;
+  const isLt2M = file.size / 1024 / 1024 < 10;
   if (!isLt2M) {
-    ElMessage.error('图片大小不能超过5MB!');
+    ElMessage.error('图片大小不能超过10MB!');
     return false;
   }
   
@@ -157,8 +157,20 @@ const clearUploadFile = (index) => {
   if (uploadRefs.value[index]) {
     uploadRefs.value[index].clearFiles();
     uploadItems.value[index].imageUrl = '';
-    
-    uploadedFiles.splice(index, 1);
+    // 获取 templateFaceID
+    const ids = getTemplateIdsFromUrl(
+      uploadedFiles[index]?.templateIds,
+      globalStore.select_template,
+      index
+    );
+    if (!ids || !ids.templateFaceID) return;
+    // 通过 templateFaceID 定位并删除
+    const removeIdx = uploadedFiles.findIndex(
+      file => file.templateIds?.templateFaceID === ids.templateFaceID
+    );
+    if (removeIdx !== -1) {
+      uploadedFiles.splice(removeIdx, 1);
+    }
   }
 };
 
@@ -260,10 +272,12 @@ const generateImage = async (options) => {
       }
     } else {
       ElMessage.error(data.message);
+      loading.hide();
     }
     
   } catch (error) {
     console.error('Merge API error:', error);
+    loading.hide();
   }
 }
 
@@ -405,6 +419,7 @@ const customUpload = async (options) => {
         onSuccess(data);
       } else {
         ElMessage.error(data.message);
+        loading.hide();
       }
     })
     .catch((error) => {

src/components/HomePage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter, useRoute } from 'vue-router'
-import faceFamily from "../assets/audio/faceFamily.mp3"
+import bgm from "../assets/audio/bgm.mp3"
 import backgroundVideo from "../assets/video/1_stab_chf3_rhea1.mp4"
 import MyPhoto from './MyPhoto.vue'
 import PhotoSquare from './PhotoSquare.vue'
@@ -21,11 +21,13 @@ const videoElement = ref(null);
 const videoLoaded = ref(false);
 const videoError = ref(false);
 const lotteryShow = ref(false)
+const lotteryType = ref("draw")
+const lotteryNoticeData = ref(null)
 
 // 初始化全局音频实例
 const initGlobalAudio = () => {
   if (!globalStore.globalAudio) {
-    globalStore.globalAudio = new Audio(faceFamily);
+    globalStore.globalAudio = new Audio(bgm);
     globalStore.globalAudio.loop = true; // 设置循环播放
     globalStore.globalAudio.preload = 'auto';
 
@@ -97,6 +99,9 @@ const checkAndPlayAudio = () => {
 
 // 初始化视频
 const initVideo = () => {
+  document.addEventListener('WeixinJSBridgeReady',()=>{
+    videoElement.value && videoElement.value.play()
+  })
   setTimeout(() => {
     if (videoElement.value) {
       const video = videoElement.value;
@@ -227,13 +232,15 @@ const handleLottery = () => {
   if (globalStore.draw_chances <= 0) {
     return weui.alert("还没有抽奖机会，快去参加活动吧")
   };
+  lotteryType.value = 'draw'
+  lotteryNoticeData.value = null
   globalToastEvent.emit(ToastType.SHOW_LOTTERY)
 
 }
 
 const router = useRouter();
 const navigateSelectTemplatePage = () => {
-  if (globalStore.game_chances <= 0) return;
+  if (globalStore.game_chances <= 0) return weui.alert('去做任务获得更多参与次数吧');
   globalStore.reducerGameChances();
   router.push({
     name: 'selectTemplateV2'
@@ -306,12 +313,20 @@ const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
     globalToastEvent.emit(ToastType.MOUNTED)
   }
 }
-
+const getNotice = async () => {
+  const result = await Request('notice/latest', {}, "GET")
+  if (result.json.notification) {
+    lotteryType.value = 'notice'
+    lotteryNoticeData.value = result.json.notification
+    lotteryShow.value = true
+  }
+}
 const handleLoginSuccess = async () => {
   console.log("已登录")
   loginShow.value = false
 
   await initUserGameInfos(true, true)
+  await getNotice()
 }
 
 if (isLogin()) {
@@ -333,14 +348,23 @@ watch(() => mergeId, async (newVal) => {
   }
 }, { immediate: true })
 
-globalToastEvent.on(ToastType.SHOW_LOTTERY, () => {
+globalToastEvent.on(ToastType.SHOW_LOTTERY, async () => {
+  // await initUserGameInfos(false, false);
   lotteryShow.value = true
 })
+globalToastEvent.on(ToastType.INFO_UPDATE, async () => {
+  initUserGameInfos(false, false)
+})
 
 watch(() => lotteryShow.value, async (newVal) => {
   initUserGameInfos(true, true);
 }, { immediate: true })
 
+import Popup from './Popup.vue'
+const isPopupVisible = ref(false);
+const navigatePopupPage = () => {
+  isPopupVisible.value = true;
+}
 </script>
 
 <template>
@@ -361,6 +385,10 @@ watch(() => lotteryShow.value, async (newVal) => {
         <img src="../assets/images/slogan.webp" alt="slogan">
       </div>
 
+      <div class="scene-item home-title">
+        <img src="../assets/images/home-title.webp" alt="slogan">
+      </div>
+
       <!-- fallback 背景图，当视频无法加载时显示 -->
       <div v-if="videoError || !videoLoaded" class="fallback-background"></div>
 
@@ -370,8 +398,7 @@ watch(() => lotteryShow.value, async (newVal) => {
           <p class="lottery-value">{{ globalStore.draw_chances }}</p>
         </div>
       </div>
-      <div class="scene-item item-2" @click="navigateSelectTemplatePage"
-        :class="{ 'disabled': globalStore.game_chances <= 0 }">
+      <div class="scene-item item-2" @click="navigatePopupPage">
         <img src="../assets/images/join.webp" alt="立即参与">
         <div class="join-main">
           <p class="join-value">{{ globalStore.game_chances }}</p>
@@ -407,7 +434,8 @@ watch(() => lotteryShow.value, async (newVal) => {
   <MyPhoto @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
   <PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
   <Login :show="loginShow" @login-success="handleLoginSuccess" />
-  <Lottery :show="lotteryShow" @close="lotteryShow = false"></Lottery>
+  <Lottery :show="lotteryShow" @close="lotteryShow = false" :type="lotteryType" :data="lotteryNoticeData"></Lottery>
+  <Popup v-model:show="isPopupVisible" />
 </template>
 
 <style scoped>
@@ -422,6 +450,11 @@ watch(() => lotteryShow.value, async (newVal) => {
   width: 76vw;
 }
 
+.home-title {
+  width: 72vw;
+  top: 144vw;
+}
+
 .main {
   height: 100%;
   overflow-y: auto;

src/components/Lottery.vue

@@ -5,16 +5,18 @@
       <div class="guangyun" ref="guangyunRef"></div>
       <div class="lottery-scene" ref="sceneRef">
         <div class="lottery-card" ref="cardRef">
-          <div class="lottery-face">
-            <img :src="lotteryFaceUrl" alt="">
-          </div>
           <div class="lottery-prize">
-            <div class="lottery-title" ref="titleRef"></div>
-            <div class="lottery-image" :class="activePrizeData.prize_code"></div>
-            <div class="lottery-name">{{ activePrizeData.name }}</div>
+            <div class="lottery-title" :class="props.type === 'notice' && 'notice'" ref="titleRef"
+              v-show="activePrizeData.prize_code !== 'NO'"></div>
+            <div class="lottery-desc" v-show="props.type === 'notice'">
+              在刚刚结束的打榜活动中成功斩获<br /><strong>第[{{ activePrizeData.rank }}]名</strong>
+            </div>
+            <div class="lottery-image" :class="'USER_' + activePrizeData.prize_code" ref="lotteryImageRef"></div>
+            <div class="lottery-name" v-show="activePrizeData.prize_code !== 'NO'">{{ activePrizeData.prize_name }}
+            </div>
             <div class="lottery-btngroup" v-show="btngroupShow">
               <div class="btn-more" @click="handleBtnMore"></div>
-              <div class="btn-kaixin" @click="handleLotteryAction"></div>
+              <div class="btn-kaixin" @click="handleLotteryAction" v-if="activePrizeData.prize_code !== 'NO'"></div>
             </div>
           </div>
         </div>
@@ -33,14 +35,13 @@ import confetti from "canvas-confetti";
 import { Request, Sleep } from "../libs/utils"
 import { globalStore } from "@/globalstore";
 import getUserPicture from "../libs/getUserPicture";
-//TODO: globalStore.result_url 这里这张图要用用户分享那张图
-// import lotteryFace from "../assets/images/haibao-cover.webp"
 
-const lotteryFaceUrl = ref('')
+// const lotteryFaceUrl = ref('')
 const cardRef = ref(null)
 const sceneRef = ref(null)
 const guangRef = ref(null)
 const guangyunRef = ref(null)
+const lotteryImageRef = ref(null)
 const titleRef = ref(null)
 const activePrizeData = ref({})
 const btngroupShow = ref(false)
@@ -48,14 +49,13 @@ const btngroupShow = ref(false)
 gsap.registerPlugin()
 const props = defineProps({
   show: false,
+  type: "draw",
+  data: null
 })
 const emit = defineEmits(['close'])
 
 let interval = null
-const PRIZE_LIST = ['TJGJ', 'XINCHUN_WEIZUN', 'TEQU_JL_52_60Y_100ML_2', 'LZLJ_TEQU_LZH_52_100ML_2', 'HEIGAI_42_GPJ_500ML', 'DZCZ', 'DZSCZ', '66_POINTS', 'NO']
-
 let gsapCtx = null
-let shakeTimeline = null
 let PRIZEDATA = null
 
 const closeThis = () => {
@@ -67,9 +67,15 @@ const handleBtnMore = () => {
   closeThis()
   globalToastEvent.emit(ToastType.SHOW_AD)
 }
-const handleLotteryAction = () => {
+const readNotice = async () => {
+  await Request(`notice/read`, { id: activePrizeData.value.noticeId })
+}
+const handleLotteryAction = async () => {
   //实物
   closeThis()
+  if (props.type !== 'draw') {
+    await readNotice()
+  }
   if (activePrizeData.value.coupon_type === 'scene') {
     globalToastEvent.emit(ToastType.SHOW_ADDRESS, activePrizeData.value.id)
   }
@@ -97,17 +103,10 @@ const initAnimateStyle = () => {
     });
   }
 
-  // 创建一个时间线，添加关键帧，并循环
-  shakeTimeline = gsap.timeline({ repeat: -1, paused: true });
-  shakeTimeline.to(cardRef.value, { duration: 0, x: 0, y: 0 }); // 初始位置
-  keyframes.forEach(keyframe => {
-    shakeTimeline.to(cardRef.value, keyframe);
-  });
-  shakeTimeline.to(cardRef.value, { duration: 0.1, x: 0, y: 0 })
-
+  gsap.set(lotteryImageRef.value, { scale: 0 })
   gsap.set(guangyunRef.value, { scale: 0, opacity: 1 })
   gsap.set(titleRef.value, { scaleY: 0 })
-  gsap.set(sceneRef.value, { scale: .5 })
+  gsap.set(sceneRef.value, { scale: .2 })
   gsap.set(cardRef.value, { rotateY: 0 })
   btngroupShow.value = false
 }
@@ -118,38 +117,64 @@ watch(() => props.show, async (newVal) => {
   }
 
   const loading = weui.loading()
-  const userPicture = await getUserPicture()
+  let lottteryResult = null
+  if (props.type === 'draw') {
+    lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
+    // 监听请求失败，关闭组件
+    if (!lottteryResult || !lottteryResult.res || (lottteryResult.res.status !== 200 && lottteryResult.res.status !== 201)) {
+      emit('close')
+      loading.hide()
+      return
+    }
+  } else {
+    if (!props.data) {
+      weui.alert("获取排名奖励出错，请刷新页面重试")
+      emit('close')
+      loading.hide()
+      return
+    }
 
-  const preimg = async() => {
-    new Promise((resolve) => {
-      const img = new Image()
-      img.onload = () => resolve(img)
-      img.src = userPicture
-    })
+    lottteryResult = {
+      res: { status: 200 },
+      json: {
+        noticeId: props.data.id,
+        id: props.data.data.prize.id,
+        prize_code: props.data.data.prize.prize_code,
+        prize_name: props.data.data.prize.name,
+        coupon_type: props.data.data.prize.scene,
+        rank: props.data.data.rank
+      }
+    }
   }
-  await preimg()
-  lotteryFaceUrl.value = userPicture
+  // const userPicture = await getUserPicture()
+
+  // const preimg = async() => {
+  //   new Promise((resolve) => {
+  //     const img = new Image()
+  //     img.onload = () => resolve(img)
+  //     img.src = userPicture
+  //   })
+  // }
+  // await preimg()
+  // lotteryFaceUrl.value = userPicture
 
-  shakeTimeline.play()
   //TODO: 延时测试，上限删掉
   // await Sleep(20000)
 
-  
-  const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
+
   // TODO: 测试数据
-  // const lottteryResult = {
+  // lottteryResult = {
   //   res: { status: 200 },
   //   json: {
   //     id: 0,
-  //     code: "HEIGAI_42_GPJ_500ML",
-  //     prize_code: 'HEIGAI_42_GPJ_500ML',
+  //     code: "xxx",
+  //     prize_code: 'xxx',
   //     coupon_type: "scene",
   //     name: "泸州老窖的一瓶酒"
   //   }
   // }
 
   loading.hide()
-  shakeTimeline.pause()
 
   if (lottteryResult.res.status !== 200) {
     emit('close')
@@ -175,26 +200,23 @@ watch(() => props.show, async (newVal) => {
       }
     });
 
-    prizeshowTime.to(sceneRef.value, {
-      duration: .4,
-      scale: .2,
-    })
-    prizeshowTime.to(sceneRef.value, {
-      duration: 1,
+
+    prizeshowTime.to([sceneRef.value], {
+      duration: 2.5,
       scale: 1,
       opacity: 1,
-      ease: "power4.out"
+      ease: "power4.inOut"
     })
+    prizeshowTime.to(lotteryImageRef.value, {
+      duration: 1,
+      scale: 1,
+      ease: "power4.inOut"
+    }, "-=1.5")
     prizeshowTime.to(guangyunRef.value, {
       duration: 1.5,
       scale: 2,
     }, "-=1")
 
-    prizeshowTime.to(cardRef.value, {
-      rotateY: 180 * 3,
-      duration: 1,
-    }, "-=1.4")
-
     prizeshowTime.to(titleRef.value, {
       scaleY: 1,
       ease: "elastic.out(1,0.3)"
@@ -224,12 +246,49 @@ watch(() => props.show, async (newVal) => {
 })
 
 onUnmounted(() => {
-  shakeTimeline = null
   gsapCtx && gsapCtx.revert()
 })
 </script>
 
 <style scoped>
+.lottery-image.USER_LZ_ZQ_DZJ {
+  background-image: url("../assets/images/USER_LZ_ZQ_DZJ.webp");
+}
+
+.lottery-image.USER_HG_42_GPJ_500ML {
+  background-image: url("../assets/images/USER_HG_42_GPJ_500ML.webp");
+}
+
+.lottery-image.USER_QLL_MH {
+  background-image: url("../assets/images/USER_QLL_MH.webp");
+}
+
+.lottery-image.USER_DZSKSJ {
+  background-image: url("../assets/images/USER_DZSKSJ.webp");
+}
+
+.lottery-image.USER_LZ_ZQ_DZJ_LJW {
+  background-image: url("../assets/images/USER_LZ_ZQ_DZJ_LJW.webp");
+}
+
+.lottery-image.USER_NO {
+  background-size: 60% auto;
+  background-position: center center;
+  background-image: url("../assets/images/USER_NO.webp");
+}
+
+.lottery-image.USER_LZ_XS_SPZ_30ML {
+  background-image: url("../assets/images/USER_LZ_XS_SPZ_30ML.webp");
+}
+
+.lottery-image.USER_LZ_DZ_JBGJ {
+  background-image: url("../assets/images/USER_LZ_DZ_JBGJ.webp");
+}
+
+.lottery-image.USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ {
+  background-image: url("../assets/images/USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ.webp");
+}
+
 .guang,
 .guangyun {
   position: absolute;
@@ -258,7 +317,7 @@ onUnmounted(() => {
   position: absolute;
   top: 24vw;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) !important;
   width: 65.462963vw;
   height: 19.907407vw;
   background-image: url("../assets/images/lottery-title.webp");
@@ -266,12 +325,40 @@ onUnmounted(() => {
   background-size: 100%;
 }
 
+.lottery-title.notice {
+  width: 39.259259vw;
+  height: 7.12963vw;
+  background-image: url("../assets/images/notice-title.webp");
+}
+
+.lottery-desc {
+  position: absolute;
+  top: 32vw;
+  left: 50%;
+  transform: translateX(-50%) !important;
+  width: 81vw;
+  font-size: 5vw;
+  font-weight: 700;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  text-shadow:
+    0 0 0.37037vw #ff0000,
+    0 0 0.740741vw #ff0000,
+    0 0 1.111111vw #ff0000,
+    0.092593vw 0.092593vw 0 #ff0000,
+    -0.092593vw -0.092593vw 0 #ff0000;
+}
+
 .lottery-name {
   position: absolute;
   bottom: 18vw;
   text-align: center;
-  width: 100%;
-  font-size: 6vw;
+  width: 80%;
+  left: 10%;
+  font-size: 4.3vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 700;
   color: rgb(255, 255, 255);
   text-shadow:
@@ -287,7 +374,7 @@ onUnmounted(() => {
   bottom: -24vw;
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
 }
 
 .btn-more {
@@ -314,6 +401,7 @@ onUnmounted(() => {
   background-position: center bottom;
   background-repeat: no-repeat;
   background-size: auto 100%;
+  background-origin: 50% 100%;
 }
 
 .lottery-image.HEIGAI_42_GPJ_500ML {
@@ -357,12 +445,10 @@ onUnmounted(() => {
   position: absolute;
   width: 100%;
   height: 100%;
-  transform-style: preserve-3d;
+
+  top: -14vw;
 }
 
-.lottery-card.flip {
-  transform: rotateY(180deg);
-}
 
 .lottery-face {
   position: absolute;
@@ -387,8 +473,6 @@ onUnmounted(() => {
   background-image: url("../assets/images/prize-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
-  backface-visibility: hidden;
-  transform: rotateY(180deg);
 }
 
 .close {

src/components/MyPhoto.vue

@@ -21,7 +21,7 @@ const goBack = () => {
 const imageList = ref([])
 const displayZhuli = ref(false);
 const fetchImages = async () => {
-  
+
   try {
     const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
     url.searchParams.append('my_only', '1');
@@ -35,15 +35,50 @@ const fetchImages = async () => {
     })
     const data = await response.json()
     if (response.status == 200 || response.status == 201) {
-      images.value = data.data;
-      const foundItem = data.data.find(item => item.is_public === true);
+  // 只保留 status=processing 或 result_url 不为空的记录
+  images.value = data.data.filter(item => item.status === 'processing' || item.result_url);
+      // 测试数据
+      // images.value = [
+      //     {
+      //         "id": 186,
+      //         "status": "success",
+      //         "error_message": null,
+      //         "is_public": false,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250919\/face-merge-717b50c3-9c38-4713-929a-49d072b90ab6.jpg",
+      //         "likes_count": 0,
+      //         "created_at": "2025-09-19T04:30:26.000000Z",
+      //         "user_name": "\u4f9d\u65ed"
+      //     },
+      //     {
+      //         "id": 155,
+      //         "status": "success",
+      //         "error_message": null,
+      //         "is_public": false,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-1d2ddf63-b029-48f8-b0b7-de7643dbd184.jpg",
+      //         "likes_count": 0,
+      //         "created_at": "2025-09-17T13:37:08.000000Z",
+      //         "user_name": "\u4f9d\u65ed"
+      //     },
+      //     {
+      //         "id": 156,
+      //         "status": "success",
+      //         "error_message": null,
+      //         "is_public": false,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-eda32a25-4244-4041-8db8-25aeb41f5a2f.jpg",
+      //         "likes_count": 2,
+      //         "created_at": "2025-09-17T13:40:49.000000Z",
+      //         "user_name": "\u4f9d\u65ed"
+      //     }
+      // ]
+      const foundItem = images.value.find(item => item.is_public === true);
       if (foundItem) {
         globalStore.result_url = foundItem.result_url;
+        globalStore.mergeId = foundItem.id
         displayZhuli.value = true;
       } else {
         displayZhuli.value = false;
       }
-      imageList.value = data;
+      imageList.value = images.value;
 
       const hasPublicImage = images.value.some(item => item.is_public);
       if (hasPublicImage) {
@@ -57,7 +92,7 @@ const fetchImages = async () => {
       ElMessage.error(data.message);
     }
   } catch (error) {
-      console.error('Error:', error)
+    console.error('Error:', error)
   }
 }
 
@@ -71,27 +106,27 @@ watch(() => props.show, async (newVal) => {
 
 // 图片数据
 const images = ref([]);
- 
+
 import defaultBorderImage from '../assets/images/my-photo-border.webp';
 import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
+import inActiveBorderImage from '../assets/images/no-btn.webp';
 
 const activeBorders = ref(images.value.map(() => false));
-let mergeId = '';
 // 切换边框状态
 const toggleBorder = (item, index) => {
   activeBorders.value = activeBorders.value.map(() => false);
   // 如果没有打榜，点击切换图片时，把当前背景图赋值给globalStore.result_url做为最新的背景图
   globalStore.result_url = item.result_url;
   activeBorders.value[index] = true;
-  mergeId = item.id;
+  globalStore.mergeId = item.id;
 };
 
 const handleDabangClick = () => {
-  if (!mergeId) {
+  if (!globalStore.mergeId) {
     weui.alert("请先合成照片！")
     return false;
   }
-  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${mergeId}`, {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${globalStore.mergeId}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -100,21 +135,21 @@ const handleDabangClick = () => {
     },
     body: {}
   })
-  .then(async response => {
-    const data = await response.json()
-    if (response.status == 200 || response.status == 201) {
-      ElMessage.success('打榜成功！');
-      displayZhuli.value = true;
-      globalStore.chartsBattle = true;
-      return { success: true, data };
-    } else {
-      ElMessage.error(data.message);
-    }
-  })
-  .catch((error) => {
-    ElMessage.error('打榜失败！');
-    return { success: false, error };
-  });
+    .then(async response => {
+      const data = await response.json()
+      if (response.status == 200 || response.status == 201) {
+        ElMessage.success('打榜成功！');
+        displayZhuli.value = true;
+        globalStore.chartsBattle = true;
+        return { success: true, data };
+      } else {
+        ElMessage.error(data.message);
+      }
+    })
+    .catch((error) => {
+      ElMessage.error('打榜失败！');
+      return { success: false, error };
+    });
 };
 
 const handleZhuliClick = () => {
@@ -130,35 +165,39 @@ const downloadGenerateImg = (item) => {
 import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp"
 import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp";
 import failedImg from '../assets/images/failed.webp';
-const getGenerateImgStatus = async (item)=> {
+import processingImg from '../assets/images/processing.webp';
+const getGenerateImgStatus = async (item) => {
+  const loading = weui.loading()
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
     method: 'GET',
     headers: {
       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
     }
   })
-  .then(async response => {
-    const data = await response.json()
-    if (response.status == 200 || response.status == 201) {
-      if (data.status = 'failed') {
-        item.result_url = failedImg;
-      } else if (data.status = 'success') {
-        item.result_url = data.result_url;
+    .then(async response => {
+      const data = await response.json()
+      loading.hide();
+      if (response.status == 200 || response.status == 201) {
+        if (data.status = 'failed') {
+          item.result_url = failedImg;
+        } else if (data.status = 'success') {
+          item.result_url = data.result_url;
+        }
+      } else {
+        ElMessage.error(data.message);
       }
-    } else {
-      ElMessage.error(data.message);
-    }
-  })
-  .catch((error) => {
-    ElMessage.error('获取状态失败！');
-  });
+    })
+    .catch((error) => {
+      loading.hide();
+      ElMessage.error('获取状态失败！');
+    });
 }
 
 const getBackgroundImage = (item) => {
   if (item.result_url) {
     return `${item.result_url}?x-oss-process=image/resize,w_400/format,webp/quality,q_80`;
   } else {
-    return item.result_url = failedImg;
+    return item.result_url = processing;
   }
 };
 
@@ -168,7 +207,7 @@ import Haibao from "@/libs/haibao";
 import mask from "../assets/images/haibao-mask.webp";
 import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
 import bg from "../assets/images/haibao-bg.webp"
-const loadImage = (src)=> {
+const loadImage = (src) => {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.crossOrigin = "Anonymous";
@@ -205,10 +244,10 @@ const handleHaibao = async (item) => {
         userHaibaoUrl.value = url
 
         const haibaoSave = new Haibao(1080, 2160)
-        const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
+        const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${globalStore.mergeId}`, 200, 200)
         haibaoSave.add(bg, 0, 0)
         haibaoSave.add(url, 64, 250)
-        haibaoSave.add(qrcode, 115, 1875)
+        haibaoSave.add(qrcode, 127, 1860)
         haibaoSave.draw().then(() => {
           haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
           haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
@@ -240,6 +279,10 @@ const handleHaibao = async (item) => {
       })
     })
 
+    if (!globalStore.first_share_today) {
+      Request(`face/share/${globalStore.mergeId}`)
+    }
+
     const haibaoCoverNoTitle = new Haibao(951, 1607)
     haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698)
     haibaoCoverNoTitle.add(mask, 10, 100)
@@ -247,10 +290,10 @@ const handleHaibao = async (item) => {
     haibaoCoverNoTitle.draw('destination-in').then(() => {
       haibaoCoverNoTitle.generate({ mimeType: 'image/png' }).then(async (url) => {
         const haibaoSaveNoTitle = new Haibao(1080, 2160)
-        const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
+        const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${globalStore.mergeId}`, 200, 200)
         haibaoSaveNoTitle.add(bg, 0, 0)
         haibaoSaveNoTitle.add(url, 64, 250)
-        haibaoSaveNoTitle.add(qrcode, 115, 1875)
+        haibaoSaveNoTitle.add(qrcode, 127, 1860)
         haibaoSaveNoTitle.draw().then(() => {
           haibaoSaveNoTitle.text(infos.nickname + '的全家福', haibaoSaveNoTitle.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
           haibaoSaveNoTitle.generate({ mimeType: 'image/png' }).then(url => {
@@ -276,6 +319,18 @@ markers.value = [
   { x: 0, y: 32, width: 50, height: 14 }
 ];
 
+const getBorder = (item, index) => {
+  if (globalStore.chartsBattle && index !== 0) {
+    return inActiveBorderImage;
+  } else {
+    if ((activeBorders.value[index] || (globalStore.chartsBattle && item.is_public))) {
+      return activeBorderImage;
+    } else {
+      return defaultBorderImage;
+    }
+  }
+}
+
 
 </script>
 
@@ -286,18 +341,14 @@ markers.value = [
         <img src="../assets/images/close-btn.webp" alt="关闭按钮">
       </div>
 
-      <div v-for="(marker, index) in markers" 
-          :key="index"
-          class="marker"
-          :style="{
-            left: marker.x + 'vw',
-            top: marker.y + 'vw',
-            width: marker.width + 'vw',
-            height: marker.height + 'vw'
-          }"
-          @click.stop="$emit('go-photo-square')">
+      <div v-for="(marker, index) in markers" :key="index" class="marker" :style="{
+        left: marker.x + 'vw',
+        top: marker.y + 'vw',
+        width: marker.width + 'vw',
+        height: marker.height + 'vw'
+      }" @click.stop="$emit('go-photo-square')">
       </div>
-      <p class="my-photo-desc">每位会员只能选一张照片参与打榜，点赞前30名即可活动中秋精美礼品，速速邀请好友为你点赞吧！</p>
+      <p class="my-photo-desc">每位会员只能选一张照片参与打榜，点赞前30名即可获得中秋精美礼品，速速邀请好友为你点赞吧！</p>
       <div class="image-gallery">
         <!-- <RecycleScroller
             class="scroller"
@@ -323,29 +374,21 @@ markers.value = [
             </div>
           </div>
         </RecycleScroller> -->
-        <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.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">   
-          <img 
-          :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
-             ? activeBorderImage : defaultBorderImage" 
-            class="border-image"
-            alt="border"
-            @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"
-            />
-          <img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)" src="../assets/images/download.webp" class="download-btn" alt="下载图片">         
+        <div v-for="(item, index) in images" :key="index" class="image-wrapper">
+          <div class="image-container mask-background" @click="downloadGenerateImg(item)" :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
+          </div>
+          <img v-if="item.status === 'processing'" @click.stop="getGenerateImgStatus(item)"
+            src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
+          <img :src="getBorder(item, index)" class="border-image" alt="border"
+            @click.stop="downloadGenerateImg(item)"
+          />
+          <div class="mask-overlay" 
+          @click="(!globalStore.chartsBattle && item.result_url !== processingImg) && toggleBorder(item, index)"></div>
         </div>
       </div>
       <div class="scene-item item-2">
-        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力" >
-        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜" >
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力">
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜">
       </div>
 
       <div class="fullsection" v-show="haibaoShow">
@@ -360,17 +403,30 @@ markers.value = [
 </template>
 
 <style scoped>
+/* 蒙版样式 */
+.mask-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 14vw;
+  width: 10vw;
+  height: 8vw;
+  z-index: 2;
+  cursor: pointer;
+}
 .scroller {
   height: 124vw;
   overflow-y: auto;
 }
+
 .list-item {
   height: 2vw;
   line-height: 50px;
 }
+
 .marker {
   position: absolute;
 }
+
 .fullsection {
   position: fixed;
   top: 0;
@@ -418,6 +474,7 @@ markers.value = [
   color: #855211;
   font-size: 3.6vw;
 }
+
 .download-btn {
   width: 12.6vw;
   position: absolute;
@@ -425,13 +482,16 @@ markers.value = [
   right: 3vw;
   cursor: pointer;
 }
+
 .refresh-btn {
   width: 12vw;
   position: absolute;
   top: 7vw;
   right: 3vw;
   cursor: pointer;
+  z-index: 13;
 }
+
 .image-wrapper {
   position: relative;
   margin-right: 2vw;
@@ -439,12 +499,14 @@ markers.value = [
   width: 38vw;
   height: 59vw;
 }
+
 .border-image {
   position: absolute;
   width: 40vw;
   top: 2.8vw;
   left: -0.8vw;
 }
+
 .image-gallery {
   overflow-y: auto;
   overflow-x: hidden;
@@ -464,7 +526,7 @@ markers.value = [
   top: 0;
   margin-bottom: 3vw;
   background-image: url('../assets/images/test.webp');
-  background-size: 100%;
+  background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
@@ -503,6 +565,7 @@ markers.value = [
   position: relative;
   min-height: -webkit-fill-available;
 }
+
 .scene-item {
   position: absolute;
   cursor: pointer;
@@ -516,6 +579,7 @@ markers.value = [
 .scene-item:hover {
   transform: scale(1.05);
 }
+
 .btn-login {
   text-align: center;
   border-radius: 1vw;
@@ -525,22 +589,26 @@ markers.value = [
   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%;

src/components/PhotoSquare.vue

@@ -47,13 +47,13 @@ const fetchImages = async () => {
       images.value = data.data
       if (data.my_published_photo) {
         displayMyPublishPhoto.value = true;
+        username.value = data.my_published_photo.user_name;
+        likesCount.value = data.my_published_photo.likes_count;
+        userImg.value = data.my_published_photo.avatar;
+        ranking.value = data.my_published_photo.ranking;
       } else {
         displayMyPublishPhoto.value = false;
       }
-      username.value = data.my_published_photo.user_name;
-      likesCount.value = data.my_published_photo.likes_count;
-      userImg.value = data.my_published_photo.avatar;
-      ranking.value = data.my_published_photo.ranking;
     } else {
       ElMessage.error(data.message);
       emit('update:show', false);
@@ -70,8 +70,66 @@ watch(() => props.show, async (newVal) => {
   fetchImages();
 }, {immediate: true})
 
-// 图片数据
+// 图片数据与分页
 const images = ref([]);
+const page = ref(1);
+const perPage = 20;
+const loading = ref(false);
+const finished = ref(false);
+
+const loadMoreImages = async () => {
+  if (loading.value || finished.value) return;
+  loading.value = true;
+  try {
+    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
+    url.searchParams.append('my_only', '0');
+    url.searchParams.append('page', page.value);
+    url.searchParams.append('per_page', perPage);
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+      }
+    });
+    const data = await response.json();
+    if (response.status == 200 || response.status == 201) {
+      if (data.data.length < perPage) finished.value = true;
+      images.value.push(...data.data);
+      page.value++;
+      if (data.my_published_photo) {
+        displayMyPublishPhoto.value = true;
+        username.value = data.my_published_photo.user_name;
+        likesCount.value = data.my_published_photo.likes_count;
+        userImg.value = data.my_published_photo.avatar;
+        ranking.value = data.my_published_photo.ranking;
+      } else {
+        displayMyPublishPhoto.value = false;
+      }
+    } else {
+      ElMessage.error(data.message);
+      emit('update:show', false);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+  loading.value = false;
+};
+
+const handleScroll = (e) => {
+  const el = e.target;
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 100) {
+    loadMoreImages();
+  }
+};
+
+watch(() => props.show, async (newVal) => {
+  if (!newVal) return;
+  // 重置分页
+  images.value = [];
+  page.value = 1;
+  finished.value = false;
+  await loadMoreImages();
+}, {immediate: true});
 const userinfos = Storage.get("userinfos")
 
 let mergeId = '';
@@ -79,6 +137,7 @@ let inviteCode = '';
 const rankingInvite = ref(0);
 const nameInvite = ref('');
 const linkCountInvite = ref(0);
+const backgroundImageForInvite = ref('');
 
 const urlParams = new URLSearchParams(window.location.search);
 mergeId = urlParams.get('merge_id');
@@ -99,9 +158,10 @@ const getInviteInfo =  ()=> {
       rankingInvite.value = data.ranking;
       nameInvite.value = data.user_name;
       linkCountInvite.value = data.likes_count;
+      backgroundImageForInvite.value = data.result_url;
     } else {
       ElMessage.error(data.message);
-      emit('update:show', false);
+      // emit('update:show', false);
     }
   })
   .catch((error) => {
@@ -133,6 +193,8 @@ const inviteHelp = ()=> {
   fetch('https://huodong2.lzlj.com/api/faceFamily/face/like', {
     method: 'POST',
     headers: {
+      'Content-Type': 'application/json',
+      Accept: "application/json",
       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
     },
     body: JSON.stringify(formData)
@@ -186,60 +248,38 @@ const getBackgroundImage = (item) => {
           }"
           @click.stop="$emit('go-my-photo')">
       </div>
-      <p class="my-photo-desc">打榜活动截止至9月30日晚12:00结束，中奖信息将于10月1日早10点推送至获奖会员。</p>
-      <div v-if="!disableInviteHelp" class="image-gallery ">
-        <RecycleScroller
-            class="scroller"
-            :items="images"
-            :item-size="1"
-            key-field="id"
-            v-slot="{ item, index }"
-          >
-          <div class="image-wrapper">
-            <div class="image-container mask-background" 
-            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
-            </div>          
-            <img 
-              src="../assets/images/zpgc-border.webp" 
-              class="border-image"
-              alt="border"
-            />
-            <div class="list-item">
-              <div class="flex-container-detail">
-                <div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
-                <div class="photo-name">{{ item.user_name }}</div>
-                <div class="right-item photo-name">{{ item.likes_count }}赞</div>
-              </div>
-            </div>
-          </div>
-        </RecycleScroller>
-        <!-- <div 
+      <p class="my-photo-desc">打榜活动截止至10月3日23:59:59结束，中奖信息将于10月4日早10点推送至获奖会员。</p>
+      <div v-if="!disableInviteHelp" class="image-gallery scroller" @scroll="handleScroll">
+        <div 
           v-for="(item, index) in images" 
-          :key="index" 
+          :key="item.id || index" 
           class="image-wrapper"
         >
-          <div class="image-container mask-background">
+          <div class="image-container mask-background" 
+            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
           </div>          
           <img 
             src="../assets/images/zpgc-border.webp" 
             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 class="list-item">
+            <div class="flex-container-detail">
+              <div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
+              <div class="photo-name">{{ item.user_name }}</div>
+              <div class="right-item photo-name">{{ item.likes_count }}赞</div>
             </div>
-            <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
           </div>
-        </div> -->
+        </div>
+        <div v-if="loading" style="text-align:center;padding:10px;color:#999;">加载中...</div>
+        <div v-if="finished && images.length === 0" style="text-align:center;padding:10px;color:#999;">暂无数据</div>
       </div>
       <div v-if="!disableInviteHelp && displayMyPublishPhoto" 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>
+            <p class="photo-name-square bold">{{ username }}</p>
           </div>
           <p class="right-item photo-name bold" style="padding-left: 3vw;">{{ likesCount }}赞</p>
         </div>
@@ -248,13 +288,14 @@ const getBackgroundImage = (item) => {
       <div v-if="disableInviteHelp" class="share-main">
         <div class="image-gallery-share">
           <div class="image-wrapper-share">
-            <div class="image-container-share mask-background">
+            <div class="image-container-share mask-background"
+            :style="{ backgroundImage: `url(${backgroundImageForInvite})` }">
             </div>          
             <img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
             <div class="flex-container-detail-invite">
               <div class="photo-number">{{ rankingInvite }}</div>
-              <div class="photo-name">{{ nameInvite }}</div>
-              <div class="right-item photo-name">{{ linkCountInvite }}赞</div>
+              <div class="photo-name-invite">{{ nameInvite }}</div>
+              <div class="link-count-invite">{{ linkCountInvite }}赞</div>
             </div>
           </div>
         </div>
@@ -302,8 +343,30 @@ const getBackgroundImage = (item) => {
   width: 100%;
   padding: 0px 13vw;
 }
-.flex-container-detail-invite .photo-name {
-  max-width: 24vw;
+.photo-name-square {
+  min-width: 14vw;
+  max-width: 40vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #93551f;
+}
+.photo-name-invite {
+  min-width: 14vw;
+  max-width: 30vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #93551f;
+}
+.link-count-invite {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #93551f;
+  padding-left: 2vw;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 .left-group-left {
   display: flex;
@@ -336,9 +399,9 @@ const getBackgroundImage = (item) => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: -webkit-fill-available;
   position: relative;
   cursor: pointer;
+  background-position: center;
 }
 .border-image-share {
   position: absolute;
@@ -371,6 +434,7 @@ const getBackgroundImage = (item) => {
   font-size: 3vw;
   width: 100%;
   padding: 0 4vw;
+  left: 2vw;
 }
 .flex-container {
   display: flex;
@@ -392,7 +456,7 @@ const getBackgroundImage = (item) => {
 }
 
 .left-group p, .right-item {
-  padding-left: 2vw;
+  padding-left: 0.3vw;
   margin-left: auto;
   flex-shrink: 0;
 }

src/components/Popup.vue

@@ -52,12 +52,12 @@ const confirmBtn = () => {
     <div class="home-bg">
       <div class="popup-bg">
         <div class="scene-item item-1">
-          <img src="../assets/images/confirm.webp" @click="confirmBtn" alt="确认">
+          <img src="../assets/images/confirm.webp" @click="cancelBtn" alt="确认">
         </div>
-        <p class="message">温馨提示：每位用户只能选择一张合影参与打榜，一经确认，在打榜期间将无法更换。</p>
-        <div class="scene-item item-2">
+        <p class="message">活动已结束</p>
+        <!-- <div class="scene-item item-2">
           <img src="../assets/images/cancel.webp" @click="cancelBtn" alt="取消">
-        </div>
+        </div> -->
       </div>
     </div>
   </ModalTransition>
@@ -74,6 +74,7 @@ const confirmBtn = () => {
   position: absolute;
   top: 42%;
   color: #774107;
+  text-align: center;
 }
 .popup-bg {
   width: 77vw;
@@ -112,7 +113,6 @@ const confirmBtn = () => {
 .item-1 {
   top: 50vw;
   width: 40vw;
-  right: 0;
 }
 .item-2 {
   top: 50vw;

src/components/PrizeList.vue

@@ -111,7 +111,7 @@ const handleItemBtn = (id, event) => {
   flex: 1;
   display: flex;
   font-weight: 700;
-  color: #09431d;
+  color: #48260a;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
@@ -157,24 +157,36 @@ wx-open-launch-weapp,
   background-image: url("../assets/images/btn-address.webp");
 }
 
-.prizelist-cover.USER_TJGJ {
-  background-image: url("../assets/images/USER_TJGJ.webp");
+.prizelist-cover.USER_LZ_ZQ_DZJ {
+  background-image: url("../assets/images/generate/USER_LZ_ZQ_DZJ.webp");
 }
 
-.prizelist-cover.USER_XINCHUN_WEIZUN {
-  background-image: url("../assets/images/USER_XINCHUN_WEIZUN.webp");
+.prizelist-cover.USER_HG_42_GPJ_500ML {
+  background-image: url("../assets/images/USER_HG_42_GPJ_500ML.webp");
 }
 
-.prizelist-cover.USER_TEQU_JL_52_60Y_100ML_2 {
-  background-image: url("../assets/images/USER_TEQU_JL_52_60Y_100ML_2.webp");
+.prizelist-cover.USER_QLL_MH {
+  background-image: url("../assets/images/USER_QLL_MH.webp");
 }
 
-.prizelist-cover.USER_LZLJ_TEQU_LZH_52_100ML_2 {
-  background-image: url("../assets/images/USER_LZLJ_TEQU_LZH_52_100ML_2.webp");
+.prizelist-cover.USER_DZSKSJ {
+  background-image: url("../assets/images/generate/USER_DZSKSJ.webp");
 }
 
-.prizelist-cover.USER_HEIGAI_42_GPJ_500ML {
-  background-image: url("../assets/images/USER_HEIGAI_42_GPJ_500ML.webp");
+.prizelist-cover.USER_LZ_ZQ_DZJ_LJW {
+  background-image: url("../assets/images/USER_LZ_ZQ_DZJ_LJW.webp");
+}
+
+.prizelist-cover.USER_LZ_XS_SPZ_30ML {
+  background-image: url("../assets/images/generate/USER_LZ_XS_SPZ_30ML.webp");
+}
+
+.prizelist-cover.USER_LZ_DZ_JBGJ {
+  background-image: url("../assets/images/USER_LZ_DZ_JBGJ.webp");
+}
+
+.prizelist-cover.USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ {
+  background-image: url("../assets/images/generate/USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ.webp");
 }
 
 .prizelist-cover.USER_DZCZ {

src/components/Rule.vue

@@ -2,11 +2,11 @@
   <ModalTransition class="rule" :show="show">
     <div class="rule-wrapper">
       <div class="rule-content">
-        <!-- <img src="../assets/images/rule-1.webp" alt="">
+        <img src="../assets/images/rule-1.webp" alt="">
         <img src="../assets/images/rule-2.webp" alt="">
         <img src="../assets/images/rule-3.webp" alt="">
         <img src="../assets/images/rule-4.webp" alt="">
-        <img src="../assets/images/rule-5.webp" alt=""> -->
+        <img src="../assets/images/rule-5.webp" alt="">
       </div>
       <div class="close" @click="emit('close')"></div>
     </div>
@@ -26,7 +26,7 @@ const emit = defineEmits(['close'])
 .rule-wrapper {
   position: relative;
   width: 100%;
-  height: 175.740741vw;
+  height: 182vw;
   background-image: url("../assets/images/rule-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;

src/components/SelectTemplateV2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, watch } from "vue"
 import { useRouter } from 'vue-router'
 import imageBackground from '../static/imageBackground.js';
 import { globalStore } from "../globalstore.js";
@@ -19,6 +19,19 @@ const navigateBack = () => {
   })
 }
 
+const imageUrl = ref(globalStore.select_template);
+const goToHomePage = (item) => {
+  if (!item) {
+    router.push({
+      name: 'home'
+    });
+  }
+}
+
+watch(imageUrl, (item) => {
+  goToHomePage(item)
+}, { immediate: true })
+
 const displayedImages = ref([]);
 const goToGenerateImgPage = (item) => {
   globalStore.people_count = item.peopleCount;

src/components/SynthesizedResults.vue

@@ -9,13 +9,14 @@ import Haibao from "@/libs/haibao";
 import mask from "../assets/images/haibao-mask.webp";
 import haibaoCoverBorder from "../assets/images/haibao-cover-sucess.webp";
 import bg from "../assets/images/haibao-bg.webp"
+import Lottery from '../components/Lottery.vue';
 
 defineProps({
   show: true
 })
 
 const isPopupVisible = ref(false);
-
+const lotteryShow = ref(false)
 
 const chartsBattle = ()=> {
   globalStore.chartsBattle = true;
@@ -81,7 +82,7 @@ const handleHaibao = async () => {
       const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
       haibaoSave.add(bg, 0, 0)
       haibaoSave.add(url, 64, 250)
-      haibaoSave.add(qrcode, 115, 1875)
+      haibaoSave.add(qrcode, 127, 1860)
       haibaoSave.draw().then(() => {
         haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
         haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
@@ -109,6 +110,15 @@ const handleHaibao = async () => {
 //     return userPictureVal;
 //   }
 // };
+
+globalToastEvent.on(ToastType.SHOW_LOTTERY, () => {
+  lotteryShow.value = true
+})
+
+const handleBtnMore = () => {
+  globalToastEvent.emit(ToastType.SHOW_AD)
+}
+
 </script>
 
 <template>
@@ -128,10 +138,14 @@ const handleHaibao = async () => {
         </div>
       </div>
 
-      <div class="scene-item item-2">
+      <div v-if="!globalStore.chartsBattle" class="scene-item item-2">
         <img src="../assets/images/charts-battle.webp" @click="chartsBattle" alt="参与打榜">
       </div>
 
+      <div v-if="globalStore.chartsBattle" class="scene-item item-2">
+        <img src="../assets/images/btn-more.webp" @click="handleBtnMore" alt="更多金喜">
+      </div>
+
       <div class="scene-item item-3" @click="handleLottery">
         <img src="../assets/images/instant-win.webp" alt="立即抽奖">
       </div>
@@ -139,6 +153,7 @@ const handleHaibao = async () => {
   </div>
 
   <Popup v-model:show="isPopupVisible" />
+  <Lottery :show="lotteryShow" @close="lotteryShow = false" data="null" type="draw"></Lottery>
 </template>
 
 <style scoped>
@@ -172,20 +187,16 @@ const handleHaibao = async () => {
 }
 
 .fullsection {
-  position: fixed;
-  top: 25vw;
+  position: absolute;
+  top: 40vw;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
-  /* background-color: rgba(0, 0, 0, .7); */
 }
 
 .haibao {
-  position: relative;
-  top: -25vw;
   width: 70vw;
   height: 119.444444vw;
   background-image: url("../assets/images/haibao-cover.webp");

src/components/TodoList.vue

@@ -28,8 +28,9 @@
 <script setup>
 import { ref, computed } from "vue"
 import { globalStore } from "@/globalstore";
+import globalToastEvent, { ToastType } from "../globalToastEvent"
 import ModalTransition from "./ModalTransition.vue"
-import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
+import { Storage, generateQR, isWeixin, isMiniPage, Request } from "../libs/utils"
 import Haibao from "@/libs/haibao"
 import bg from "../assets/images/haibao-bg.webp"
 import mask from "../assets/images/haibao-mask.webp"
@@ -75,10 +76,10 @@ const handleHaibao = async () => {
   haibaoCoverNoTitle.draw('destination-in').then(() => {
     haibaoCoverNoTitle.generate({ mimeType: 'image/png' }).then(async (url) => {
       const haibaoSaveNoTitle = new Haibao(1080, 2160)
-      const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${mergeId}`, 200, 200)
+      const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${mergeId}`, 220, 220)
       haibaoSaveNoTitle.add(bg, 0, 0)
       haibaoSaveNoTitle.add(url, 64, 250)
-      haibaoSaveNoTitle.add(qrcode, 115, 1875)
+      haibaoSaveNoTitle.add(qrcode, 118, 1849)
       haibaoSaveNoTitle.draw().then(() => {
         haibaoSaveNoTitle.text(infos.nickname + '的全家福', haibaoSaveNoTitle.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
         haibaoSaveNoTitle.generate({ mimeType: 'image/png' }).then(url => {
@@ -120,12 +121,8 @@ const openQiwei = (e) => {
   qiweiShow.value = true
 }
 
-const openHaibao = async(e) => {
+const openHaibao = async (e) => {
   const target = e.currentTarget
-  // TODO 首页分享增加一次合成次数
-  // if(!globalStore.first_share_today){
-    // const result = await Request('face/share',{mergeId:xxx})
-  // }
   if (target.classList.contains("has")) {
     return
   }
@@ -133,34 +130,44 @@ const openHaibao = async(e) => {
   url.searchParams.append('my_only', '1');
   url.searchParams.append('page', '1');
   url.searchParams.append('per_page', '100');
-  if (!globalStore.result_url) {
-    fetch(url.toString(), {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
-      }
-    })
-    .then(response => response.json())
-    .then(data => {
-      const foundItem = data.data.find(item => item.is_public === true);
-      if (foundItem) {
-        globalStore.result_url = foundItem.result_url;
-        mergeId = foundItem.id;
-        haibaoShow.value = true
-        handleHaibao()
+  const loading = weui.loading()
+  fetch(url.toString(), {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+    }
+  })
+    .then(async response => {
+      const data = await response.json()
+      if (response.status == 200 || response.status == 201) {
+        loading.hide()
+        const foundItem = data.data.find(item => item.is_public === true);
+        if (foundItem) {
+          globalStore.result_url = foundItem.result_url;
+          mergeId = foundItem.id;
+          haibaoShow.value = true
+
+          if (!globalStore.first_share_today) {
+            const shareOk = await Request(`face/share/${mergeId}`)
+            if (shareOk.res.status === 200) {
+              globalStore.first_share_today = true
+              globalToastEvent.emit(ToastType.INFO_UPDATE)
+            }
+          }
+          handleHaibao()
+        } else {
+          return weui.alert("请先参与活动合成图片并打榜！")
+        }
+        return { success: true, data };
       } else {
-        return weui.alert("请先参与活动合成图片并打榜！")
+        loading.hide()
+        ElMessage.error(data.message);
       }
-      return { success: true, data };
     })
     .catch((error) => {
-      console.error('Error:', error);
+      loading.hide()
       return { success: false, error };
     });
-  } else {
-    haibaoShow.value = true
-    handleHaibao()
-  }
 }
 const openPeifang = (e) => {
   const target = e.currentTarget

src/globalToastEvent.js

@@ -6,9 +6,10 @@ export const ToastType = {
   SHOW_RULE: "show_rule",
   SHOW_PRIZELIST: "show_prizelist",
   SHOW_LOTTERY: "show_lottery",
-  SHOW_AD:"show_ad",
-  SHOW_ADDRESS:"show_address",
-  MOUNTED: "mounted"
+  SHOW_AD: "show_ad",
+  SHOW_ADDRESS: "show_address",
+  MOUNTED: "mounted",
+  INFO_UPDATE: "info_update"
 };
 
 export default globalToastEvent;

src/libs/faceValidator.js

@@ -71,7 +71,7 @@ export async function validateFaceInImage(file) {
         const detections = await faceapi
           .detectAllFaces(img, new faceapi.TinyFaceDetectorOptions({
             inputSize: 416,
-            scoreThreshold: 0.5
+            scoreThreshold: 0.3
           }))
           .withFaceLandmarks()
         
@@ -101,7 +101,7 @@ export async function validateFaceInImage(file) {
         console.log('人脸检测置信度:', confidence)
         
         // 检查置信度是否足够高
-        const minConfidence = 0.6 // 降低到 0.6 以提高通过率
+        const minConfidence = 0.3 // 降低到 0.6 以提高通过率
         if (confidence < minConfidence) {
           resolve({
             success: false,
@@ -118,7 +118,7 @@ export async function validateFaceInImage(file) {
         
         console.log('人脸占图片比例:', (faceRatio * 100).toFixed(2) + '%')
         
-        const minFaceRatio = 0.015 // 降低到 1.5% 以提高通过率
+        const minFaceRatio = 0.01 // 降低到 1.5% 以提高通过率
         if (faceRatio < minFaceRatio) {
           resolve({
             success: false,
@@ -147,7 +147,7 @@ export async function validateFaceInImage(file) {
             
             console.log('人脸角度:', eyeAngle.toFixed(1) + '度')
             
-            const maxAngle = 20 // 放宽到 20 度
+            const maxAngle = 30 // 放宽到 20 度
             if (eyeAngle > maxAngle) {
               resolve({
                 success: false,

src/libs/utils.js

@@ -99,6 +99,9 @@ export const getMiniPageBtnHack = (url) => {
 export const miniJumpToScene = () => {
   wx.miniProgram.navigateTo({ url: '/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fretail%2Forder%2Forder-list%3Ftab%3DAll%26topTab%3D1' })
 }
+export const miniJumpToActive = () => {
+  wx.miniProgram.navigateTo({ url: '/pages/retail-act/landing-page/ordinary?id=897432916524553363&orgId=200282401019674482&programId=84796583983972352' })
+}
 export const miniJumpToCouopon = () => {
   wx.miniProgram.navigateTo({
     url: '/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fcoupon%2Fcoupons-list'
@@ -139,9 +142,8 @@ export const Request = async (url, data, type, noloading, noerror) => {
       headers.Authorization = `Bearer ${Storage.get("userinfos").api_token}`
     } else {
       Storage.clear()
-      weui.alert("错误的请求")
-      window.location.reload()
-      return
+      weui.alert("登录失效，请重新登录")
+      // window.location.reload()
     }
   }
 
@@ -192,94 +194,8 @@ export const Request = async (url, data, type, noloading, noerror) => {
       return { res: response, json: result }
     } else if (response.status == 401) {
       Storage.clear()
-      weui.alert("错误的请求")
-      window.location.reload()
-      return
-    } else {
-      if (!noerror) {
-        weui.alert(message)
-      }
-      return { res: response, json: result }
-    }
-
-  } catch (error) {
-    if (!noerror) {
-      weui.alert(message)
-    }
-    loading && loading.hide()
-  }
-}
-
-export const RequestImg = async (url, data, type, noloading, noerror) => {
-  let headers = {
-    'Content-Type': 'multipart/form-data',
-    Accept: "application/json",
-    "Source": "faceFamily",
-    'App-Channel': getUserBrowersName(),
-    refer: document.referrer,
-    blackbox: Storage.get("blackbox") ? Storage.get("blackbox") : false
-  }
-
-  if (url != "sms/sendCode" && url != "sms/authPhone" && url != "wechat/login" && url != "wechat/jssdk") {
-    if (isLogin()) {
-      headers.Authorization = `Bearer ${Storage.get("userinfos").api_token}`
-    } else {
-      Storage.clear()
-      weui.alert("错误的请求")
-      window.location.reload()
-      return
-    }
-  }
-
-  if (isBaseLogin() && url == "sms/authPhone") {
-    headers.Authorization = `Bearer ${Storage.get("userinfos").api_token}`
-  }
-
-  let loading = false
-  if (!noloading) {
-    loading = weui.loading()
-  }
-
-  let message = "请求失败，请重试"
-
-  let fetchData = {
-    method: type || 'POST',
-    headers: new Headers(headers),
-  }
-
-  if (fetchData.method == "POST") {
-    fetchData.body = JSON.stringify(data)
-  }
-
-  let requrl = 'https://huodong2.lzlj.com/api/faceFamily/upload/image'
-
-  if (type === "GET") {
-    let paramArr = []
-    Object.keys(data).forEach(v => {
-      paramArr.push(`${v}=${data[v]}`)
-    })
-    requrl = paramArr.length === 0 ? `${requrl}` : `${requrl}?${paramArr.join("&")}`
-  }
-
-  try {
-    const response = await fetch(`${requrl}`, fetchData)
-    const result = await response.json()
-    message = result.message || message
-    if (getParam("debug")) {
-      console.log("url:", url)
-      console.log("data:", data)
-      console.log(response)
-      console.log(result)
-    }
-
-    loading && loading.hide()
-
-    if (response.status == 200 || response.status == 201) {
-      return { res: response, json: result }
-    } else if (response.status == 401) {
-      Storage.clear()
-      weui.alert("错误的请求")
-      window.location.reload()
+      weui.alert("登录失效，请重新登录")
+      // window.location.reload()
       return
     } else {
       if (!noerror) {

src/static/ali_face_template.js

@@ -72,14 +72,6 @@ const faceTemplate = [{
         "height": "165.42834"
       },
       "templateFaceID": "e37a5b01-1a51-492e-98d2-e4d4176d38fc_0"
-    }, {
-      "faceRect": {
-        "x": "869.3138",
-        "y": "712.64496",
-        "width": "141.51538",
-        "height": "133.10846"
-      },
-      "templateFaceID": "e37a5b01-1a51-492e-98d2-e4d4176d38fc_1"
     }, {
       "faceRect": {
         "x": "659.57935",
@@ -88,12 +80,36 @@ const faceTemplate = [{
         "height": "127.56082"
       },
       "templateFaceID": "e37a5b01-1a51-492e-98d2-e4d4176d38fc_2"
+    }, {
+      "faceRect": {
+        "x": "869.3138",
+        "y": "712.64496",
+        "width": "141.51538",
+        "height": "133.10846"
+      },
+      "templateFaceID": "e37a5b01-1a51-492e-98d2-e4d4176d38fc_1"
     }]
   },
   {
     "name": "fugu_5",
     "template_id": "0124c008-3c41-468a-8ba5-f4d94ff7d805",
     "data": [{
+      "faceRect": {
+        "x": "340.4411",
+        "y": "388.40677",
+        "width": "134.0249",
+        "height": "130.33328"
+      },
+      "templateFaceID": "0124c008-3c41-468a-8ba5-f4d94ff7d805_3"
+    }, {
+      "faceRect": {
+        "x": "631.6107",
+        "y": "515.6829",
+        "width": "132.55609",
+        "height": "123.88721"
+      },
+      "templateFaceID": "0124c008-3c41-468a-8ba5-f4d94ff7d805_2"
+    }, {
       "faceRect": {
         "x": "281.13434",
         "y": "832.369",
@@ -109,44 +125,12 @@ const faceTemplate = [{
         "height": "151.90112"
       },
       "templateFaceID": "0124c008-3c41-468a-8ba5-f4d94ff7d805_1"
-    }, {
-      "faceRect": {
-        "x": "631.6107",
-        "y": "515.6829",
-        "width": "132.55609",
-        "height": "123.88721"
-      },
-      "templateFaceID": "0124c008-3c41-468a-8ba5-f4d94ff7d805_2"
-    }, {
-      "faceRect": {
-        "x": "340.4411",
-        "y": "388.40677",
-        "width": "134.0249",
-        "height": "130.33328"
-      },
-      "templateFaceID": "0124c008-3c41-468a-8ba5-f4d94ff7d805_3"
     }]
   },
   {
     "name": "fugu_6",
     "template_id": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2",
     "data": [{
-      "faceRect": {
-        "x": "324.6182",
-        "y": "837.68866",
-        "width": "128.61774",
-        "height": "126.82361"
-      },
-      "templateFaceID": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2_0"
-    }, {
-      "faceRect": {
-        "x": "547.957",
-        "y": "888.6291",
-        "width": "122.50079",
-        "height": "122.34247"
-      },
-      "templateFaceID": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2_1"
-    }, {
       "faceRect": {
         "x": "559.21124",
         "y": "382.43546",
@@ -162,6 +146,22 @@ const faceTemplate = [{
         "height": "110.564606"
       },
       "templateFaceID": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2_3"
+    }, {
+      "faceRect": {
+        "x": "324.6182",
+        "y": "837.68866",
+        "width": "128.61774",
+        "height": "126.82361"
+      },
+      "templateFaceID": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2_0"
+    }, {
+      "faceRect": {
+        "x": "547.957",
+        "y": "888.6291",
+        "width": "122.50079",
+        "height": "122.34247"
+      },
+      "templateFaceID": "13d0b87e-d882-46e3-94b2-c9a3adc5d6d2_1"
     }, {
       "faceRect": {
         "x": "755.9497",
@@ -218,14 +218,6 @@ const faceTemplate = [{
     "name": "luying_3",
     "template_id": "c34a3028-ed0a-48ab-b5ee-f351420927bf",
     "data": [{
-      "faceRect": {
-        "x": "651.1904",
-        "y": "762.8811",
-        "width": "250.94489",
-        "height": "244.26929"
-      },
-      "templateFaceID": "c34a3028-ed0a-48ab-b5ee-f351420927bf_0"
-    }, {
       "faceRect": {
         "x": "382.6176",
         "y": "741.4986",
@@ -233,6 +225,14 @@ const faceTemplate = [{
         "height": "245.41254"
       },
       "templateFaceID": "c34a3028-ed0a-48ab-b5ee-f351420927bf_1"
+    }, {
+      "faceRect": {
+        "x": "651.1904",
+        "y": "762.8811",
+        "width": "250.94489",
+        "height": "244.26929"
+      },
+      "templateFaceID": "c34a3028-ed0a-48ab-b5ee-f351420927bf_0"
     }]
   },
   {
@@ -268,22 +268,6 @@ const faceTemplate = [{
     "name": "luying_5",
     "template_id": "f08aee62-b6e1-425b-9e1b-a5ef26350738",
     "data": [{
-      "faceRect": {
-        "x": "727.63226",
-        "y": "781.1076",
-        "width": "149.60413",
-        "height": "149.24756"
-      },
-      "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_0"
-    }, {
-      "faceRect": {
-        "x": "562.4421",
-        "y": "1032.4913",
-        "width": "122.8125",
-        "height": "118.92334"
-      },
-      "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_1"
-    }, {
       "faceRect": {
         "x": "173.56165",
         "y": "862.7623",
@@ -291,6 +275,14 @@ const faceTemplate = [{
         "height": "133.2331"
       },
       "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_2"
+    }, {
+      "faceRect": {
+        "x": "727.63226",
+        "y": "781.1076",
+        "width": "149.60413",
+        "height": "149.24756"
+      },
+      "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_0"
     }, {
       "faceRect": {
         "x": "340.1516",
@@ -299,12 +291,36 @@ const faceTemplate = [{
         "height": "109.9834"
       },
       "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_3"
+    }, {
+      "faceRect": {
+        "x": "562.4421",
+        "y": "1032.4913",
+        "width": "122.8125",
+        "height": "118.92334"
+      },
+      "templateFaceID": "f08aee62-b6e1-425b-9e1b-a5ef26350738_1"
     }]
   },
   {
     "name": "luying_6",
     "template_id": "06474d41-24c7-4c11-8502-1016218d44d1",
     "data": [{
+      "faceRect": {
+        "x": "463.52216",
+        "y": "624.5314",
+        "width": "125.16113",
+        "height": "128.75842"
+      },
+      "templateFaceID": "06474d41-24c7-4c11-8502-1016218d44d1_4"
+    }, {
+      "faceRect": {
+        "x": "775.40137",
+        "y": "658.2114",
+        "width": "118.90802",
+        "height": "117.8938"
+      },
+      "templateFaceID": "06474d41-24c7-4c11-8502-1016218d44d1_3"
+    }, {
       "faceRect": {
         "x": "220.6589",
         "y": "870.1133",
@@ -328,36 +344,12 @@ const faceTemplate = [{
         "height": "116.60791"
       },
       "templateFaceID": "06474d41-24c7-4c11-8502-1016218d44d1_2"
-    }, {
-      "faceRect": {
-        "x": "775.40137",
-        "y": "658.2114",
-        "width": "118.90802",
-        "height": "117.8938"
-      },
-      "templateFaceID": "06474d41-24c7-4c11-8502-1016218d44d1_3"
-    }, {
-      "faceRect": {
-        "x": "463.52216",
-        "y": "624.5314",
-        "width": "125.16113",
-        "height": "128.75842"
-      },
-      "templateFaceID": "06474d41-24c7-4c11-8502-1016218d44d1_4"
     }]
   },
   {
     "name": "paidui_1",
     "template_id": "e5114c2b-6b01-4f2b-aef3-a540ffd94581",
     "data": [{
-      "faceRect": {
-        "x": "545.92065",
-        "y": "525.2178",
-        "width": "216.98535",
-        "height": "219.612"
-      },
-      "templateFaceID": "e5114c2b-6b01-4f2b-aef3-a540ffd94581_0"
-    }, {
       "faceRect": {
         "x": "283.67102",
         "y": "667.279",
@@ -365,6 +357,14 @@ const faceTemplate = [{
         "height": "198.78534"
       },
       "templateFaceID": "e5114c2b-6b01-4f2b-aef3-a540ffd94581_1"
+    }, {
+      "faceRect": {
+        "x": "545.92065",
+        "y": "525.2178",
+        "width": "216.98535",
+        "height": "219.612"
+      },
+      "templateFaceID": "e5114c2b-6b01-4f2b-aef3-a540ffd94581_0"
     }]
   },
   {
@@ -420,14 +420,6 @@ const faceTemplate = [{
         "height": "170.263"
       },
       "templateFaceID": "f00cabda-4503-4c65-a918-3d002ca24a65_0"
-    }, {
-      "faceRect": {
-        "x": "544.5628",
-        "y": "1040.0225",
-        "width": "153.2685",
-        "height": "145.09436"
-      },
-      "templateFaceID": "f00cabda-4503-4c65-a918-3d002ca24a65_1"
     }, {
       "faceRect": {
         "x": "646.32794",
@@ -436,20 +428,20 @@ const faceTemplate = [{
         "height": "161.0954"
       },
       "templateFaceID": "f00cabda-4503-4c65-a918-3d002ca24a65_2"
+    }, {
+      "faceRect": {
+        "x": "544.5628",
+        "y": "1040.0225",
+        "width": "153.2685",
+        "height": "145.09436"
+      },
+      "templateFaceID": "f00cabda-4503-4c65-a918-3d002ca24a65_1"
     }]
   },
   {
     "name": "paidui_5",
     "template_id": "bc596af5-0eb1-4116-9e74-6cff26d44c5e",
     "data": [{
-      "faceRect": {
-        "x": "455.95352",
-        "y": "537.10974",
-        "width": "182.75735",
-        "height": "190.56311"
-      },
-      "templateFaceID": "bc596af5-0eb1-4116-9e74-6cff26d44c5e_0"
-    }, {
       "faceRect": {
         "x": "242.2742",
         "y": "675.97363",
@@ -457,6 +449,14 @@ const faceTemplate = [{
         "height": "138.24756"
       },
       "templateFaceID": "bc596af5-0eb1-4116-9e74-6cff26d44c5e_1"
+    }, {
+      "faceRect": {
+        "x": "455.95352",
+        "y": "537.10974",
+        "width": "182.75735",
+        "height": "190.56311"
+      },
+      "templateFaceID": "bc596af5-0eb1-4116-9e74-6cff26d44c5e_0"
     }, {
       "faceRect": {
         "x": "762.13385",
@@ -472,12 +472,12 @@ const faceTemplate = [{
     "template_id": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0",
     "data": [{
       "faceRect": {
-        "x": "367.78024",
-        "y": "894.73334",
-        "width": "125.83658",
-        "height": "129.90765"
+        "x": "243.39069",
+        "y": "557.1",
+        "width": "114.58734",
+        "height": "113.43402"
       },
-      "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_0"
+      "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_3"
     }, {
       "faceRect": {
         "x": "673.29596",
@@ -486,6 +486,14 @@ const faceTemplate = [{
         "height": "98.29059"
       },
       "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_1"
+    }, {
+      "faceRect": {
+        "x": "367.78024",
+        "y": "894.73334",
+        "width": "125.83658",
+        "height": "129.90765"
+      },
+      "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_0"
     }, {
       "faceRect": {
         "x": "612.43396",
@@ -494,14 +502,6 @@ const faceTemplate = [{
         "height": "120.975464"
       },
       "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_2"
-    }, {
-      "faceRect": {
-        "x": "243.39069",
-        "y": "557.1",
-        "width": "114.58734",
-        "height": "113.43402"
-      },
-      "templateFaceID": "0a19faef-79b2-4757-ac48-4ec6f9c8b3d0_3"
     }, {
       "faceRect": {
         "x": "905.2716",
@@ -558,14 +558,6 @@ const faceTemplate = [{
     "name": "shenxian_3",
     "template_id": "bbc049e1-c8c8-4b19-9ee9-57070e5d4d1e",
     "data": [{
-      "faceRect": {
-        "x": "598.85175",
-        "y": "656.3943",
-        "width": "212.99261",
-        "height": "226.854"
-      },
-      "templateFaceID": "bbc049e1-c8c8-4b19-9ee9-57070e5d4d1e_0"
-    }, {
       "faceRect": {
         "x": "246.53607",
         "y": "723.4778",
@@ -573,20 +565,20 @@ const faceTemplate = [{
         "height": "187.8725"
       },
       "templateFaceID": "bbc049e1-c8c8-4b19-9ee9-57070e5d4d1e_1"
+    }, {
+      "faceRect": {
+        "x": "598.85175",
+        "y": "656.3943",
+        "width": "212.99261",
+        "height": "226.854"
+      },
+      "templateFaceID": "bbc049e1-c8c8-4b19-9ee9-57070e5d4d1e_0"
     }]
   },
   {
     "name": "shenxian_4",
     "template_id": "3ef23613-c516-4718-b311-0170fa0e2459",
     "data": [{
-      "faceRect": {
-        "x": "716.3845",
-        "y": "386.3517",
-        "width": "163.11066",
-        "height": "168.75839"
-      },
-      "templateFaceID": "3ef23613-c516-4718-b311-0170fa0e2459_0"
-    }, {
       "faceRect": {
         "x": "276.3566",
         "y": "526.81744",
@@ -594,6 +586,14 @@ const faceTemplate = [{
         "height": "144.05322"
       },
       "templateFaceID": "3ef23613-c516-4718-b311-0170fa0e2459_1"
+    }, {
+      "faceRect": {
+        "x": "716.3845",
+        "y": "386.3517",
+        "width": "163.11066",
+        "height": "168.75839"
+      },
+      "templateFaceID": "3ef23613-c516-4718-b311-0170fa0e2459_0"
     }, {
       "faceRect": {
         "x": "407.18033",
@@ -608,104 +608,112 @@ const faceTemplate = [{
     "name": "shenxian_5",
     "template_id": "a141dc1a-89ef-4184-a198-ccad453972f1",
     "data": [{
-      "faceRect": {
-        "x": "832.45447",
-        "y": "969.0477",
-        "width": "149.1336",
-        "height": "144.78638"
+        "faceRect": {
+          "x": "286.25214",
+          "y": "500.22693",
+          "width": "138.50217",
+          "height": "134.25494"
+        },
+        "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_3"
       },
-      "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_0"
-    }, {
-      "faceRect": {
-        "x": "441.59525",
-        "y": "1132.0176",
-        "width": "141.4418",
-        "height": "134.63538"
+      {
+        "faceRect": {
+          "x": "619.8123",
+          "y": "392.7178",
+          "width": "140.51984",
+          "height": "148.40805"
+        },
+        "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_2"
       },
-      "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_1"
-    }, {
-      "faceRect": {
-        "x": "619.8123",
-        "y": "392.7178",
-        "width": "140.51984",
-        "height": "148.40805"
+      {
+        "faceRect": {
+          "x": "441.59525",
+          "y": "1132.0176",
+          "width": "141.4418",
+          "height": "134.63538"
+        },
+        "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_1"
       },
-      "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_2"
-    }, {
-      "faceRect": {
-        "x": "286.25214",
-        "y": "500.22693",
-        "width": "138.50217",
-        "height": "134.25494"
-      },
-      "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_3"
-    }]
+      {
+        "faceRect": {
+          "x": "832.45447",
+          "y": "969.0477",
+          "width": "149.1336",
+          "height": "144.78638"
+        },
+        "templateFaceID": "a141dc1a-89ef-4184-a198-ccad453972f1_0"
+      }
+    ]
   },
   {
     "name": "shenxian_6",
     "template_id": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9",
     "data": [{
-      "faceRect": {
-        "x": "693.45215",
-        "y": "547.72656",
-        "width": "128.75525",
-        "height": "126.3869"
+        "faceRect": {
+          "x": "200.82698",
+          "y": "636.45197",
+          "width": "123.02049",
+          "height": "114.42865"
+        },
+        "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_2"
+      }, {
+        "faceRect": {
+          "x": "460.59973",
+          "y": "532.94965",
+          "width": "119.369446",
+          "height": "117.68744"
+        },
+        "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_4"
       },
-      "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_0"
-    }, {
-      "faceRect": {
-        "x": "823.3627",
-        "y": "695.88367",
-        "width": "126.110535",
-        "height": "121.50647"
-      },
-      "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_1"
-    }, {
-      "faceRect": {
-        "x": "200.82698",
-        "y": "636.45197",
-        "width": "123.02049",
-        "height": "114.42865"
-      },
-      "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_2"
-    }, {
-      "faceRect": {
-        "x": "439.2485",
-        "y": "980.1044",
-        "width": "115.000946",
-        "height": "108.33765"
-      },
-      "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_3"
-    }, {
-      "faceRect": {
-        "x": "460.59973",
-        "y": "532.94965",
-        "width": "119.369446",
-        "height": "117.68744"
-      },
-      "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_4"
-    }]
+      {
+        "faceRect": {
+          "x": "693.45215",
+          "y": "547.72656",
+          "width": "128.75525",
+          "height": "126.3869"
+        },
+        "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_0"
+      }, {
+        "faceRect": {
+          "x": "823.3627",
+          "y": "695.88367",
+          "width": "126.110535",
+          "height": "121.50647"
+        },
+        "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_1"
+      }, {
+        "faceRect": {
+          "x": "439.2485",
+          "y": "980.1044",
+          "width": "115.000946",
+          "height": "108.33765"
+        },
+        "templateFaceID": "3d1b6763-0d27-4f80-a7c9-0abaa1d9fee9_3"
+      }
+    ]
   },
   {
     "name": "xianxia_1",
     "template_id": "22dbf129-fd31-401d-b976-9d4750cf2863",
     "data": [{
-      "faceRect": {
-        "x": "734.3661",
-        "y": "688.8144",
-        "width": "147.67535",
-        "height": "146.80011"
+        "faceRect": {
+          "x": "336.3919",
+          "y": "721.8339",
+          "width": "144.99411",
+          "height": "145.81818"
+        },
+        "templateFaceID": "22dbf129-fd31-401d-b976-9d4750cf2863_1"
       },
-      "templateFaceID": "22dbf129-fd31-401d-b976-9d4750cf2863_0"
-    }, {
-      "faceRect": {
-        "x": "336.3919",
-        "y": "721.8339",
-        "width": "144.99411",
-        "height": "145.81818"
-      },
-      "templateFaceID": "22dbf129-fd31-401d-b976-9d4750cf2863_1"
-    }]
+      {
+        "faceRect": {
+          "x": "734.3661",
+          "y": "688.8144",
+          "width": "147.67535",
+          "height": "146.80011"
+        },
+        "templateFaceID": "22dbf129-fd31-401d-b976-9d4750cf2863_0"
+      }
+    ]
   },
   {
     "name": "xianxia_2",
@@ -732,6 +740,14 @@ const faceTemplate = [{
     "name": "xianxia_3",
     "template_id": "3c26bf09-bc38-4d3f-8e2c-33767cd7866a",
     "data": [{
+      "faceRect": {
+        "x": "333.63544",
+        "y": "474.79645",
+        "width": "164.83691",
+        "height": "164.24512"
+      },
+      "templateFaceID": "3c26bf09-bc38-4d3f-8e2c-33767cd7866a_2"
+    }, {
       "faceRect": {
         "x": "679.7418",
         "y": "575.4797",
@@ -747,14 +763,6 @@ const faceTemplate = [{
         "height": "165.37329"
       },
       "templateFaceID": "3c26bf09-bc38-4d3f-8e2c-33767cd7866a_1"
-    }, {
-      "faceRect": {
-        "x": "333.63544",
-        "y": "474.79645",
-        "width": "164.83691",
-        "height": "164.24512"
-      },
-      "templateFaceID": "3c26bf09-bc38-4d3f-8e2c-33767cd7866a_2"
     }]
   },
   {
@@ -790,22 +798,6 @@ const faceTemplate = [{
     "name": "xianxia_5",
     "template_id": "96296bee-19f2-4291-ba7c-0b4e8b48a89c",
     "data": [{
-      "faceRect": {
-        "x": "511.74298",
-        "y": "997.1089",
-        "width": "132.03534",
-        "height": "134.54126"
-      },
-      "templateFaceID": "96296bee-19f2-4291-ba7c-0b4e8b48a89c_0"
-    }, {
-      "faceRect": {
-        "x": "859.47705",
-        "y": "781.06506",
-        "width": "128.64398",
-        "height": "117.43982"
-      },
-      "templateFaceID": "96296bee-19f2-4291-ba7c-0b4e8b48a89c_1"
-    }, {
       "faceRect": {
         "x": "237.34024",
         "y": "649.75806",
@@ -821,6 +813,22 @@ const faceTemplate = [{
         "height": "113.97388"
       },
       "templateFaceID": "96296bee-19f2-4291-ba7c-0b4e8b48a89c_3"
+    }, {
+      "faceRect": {
+        "x": "511.74298",
+        "y": "997.1089",
+        "width": "132.03534",
+        "height": "134.54126"
+      },
+      "templateFaceID": "96296bee-19f2-4291-ba7c-0b4e8b48a89c_0"
+    }, {
+      "faceRect": {
+        "x": "859.47705",
+        "y": "781.06506",
+        "width": "128.64398",
+        "height": "117.43982"
+      },
+      "templateFaceID": "96296bee-19f2-4291-ba7c-0b4e8b48a89c_1"
     }]
   },
   {
@@ -828,28 +836,12 @@ const faceTemplate = [{
     "template_id": "b8853dbf-909a-4e55-9a37-1e95c42eb57d",
     "data": [{
       "faceRect": {
-        "x": "221.61584",
-        "y": "922.2503",
-        "width": "130.44144",
-        "height": "126.22235"
+        "x": "354.42328",
+        "y": "641.2659",
+        "width": "109.9603",
+        "height": "110.460266"
       },
-      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_0"
-    }, {
-      "faceRect": {
-        "x": "889.4197",
-        "y": "594.1777",
-        "width": "103.10693",
-        "height": "102.92218"
-      },
-      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_1"
-    }, {
-      "faceRect": {
-        "x": "634.54126",
-        "y": "1047.7693",
-        "width": "104.02124",
-        "height": "96.509155"
-      },
-      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_2"
+      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_4"
     }, {
       "faceRect": {
         "x": "625.5781",
@@ -860,26 +852,34 @@ const faceTemplate = [{
       "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_3"
     }, {
       "faceRect": {
-        "x": "354.42328",
-        "y": "641.2659",
-        "width": "109.9603",
-        "height": "110.460266"
+        "x": "889.4197",
+        "y": "594.1777",
+        "width": "103.10693",
+        "height": "102.92218"
       },
-      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_4"
+      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_1"
+    }, {
+      "faceRect": {
+        "x": "221.61584",
+        "y": "922.2503",
+        "width": "130.44144",
+        "height": "126.22235"
+      },
+      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_0"
+    }, {
+      "faceRect": {
+        "x": "634.54126",
+        "y": "1047.7693",
+        "width": "104.02124",
+        "height": "96.509155"
+      },
+      "templateFaceID": "b8853dbf-909a-4e55-9a37-1e95c42eb57d_2"
     }]
   },
   {
     "name": "xinzhongshi_1",
     "template_id": "0101b4ca-8acd-4339-b47b-c6d34d85f8ee",
     "data": [{
-      "faceRect": {
-        "x": "513.05585",
-        "y": "646.1665",
-        "width": "269.16125",
-        "height": "277.5739"
-      },
-      "templateFaceID": "0101b4ca-8acd-4339-b47b-c6d34d85f8ee_0"
-    }, {
       "faceRect": {
         "x": "249.37328",
         "y": "769.996",
@@ -887,20 +887,20 @@ const faceTemplate = [{
         "height": "252.65472"
       },
       "templateFaceID": "0101b4ca-8acd-4339-b47b-c6d34d85f8ee_1"
+    }, {
+      "faceRect": {
+        "x": "513.05585",
+        "y": "646.1665",
+        "width": "269.16125",
+        "height": "277.5739"
+      },
+      "templateFaceID": "0101b4ca-8acd-4339-b47b-c6d34d85f8ee_0"
     }]
   },
   {
     "name": "xinzhongshi_2",
     "template_id": "001b6055-2a6c-4314-97e0-6d58e53e760a",
     "data": [{
-      "faceRect": {
-        "x": "496.34836",
-        "y": "435.51663",
-        "width": "246.05423",
-        "height": "244.37967"
-      },
-      "templateFaceID": "001b6055-2a6c-4314-97e0-6d58e53e760a_0"
-    }, {
       "faceRect": {
         "x": "240.79282",
         "y": "1036.7666",
@@ -908,6 +908,14 @@ const faceTemplate = [{
         "height": "198.44751"
       },
       "templateFaceID": "001b6055-2a6c-4314-97e0-6d58e53e760a_1"
+    }, {
+      "faceRect": {
+        "x": "496.34836",
+        "y": "435.51663",
+        "width": "246.05423",
+        "height": "244.37967"
+      },
+      "templateFaceID": "001b6055-2a6c-4314-97e0-6d58e53e760a_0"
     }]
   },
   {
@@ -964,14 +972,6 @@ const faceTemplate = [{
     "name": "xinzhongshi_5",
     "template_id": "f0979be0-01fe-4414-8671-c13303dc6d9e",
     "data": [{
-      "faceRect": {
-        "x": "277.31677",
-        "y": "800.05334",
-        "width": "121.7673",
-        "height": "125.34955"
-      },
-      "templateFaceID": "f0979be0-01fe-4414-8671-c13303dc6d9e_0"
-    }, {
       "faceRect": {
         "x": "531.3289",
         "y": "617.5573",
@@ -987,6 +987,14 @@ const faceTemplate = [{
         "height": "103.44458"
       },
       "templateFaceID": "f0979be0-01fe-4414-8671-c13303dc6d9e_2"
+    }, {
+      "faceRect": {
+        "x": "277.31677",
+        "y": "800.05334",
+        "width": "121.7673",
+        "height": "125.34955"
+      },
+      "templateFaceID": "f0979be0-01fe-4414-8671-c13303dc6d9e_0"
     }, {
       "faceRect": {
         "x": "721.7767",
@@ -1002,20 +1010,12 @@ const faceTemplate = [{
     "template_id": "4c321945-05d6-46a8-8f81-0d52ecd4d83b",
     "data": [{
       "faceRect": {
-        "x": "816.21313",
-        "y": "854.273",
-        "width": "116.28845",
-        "height": "117.198364"
+        "x": "221.77582",
+        "y": "660.4627",
+        "width": "97.802216",
+        "height": "94.63983"
       },
-      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_0"
-    }, {
-      "faceRect": {
-        "x": "215.22023",
-        "y": "947.93756",
-        "width": "106.40898",
-        "height": "105.765686"
-      },
-      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_1"
+      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_3"
     }, {
       "faceRect": {
         "x": "533.99884",
@@ -1026,12 +1026,12 @@ const faceTemplate = [{
       "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_2"
     }, {
       "faceRect": {
-        "x": "221.77582",
-        "y": "660.4627",
-        "width": "97.802216",
-        "height": "94.63983"
+        "x": "215.22023",
+        "y": "947.93756",
+        "width": "106.40898",
+        "height": "105.765686"
       },
-      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_3"
+      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_1"
     }, {
       "faceRect": {
         "x": "492.17523",
@@ -1040,7 +1040,15 @@ const faceTemplate = [{
         "height": "83.737305"
       },
       "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_4"
-    }]
+    }, {
+      "faceRect": {
+        "x": "816.21313",
+        "y": "854.273",
+        "width": "116.28845",
+        "height": "117.198364"
+      },
+      "templateFaceID": "4c321945-05d6-46a8-8f81-0d52ecd4d83b_0"
+    }, ]
   }
 ]