修改抽奖动画

src/components/GenerateImg.vue

@@ -534,6 +534,7 @@ import generateImg from '../assets/images/generate-img-bg.webp'
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  object-fit: cover;
 }
 .main {
   height: 100%;

src/components/HomePage.vue

@@ -221,9 +221,12 @@ const handleRule = () => {
   globalToastEvent.emit(ToastType.SHOW_RULE)
 }
 const handleLottery = () => {
-  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+  if (globalStore.draw_chances <= 0) {
-  if (globalStore.draw_chances <= 0) return;
+    return weui.alert("还没有抽奖机会，快去参加活动吧")
+  };
   globalStore.reducerDrawChances();
+  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+
 }
 
 const router = useRouter();
@@ -244,7 +247,7 @@ const showMyPhoto = () => {
   isMyPhotoVisible.value = true;
   isPhotoSquareVisible.value = false;
 }
-const showPhotoSquare=()=>{
+const showPhotoSquare = () => {
   isMyPhotoVisible.value = false;
   isPhotoSquareVisible.value = true;
 }
@@ -326,7 +329,7 @@ watch(() => mergeId, async (newVal) => {
   if (newVal) {
     isPhotoSquareVisible.value = true;
   }
-}, {immediate: true})
+}, { immediate: true })
 
 
 </script>
@@ -335,24 +338,10 @@ watch(() => mergeId, async (newVal) => {
   <div :show="show" class="main">
     <div class="home-wrapper">
       <!-- 视频背景 -->
-      <video 
+      <video ref="videoElement" class="background-video" :src="backgroundVideo" autoplay loop muted playsinline
-        ref="videoElement"
+        webkit-playsinline preload="metadata" x5-video-player-type="h5" x5-video-player-fullscreen="false"
-        class="background-video" 
+        x5-video-orientation="portraint" @loadstart="onVideoLoadStart" @canplay="onVideoCanPlay" @error="onVideoError"
-        :src="backgroundVideo" 
+        @loadeddata="onVideoLoaded">
-        autoplay 
-        loop 
-        muted 
-        playsinline
-        webkit-playsinline
-        preload="metadata"
-        x5-video-player-type="h5"
-        x5-video-player-fullscreen="false"
-        x5-video-orientation="portraint"
-        @loadstart="onVideoLoadStart"
-        @canplay="onVideoCanPlay"
-        @error="onVideoError"
-        @loadeddata="onVideoLoaded"
-      >
         <!-- 为不支持视频的设备提供 fallback -->
         <p style="display: none;">您的浏览器不支持视频播放</p>
       </video>
@@ -372,7 +361,8 @@ watch(() => mergeId, 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="navigateSelectTemplatePage"
+        :class="{ 'disabled': globalStore.game_chances <= 0 }">
         <img src="../assets/images/join.webp" alt="立即参与">
         <div class="join-main">
           <p class="join-value"><span>X</span>{{ globalStore.game_chances }}</p>
@@ -416,14 +406,17 @@ watch(() => mergeId, async (newVal) => {
   width: 24vw;
   left: 4vw;
 }
+
 .slogan {
   top: 20vw;
   width: 76vw;
 }
+
 .main {
   height: 100%;
   overflow-y: auto;
 }
+
 .home-wrapper {
   width: 100vw;
   height: 200vw;
@@ -433,7 +426,8 @@ watch(() => mergeId, async (newVal) => {
   align-items: center;
   position: relative;
   min-height: -webkit-fill-available;
-  overflow: hidden; /* 防止视频溢出 */
+  overflow: hidden;
+  /* 防止视频溢出 */
 }
 
 /* 视频背景样式 */
@@ -443,9 +437,12 @@ watch(() => mergeId, async (newVal) => {
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover; /* 保持视频比例并填满容器 */
+  object-fit: cover;
-  z-index: 0; /* 置于最底层 */
+  /* 保持视频比例并填满容器 */
-  pointer-events: none; /* 禁止视频交互，避免影响按钮点击 */
+  z-index: 0;
+  /* 置于最底层 */
+  pointer-events: none;
+  /* 禁止视频交互，避免影响按钮点击 */
 }
 
 /* fallback 背景图 */
@@ -459,8 +456,10 @@ watch(() => mergeId, async (newVal) => {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
-  z-index: -1; /* 置于视频下方 */
+  z-index: -1;
+  /* 置于视频下方 */
 }
+
 .scene-item {
   position: fixed;
   cursor: pointer;
@@ -535,36 +534,42 @@ watch(() => mergeId, async (newVal) => {
   right: 0;
   animation-delay: 0s;
 }
+
 .item-4 {
   width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
+
 .item-5 {
   width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
+
 .item-6 {
   width: 14.5vw;
   top: 8%;
   right: 0;
   animation-delay: 0s;
 }
+
 .item-7 {
   width: 14.5vw;
   top: 13.5%;
   right: 0;
   animation-delay: 0s;
 }
+
 .item-8 {
   width: 11vw;
   bottom: 32%;
   right: 1%;
   animation-delay: 0s;
 }
+
 .item-9 {
   width: 11vw;
   bottom: 23%;

src/components/Lottery.vue

@@ -32,11 +32,11 @@ import ModalTransition from "./ModalTransition.vue"
 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 lotteryFace = globalStore.result_url;
+const lotteryFaceUrl = ref('')
-const lotteryFaceUrl = ref(lotteryFace)
 const cardRef = ref(null)
 const sceneRef = ref(null)
 const guangRef = ref(null)
@@ -117,12 +117,24 @@ watch(() => props.show, async (newVal) => {
     return
   }
 
+  const loading = weui.loading()
+  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(2000)
+  // await Sleep(20000)
+
   
-  shakeTimeline.pause()
   const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
   // TODO: 测试数据
   // const lottteryResult = {
@@ -136,6 +148,9 @@ watch(() => props.show, async (newVal) => {
   //   }
   // }
 
+  loading.hide()
+  shakeTimeline.pause()
+
   if (lottteryResult.res.status !== 200) {
     emit('close')
     return

src/libs/getUserPicture.js

@@ -0,0 +1,29 @@
+import { globalStore } from "@/globalstore";
+import { generateQR, Request } from "../libs/utils"
+import Haibao from "@/libs/haibao"
+import mask from "../assets/images/haibao-mask.webp"
+import haibaoCoverBorder from "../assets/images/haibao-cover.webp"
+
+
+export default async () => {
+  let userUrl = globalStore.result_url
+
+  if (!userUrl) {
+    const result = await Request('face/square', { my_only: 1, page: 1, per_page: 100 }, "GET", true)
+    if (result.res.status === 200) {
+      const dataHit = result.json.data.find(v => v.is_public)
+      if (!dataHit) {
+        return weui.alert("请先去参与打榜")
+      }
+      userUrl = dataHit.result_url
+    }
+  }
+
+  const haibaoCover = new Haibao(951, 1607)
+  haibaoCover.add(userUrl, 0, 50, 951, 1698)
+  haibaoCover.add(mask, 10, 100)
+  haibaoCover.add(haibaoCoverBorder, 0, 0)
+
+  await haibaoCover.draw('destination-in');
+  return await haibaoCover.generate({ mimeType: 'image/png' });
+}