更新周边功能

src/components/Lottery.vue

@@ -1,235 +1,378 @@
 <template>
   <ModalTransition class="lottery" :show="show" name="opacity" position="center">
     <div class="lottery-wrapper">
-      <div class="laohuji">
-        <div class="laohuji-temp" ref="tempRef"></div>
-        <div class="laohuji-bottom">
-          <div class="laohuji-list">
-            <div class="laohuji-item a" ref="itemaRef"></div>
-            <div class="laohuji-item b" ref="itembRef"></div>
-            <div class="laohuji-item c" ref="itemcRef"></div>
+      <div class="guang" ref="guangRef"></div>
+      <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-btngroup" v-show="btngroupShow">
+              <div class="btn-more" @click="handleBtnMore"></div>
+              <div class="btn-kaixin" @click="handleLotteryAction"></div>
+            </div>
           </div>
         </div>
-        <div class="btn-kaixin" ref="btnRef" @click="handleGetLottery"></div>
-        <div class="laohuji-kapian" ref="kapianRef">
-          <div class="laohuji-kapian-bg" ref="kapianBgRef">
-            <div class="laohuji-kapian-cover" :class="kapianCover"></div>
-          </div>
-        </div>
-        <div class="laohuji-top"></div>
       </div>
+
     </div>
   </ModalTransition>
 </template>
 
 <script setup>
 import { gsap } from "gsap";
-import Phaser from "phaser"
 import { ref, watch, onMounted, onUnmounted } from "vue"
+import globalToastEvent, { ToastType } from "../globalToastEvent";
 import ModalTransition from "./ModalTransition.vue"
 import confetti from "canvas-confetti";
-import { Howl } from 'howler';
-import { Request } from "../libs/utils"
-import lotterySoundUrl from '../assets/audio/lottery.mp3'
-import laohujiSoundUrl from '../assets/audio/laohuji.mp3'
+import { Request, Sleep } from "../libs/utils"
 import { globalStore } from "@/globalstore";
-const laohujiSound = new Howl({
-  src: [laohujiSoundUrl]
-});
-const lotterySoundSuccess = new Howl({
-  src: [lotterySoundUrl]
-});
+//TODO: 这里这张图要用用户分享那张图
+import lotteryFace from "../assets/images/haibao-cover.png"
 
+const lotteryFaceUrl = ref(lotteryFace)
+const cardRef = ref(null)
+const sceneRef = ref(null)
+const guangRef = ref(null)
+const guangyunRef = ref(null)
+const titleRef = ref(null)
+const activePrizeData = ref({})
+const btngroupShow = ref(false)
 
 gsap.registerPlugin()
 const props = defineProps({
   show: false,
 })
-const emit = defineEmits(['close', 'address'])
+const emit = defineEmits(['close'])
 
