抽奖效果修改

src/components/Ad.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 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("请前往「泸州老窖会员中心」小程序进行查询")

src/components/HomePage.vue

@@ -21,6 +21,7 @@ const videoElement = ref(null);
 const videoLoaded = ref(false);
 const videoError = ref(false);
 const lotteryShow = ref(false)
+const lotteryType = ref("draw")
 
 // 初始化全局音频实例
 const initGlobalAudio = () => {
@@ -407,7 +408,7 @@ 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"></Lottery>
 </template>
 
 <style scoped>

src/components/Lottery.vue

@@ -5,13 +5,12 @@
       <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-title" :class="props.type === 'notice' && 'notice'" ref="titleRef"
-            <div class="lottery-image" :class="'USER_' + activePrizeData.prize_code"></div>
+              v-show="activePrizeData.prize_code !== 'NO'"></div>
-            <div class="lottery-name">{{ activePrizeData.name }}</div>
+            <div class="lottery-desc" v-show="props.type === 'notice'">在刚刚结束的打榜活动中成功斩获<br /><strong>第[30]名</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.name }}</div>
             <div class="lottery-btngroup" v-show="btngroupShow">
               <div class="btn-more" @click="handleBtnMore"></div>
               <div class="btn-kaixin" @click="handleLotteryAction"></div>
@@ -33,14 +32,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 +46,12 @@ const btngroupShow = ref(false)
 gsap.registerPlugin()
 const props = defineProps({
   show: false,
+  type: "draw"
 })
 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 = () => {
@@ -97,17 +93,10 @@ const initAnimateStyle = () => {
     });
   }
 
-  // 创建一个时间线，添加关键帧，并循环
+  gsap.set(lotteryImageRef.value, { scale: 0 })
-  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(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 +107,41 @@ watch(() => props.show, async (newVal) => {
   }
 
   const loading = weui.loading()
-  const userPicture = await getUserPicture()
+  let lottteryResult = null
 
-  const preimg = async() => {
+  if (props.type === 'draw') {
-    new Promise((resolve) => {
+    // lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
-      const img = new Image()
-      img.onload = () => resolve(img)
-      img.src = userPicture
-    })
   }
-  await preimg()
+  // const userPicture = await getUserPicture()
-  lotteryFaceUrl.value = userPicture
+
+  // 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' })
+  // const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
   // TODO: 测试数据
-  // const lottteryResult = {
+  lottteryResult = {
-  //   res: { status: 200 },
+    res: { status: 200 },
-  //   json: {
+    json: {
-  //     id: 0,
+      id: 0,
-  //     code: "HEIGAI_42_GPJ_500ML",
+      code: "LZ_ZQ_DZJ",
-  //     prize_code: 'HEIGAI_42_GPJ_500ML',
+      prize_code: 'LZ_ZQ_DZJ',
-  //     coupon_type: "scene",
+      coupon_type: "scene",
-  //     name: "泸州老窖的一瓶酒"
+      name: "泸州老窖的一瓶酒"
-  //   }
+    }
-  // }
+  }
 
   loading.hide()
-  shakeTimeline.pause()
 
   if (lottteryResult.res.status !== 200) {
     emit('close')
@@ -175,26 +167,23 @@ watch(() => props.show, async (newVal) => {
       }
     });
 
-    prizeshowTime.to(sceneRef.value, {
+
-      duration: .4,
+    prizeshowTime.to([sceneRef.value], {
-      scale: .2,
+      duration: 2.5,
-    })
-    prizeshowTime.to(sceneRef.value, {
-      duration: 1,
       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,7 +213,6 @@ watch(() => props.show, async (newVal) => {
 })
 
 onUnmounted(() => {
-  shakeTimeline = null
   gsapCtx && gsapCtx.revert()
 })
 </script>
@@ -294,6 +282,30 @@ 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;
@@ -342,6 +354,7 @@ onUnmounted(() => {
   background-position: center bottom;
   background-repeat: no-repeat;
   background-size: auto 100%;
+  background-origin: 50% 100%;
 }
 
 .lottery-image.HEIGAI_42_GPJ_500ML {
@@ -387,12 +400,8 @@ onUnmounted(() => {
   height: 100%;
 
   top: -14vw;
-  transform-style: preserve-3d;
 }
 
-.lottery-card.flip {
-  transform: rotateY(180deg);
-}
 
 .lottery-face {
   position: absolute;
@@ -417,8 +426,6 @@ onUnmounted(() => {
   background-image: url("../assets/images/prize-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
-  backface-visibility: hidden;
-  transform: rotateY(180deg);
 }
 
 .close {