大转盘

src/views/DZP.vue

@@ -1,56 +1,259 @@
 <script setup>
 
 import { ref, onBeforeMount } from 'vue'
+import jiantou from '../assets/img/jiantou.png'
 
+const showPopup = ref(false);
+const popupMessage = ref('');
+const totalScore = ref(4000) // 初始分数
 const myLucky = ref()
+// 新增变量记录基础分数
+const baseScore = 4000
 const wheelConfig = ref({
 })
 const prizes = ref([  
-    { fonts: [{ text: '-199', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '-55', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '+200', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '-88', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '-11', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '-299', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '+200', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '-66', top: '10%' }], background: '#b8c5f2' },
+    { fonts: [{ text: '-199', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#FAF9F0' },  //0
+    { fonts: [{ text: '-55', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },   //1
+    { fonts: [{ text: '+200', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },   //2
+    { fonts: [{ text: '-88', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },    //3
+    { fonts: [{ text: '-11', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },    //4
+    { fonts: [{ text: '-299', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },   //5
+    { fonts: [{ text: '+200', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },   //6
+    { fonts: [{ text: '-66', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#F5D7AD' },    //7
 ])
-const blocks = ref([{ padding: '13px', background: '#617df2' }])
+const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
 const buttons = ref([{
     radius: '35%',
-    background: '#8a9bf3',
+    imgs: [{
+        src: 'src/assets/img/jiantou.png',
+        width: '100%',
+        top: '-130%'
+    }],
+    //background: '#8a9bf3',
+
     pointer: true,
-    fonts: [{ text: '开始', top: '-10px' }]
+   
 }])
 
+//自定义数组
+const customOrder = ref([0, 4, 3, 1, 2, 4, 5, 7, 3, 4, 0])
+let orderIndex = 0;
+
 function startCallback() {
+    // 重置为初始分数
+    totalScore.value = baseScore
     // 调用抽奖组件的play方法开始游戏
     myLucky.value.play()
     // 模拟调用接口异步抽奖
     setTimeout(() => {
-        // 假设后端返回的中奖索引是0
-        const index = 10
+        // 
+        console.log(orderIndex, 'orderIndex')
+
+        const index = orderIndex
+
+        console.log(customOrder.value[index], 'custome')
         // 调用stop停止旋转并传递中奖索引
-        myLucky.value.stop(index)
+        myLucky.value.stop(customOrder.value[index])
+        //更新指针(循环)
+        orderIndex = (index + 1)
     }, 3000)
 }
+const scoreAnimation = ref(false)
+
 
 // 抽奖结束end回调
 function endCallback(prize) {
-    console.log(prize)
+    const result = Number(prize.fonts[0].text)
+    console.log(prize.fonts[0].text)
+    // 更新总分
+    totalScore.value = baseScore + result
+    // 触发动画
+    animateScoreChange()
+    // 设置弹窗内容
+    popupMessage.value = `${totalScore.value}金币`;  //  <---  正确的用法
+    showPopup.value = true;
+    // 3秒后隐藏弹窗
+    setTimeout(() => {
+        showPopup.value = false;
+    },3000);
 }
+// 添加分数变化动画方法
+const animateScoreChange = () => {
+    scoreAnimation.value = true
+    setTimeout(() => {
+        scoreAnimation.value = false
+    }, 3000)
+}
+
 </script>
 
 <template>
-    <dev>
-    <h1> 大转盘 </h1>
-
+   <div class="full-background">
+        <img :src="jiantou" alt="111">
+        <div class="art-text" :class="{ 'score-change': scoreAnimation }">
+            {{ totalScore }}金币
+        </div>
         <div class="luckyWheel">
-
-        <LuckyWheel class="lucky" ref="myLucky" width="300px" height="300px" :default-config="wheelConfig"
+            <LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
                 :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
+
+        </div>
+
+
+        <div class="full-background">
+            <!-- 其他原有代码不变 -->
+            
+        </div>
+
+        <div class="wheel-base">
+        </div>
+        <transition name="popup-fade">
+         <div v-if="showPopup" class="score-popup"
+         :class="{'boom-effect':showPopup}">
+        {{ popupMessage }}
+        </div>
+         </transition>
+
     </div>
-</dev>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* 爆炸动画关键帧 */
+@keyframes boom {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+/* 修改后的弹窗样式 */
+.score-popup {
+  /* 保持与4000分相同的字体设置 */
+  font-family: '华康金文体', 'Arial Black', sans-serif;
+  font-size: 64px;
+  color: #FFD700;
+  left: 450px;
+  position: absolute; /* 改为absolute定位 */
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  
+  
+  /* 爆炸动画参数 */
+  animation: boom 0.6s cubic-bezier(0.25, 0.46, 0.45, 2.5) forwards;
+  
+  /* 增强的立体效果 */
+  text-shadow: 
+    3px 3px 0 #A52A2A,
+    -2px -2px 0 #8B0000,
+    0 0 20px rgba(255, 215, 0, 0.8);
+  
+  /* 新增爆炸光效 */
+  box-shadow: 
+    0 0 50px rgba(255, 215, 0, 0.8),
+    0 0 30px rgba(255, 165, 0, 0.6);
+}
+
+/* 保持原有过渡效果 */
+.popup-fade-enter-active,
+.popup-fade-leave-active {
+  transition: opacity 3s;
+}
+/* 添加艺术字样式 */
+.art-text {
+    position: fixed;
+    left: 450px;
+    bottom: 200px;
+    transform: translateX(-50%);
+    font-family: 'Arial Black', sans-serif;
+    font-size: 150px;
+    color: #FFD700;
+    /* 金色 */
+    text-shadow:
+        3px 3px 0 #FF0000,
+        /* 红色描边 */
+        -1px -1px 0 #000,
+        1px -1px 0 #000,
+        -1px 1px 0 #000,
+        1px 1px 0 #000;
+    transition: transform 0.3s ease;
+    z-index: 1000;
+}
+
+/* 添加分数变化动画 */
+.score-change {
+    transform: translateX(-50%) scale(1.2);
+    color: #FF4500;
+    /* 变化时的橙色 */
+}
+
+.full-background {
+    background-image: url('bg.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}
+
+.custom-text {
+    position: fixed;
+    left: 300px;
+    bottom: 200px;
+    color: black;
+    font-size: 150px;
+    z-index: 999;
+}
+
+.luckyWheel {
+    position: fixed;
+    z-index: 999;
+    left: 1140px;
+    top: 443px;
+    pointer-events: auto;
+}
+
+/* 转盘底的样式 */
+.wheel-base {
+    background-image: url('wheel-base.png');
+    position: fixed;
+    left: 1065px;
+    top: 350px;
+    width: 568px;
+    height: 600px;
+    z-index: 990;
+
+}
+
+
+
+.luckyWheel .lucky {
+    aspect-ratio: 1/1;
+    color: aqua;
+}
+
+h1 {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    /* 居中标题 */
+    width: 100%;
+    top: 50px;
+    /* 让标题占据整个宽度 */
+    font-size: 100px;
+    /* 文字大小 */
+
+}
+</style>