-const kapianRef = ref(null)
-const tempRef = ref(null)
-const btnRef = ref(null)
-const itemaRef = ref(null)
-const itembRef = ref(null)
-const itemcRef = ref(null)
-const kapianCover = ref('')
-const kapianBgRef = ref(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']
-
-
-// 滚动奖品图片的高度（所有奖品）
-const GRID = 165.833333
-let PRIZEDATA = null
 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 = () => {
+  initAnimateStyle()
+  emit("close")
+}
+
+const handleBtnMore = () => {
+  closeThis()
+  globalToastEvent.emit(ToastType.SHOW_AD)
+}
+const handleLotteryAction = () => {
+  //实物
+  closeThis()
+  if (activePrizeData.value.coupon_type === 'scene') {
+    globalToastEvent.emit(ToastType.SHOW_ADDRESS, activePrizeData.value.id)
+  }
+}
 
 onMounted(() => {
+  gsap.registerPlugin()
   initAnimateStyle()
 })
 
 const initAnimateStyle = () => {
   interval && clearInterval(interval)
   interval = null
-  const list = [itemaRef.value, itembRef.value, itemcRef.value]
-  const randomHeight = [Phaser.Math.Between(3, 8), Phaser.Math.Between(3, 8), Phaser.Math.Between(3, 8)]
 
-  gsap.set(kapianBgRef.value, { y: '-72vw' })
-  gsap.set(btnRef.value, { scale: 0, display: 'none' })
-  gsap.set(tempRef.value, { height: '63.518519vw' })
-  list.forEach((v, idx) => {
-    gsap.set(v, { y: `-${randomHeight[idx] * GRID - GRID / PRIZE_LIST.length}vw`, height: `${randomHeight[idx] * GRID}vw` })
-  })
+  let keyframes = [];
+  const frames = 20; // 关键帧数量
+  const strength = 5; // 抖动强度
+
+  // 生成关键帧
+  for (let i = 0; i < frames; i++) {
+    keyframes.push({
+      x: gsap.utils.random(-strength, strength),
+      y: gsap.utils.random(-strength, strength),
+      duration: 0.05 // 每帧的持续时间
+    });
+  }
+
+  // 创建一个时间线，添加关键帧，并循环
+  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(cardRef.value, { rotateY: 0 })
+  btngroupShow.value = false
 }
-onMounted(() => {
-  gsap.set(btnRef.value, { display: "none", scale: 0 })
-})
 
 watch(() => props.show, async (newVal) => {
   if (!newVal) {
     return
   }
 
-  const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
-  // const lottteryResult = {
-  //   res: { status: 200 },
-  //   json: {
-  //     code: "HEIGAI_42_GPJ_500ML",
-  //     prize_code: 'HEIGAI_42_GPJ_500ML'
-  //   }
-  // }
+  shakeTimeline.play()
+
+  //TODO: 延时测试，上限删掉
+  await Sleep(2000)
+
+  shakeTimeline.pause()
+  // const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
+  // TODO: 测试数据
+  const lottteryResult = {
+    res: { status: 200 },
+    json: {
+      id: 0,
+      code: "HEIGAI_42_GPJ_500ML",
+      prize_code: 'HEIGAI_42_GPJ_500ML',
+      coupon_type: "scene",
+      name: "泸州老窖的一瓶酒"
+    }
+  }
 
   if (lottteryResult.res.status !== 200) {
     emit('close')
     return
   } else {
-    globalStore.consumeBingyin(globalStore.CONSUME_POINT_1_PER_DRAW)
-    PRIZEDATA = lottteryResult.json
+    globalStore.lotteryCut()
+    activePrizeData.value = lottteryResult.json
 
     // 未中奖的情况
     if (lottteryResult.json.code === 204) {
-      PRIZEDATA = { prize_code: 'NO', coupon_type: 'NO' }
+      activePrizeData.value = { prize_code: 'NO', coupon_type: 'NO' }
     }
-    
-    kapianCover.value = PRIZEDATA.prize_code === '66_POINTS' ? 'POINTS' : PRIZEDATA.prize_code
+
+    // kapianCover.value = PRIZEDATA.prize_code === '66_POINTS' ? 'POINTS' : PRIZEDATA.prize_code
   }
 
   gsapCtx = gsap.context(() => {
     initAnimateStyle()
 
-    const prizeIndex = PRIZE_LIST.findIndex(v => v === PRIZEDATA.prize_code)
-    const durationArr = [Phaser.Math.Between(3, 9), Phaser.Math.Between(3, 9), Phaser.Math.Between(3, 9)]
-
-    gsap.to([itemaRef.value, itembRef.value, itemcRef.value], {
-      y: `-${GRID / PRIZE_LIST.length * prizeIndex}vw`,
-      ease: "expo.out",
-      duration: (idx) => {
-        return durationArr[idx]
-      },
-      onStart: () => {
-        laohujiSound.play()
-        laohujiSound.fade(1, 0, Math.max(...durationArr)*1000)
-      },
-      delay: .4,
+    const prizeshowTime = gsap.timeline({
       onComplete: () => {
-        lotterySoundSuccess.play()
-        var duration = 4 * 1000;
-        var animationEnd = Date.now() + duration;
-        var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
-
-        function randomInRange (min, max) {
-          return Math.random() * (max - min) + min;
-        }
-
-        interval = setInterval(function () {
-          var timeLeft = animationEnd - Date.now();
-
-          if (timeLeft <= 0) {
-            return clearInterval(interval);
-          }
-
-          var particleCount = 50 * (timeLeft / duration);
-          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
-          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
-        }, 250);
-
-        gsap.to(kapianBgRef.value, { y: '0', duration: 4, ease: "sine.inOut", })
-        gsap.to(tempRef.value, {
-          height: '+=90vw', duration: 4, ease: "sine.inOut", onComplete: () => {
-            gsap.set(btnRef.value, { display: "block" })
-            gsap.to(btnRef.value, { scale: 1, ease: "sine.inOut", duration: .3 })
-          }
-        })
+        btngroupShow.value = true
       }
+    });
+
+    prizeshowTime.to(sceneRef.value, {
+      duration: .4,
+      scale: .2,
     })
+    prizeshowTime.to(sceneRef.value, {
+      duration: 1,
+      scale: 1,
+      opacity: 1,
+      ease: "power4.out"
+    })
+    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)"
+    })
+
+    var duration = 4 * 1000;
+    var animationEnd = Date.now() + duration;
+    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+    function randomInRange (min, max) {
+      return Math.random() * (max - min) + min;
+    }
+
+    interval = setInterval(function () {
+      var timeLeft = animationEnd - Date.now();
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval);
+      }
+
+      var particleCount = 50 * (timeLeft / duration);
+      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+    }, 250);
+
   })
 })
 
-
-const handleGetLottery = () => {
-  emit('close', { coupon_type: PRIZEDATA.coupon_type })
-  initAnimateStyle()
-
-  if (PRIZEDATA.coupon_type === 'scene') {
-    emit('address', PRIZEDATA.id)
-  }
-}
-
 onUnmounted(() => {
+  shakeTimeline = null
   gsapCtx && gsapCtx.revert()
 })
 </script>
 
 <style scoped>
-.laohuji {
+.guang,
+.guangyun {
+  position: absolute;
+  left: 50%;
+  margin-left: -66.2vw;
+  top: 50%;
+  margin-top: -64.5vw;
+  width: 129.62963vw;
+  height: 129.62963vw;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.guang {
+  background-image: url("../assets/images/guang.png");
+  animation: rotateGuang 20s linear infinite;
+}
+
+
+.guangyun {
+  background-image: url("../assets/images/guangyun.png");
+  /* animation: rotateGuangyun 3s linear infinite; */
+}
+
+.lottery-title {
+  position: absolute;
+  top: 24vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 65.462963vw;
+  height: 19.907407vw;
+  background-image: url("../assets/images/lottery-title.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.lottery-name {
+  position: absolute;
+  bottom: 18vw;
+  text-align: center;
+  width: 100%;
+  font-size: 6vw;
+  font-weight: 700;
+  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-btngroup {
+  position: absolute;
+  bottom: -24vw;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn-more {
+  width: 48.703704vw;
+  height: 18.240741vw;
+  background-image: url("../assets/images/btn-more.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.btn-kaixin {
+  width: 48.703704vw;
+  height: 18.240741vw;
+  background-image: url("../assets/images/btn-kaixin.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.lottery-image {
+  position: absolute;
+  top: 45vw;
+  width: 100%;
+  height: 60vw;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+}
+
+.lottery-image.HEIGAI_42_GPJ_500ML {
+  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.png");
+}
+
+@keyframes rotateGuangyun {
+  0% {
+    transform: scale(.3);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateGuang {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.lottery-scene {
   position: relative;
-  margin-top: -20vw;
+  width: 88.055556vw;
+  height: 148.796296vw;
 }
 
-.laohuji-temp {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
 }
 
-.laohuji-top {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card.flip {
+  transform: rotateY(180deg);
+}
+
+.lottery-face {
   position: absolute;
   top: 0;
   left: 0;
-  background-image: url("../assets/images/laohuji-top.webp");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
 }
 
-.laohuji-bottom {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card img {
+  width: 100%;
+  display: block;
+}
+
+.lottery-prize {
   position: absolute;
   top: 0;
   left: 0;
-  background-image: url("../assets/images/laohuji-bottom.webp");
+  width: 100%;
+  height: 100%;
+  background-image: url("../assets/images/prize-bg.png");
   background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.laohuji-kapian {
-  position: absolute;
-  overflow: hidden;
-  top: 58vw;
-  left: 14.4vw;
-}
-
-.laohuji-kapian-bg {
-  width: 51.851852vw;
-  clip-path: rect(0px 51.851852vw 74vw 0px);
-  height: 72vw;
-  background-image: url("../assets/images/laohuji-kapian.webp");
-  background-position: left bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 73.333333vw;
+  background-size: 100%;
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
 }
 
 .close {
@@ -242,80 +385,4 @@ onUnmounted(() => {
   background-repeat: no-repeat;
   background-size: 100%;
 }
-
-.btn-kaixin {
-  width: 40.092593vw;
-  height: 15.555556vw;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  margin-left: -20vw;
-  background-image: url("../assets/images/btn-kaixin.webp");
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-
-.laohuji-list {
-  position: absolute;
-  top: 31.5vw;
-  left: 14vw;
-  width: 53.6vw;
-  height: 18.425926vw;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-}
-
-.laohuji-item {
-  width: 16.296296vw;
-  height: 18.425926vw;
-  background-color: #ccc;
-  background-image: url("../assets/images/laohuji-item-1.webp");
-  background-repeat: repeat-y;
-  background-size: 16.296296vw 165.833333vw;
-}
-
-.laohuji-kapian-cover {
-  position: relative;
-  left: 3vw;
-  top: 13vw;
-  width: 45.555556vw;
-  height: 55.185185vw;
-  background-image: url("../assets/images/NO.webp");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.laohuji-kapian-cover.TJGJ {
-  background-image: url("../assets/images/TJGJ.webp");
-}
-
-.laohuji-kapian-cover.XINCHUN_WEIZUN {
-  background-image: url("../assets/images/XINCHUN_WEIZUN.webp");
-}
-
-.laohuji-kapian-cover.TEQU_JL_52_60Y_100ML_2 {
-  background-image: url("../assets/images/TEQU_JL_52_60Y_100ML_2.webp");
-}
-
-.laohuji-kapian-cover.LZLJ_TEQU_LZH_52_100ML_2 {
-  background-image: url("../assets/images/LZLJ_TEQU_LZH_52_100ML_2.webp");
-}
-
-.laohuji-kapian-cover.HEIGAI_42_GPJ_500ML {
-  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.webp");
-}
-
-.laohuji-kapian-cover.DZCZ {
-  background-image: url("../assets/images/DZCZ.webp");
-}
-
-.laohuji-kapian-cover.DZSCZ {
-  background-image: url("../assets/images/DZSCZ.webp");
-}
-
-.laohuji-kapian-cover.POINTS {
-  background-image: url("../assets/images/66_POINTS.webp");
-}
 </style>