zrh

src/views/DZP.vue

@@ -11,21 +11,20 @@ const myLucky = ref()
 //const baseScore = 4000
 const wheelConfig = ref({
 })
+
 const prizes = ref([
-    { 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
+    { fonts: [{ text: '2' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //2
+    { fonts: [{ text: '4' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //4
+    { fonts: [{ text: '6' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //6
+    { fonts: [{ text: '9' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //9
+    { fonts: [{ text: '10' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //10
+    { fonts: [{ text: '15' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //15
 ])
 const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
 const buttons = ref([{
     radius: '35%',
     imgs: [{
-        src: 'src/assets/img/jiantou.png',
+        src: 'src/assets/img/j.png',
         width: '100%',
         top: '-130%'
     }],
@@ -35,27 +34,17 @@ const buttons = ref([{
 
 }])
 
-//自定义数组
-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(() => {
-        // 
-        console.log(orderIndex, 'orderIndex')
-
-        const index = orderIndex
-
-        console.log(customOrder.value[index], 'custome')
+        // 假设后端返回的中奖索引是0
+        const index = 3
         // 调用stop停止旋转并传递中奖索引
-        myLucky.value.stop(customOrder.value[index])
-        //更新指针(循环)
-        orderIndex = (index + 1) % customOrder.value.length;
+        myLucky.value.stop(index)
     }, 3000)
 }
 const scoreAnimation = ref(false)
@@ -63,95 +52,29 @@ const scoreAnimation = ref(false)
 
 // 抽奖结束end回调
 function endCallback(prize) {
-    const result = Number(prize.fonts[0].text)
-    console.log(prize.fonts[0].text)
-    // 更新总分
-    totalScore.value = totalScore.value + result
-    // 触发动画
-    animateScoreChange()
-    // 先清空文字
-  popupMessage.value = ""; 
-  showPopup.value = true;
-    // 设置弹窗内容
-    setTimeout(() => {
-      popupMessage.value= `${result}金币`; 
- }, 1000); //  <---  正确的用法
-  
-    showPopup.value = true;
-    // 3秒后隐藏弹窗
-    setTimeout(() => {
-        showPopup.value = false;
-    }, 3000);
-}
-// 添加分数变化动画方法
-const animateScoreChange = () => {
-    scoreAnimation.value = true
-    setTimeout(() => {
-        scoreAnimation.value = false
-    }, 3000)
+    console.log(prize)
 }
-
 </script>
 
 <template>
     <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="434px" height="434px" :default-config="wheelConfig"
+            <LuckyWheel class="lucky" ref="myLucky" width="354px" height="354px" :default-config="wheelConfig"
                 :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
 
         </div>
-
-
-        <div class="full-background">
-            <!-- 其他原有代码不变 -->
-
-        </div>
-
-        <div class="wheel-base">
+        <div class="wheel-base" >
         </div>
-        <transition name="popup-fade">
-            <div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }">
-            <!-- <div class="score-popup" :class="{ 'boom-effect': showPopup }"> -->
-                <div class="ziti">
-                    
-                    {{ popupMessage }}
-                </div>
-            </div>
-
-        </transition>
 
     </div>
 </template>
 
 <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 {
     /* 基础样式同上 */
-
-
     position: fixed;
     left: 50%;
     top: 45%;
@@ -161,8 +84,8 @@ const animateScoreChange = () => {
 
     /* 背景图配置 */
     background:
-        url('tanchuang.png') center/contain no-repeat;
-    padding: 120px 80px;
+        url('tanchaung.png') center/contain no-repeat;
+    padding: 240px 160px;
     /* 根据图片留出边距 */
 
     /* 尺寸控制 */
@@ -180,17 +103,15 @@ const animateScoreChange = () => {
 .ziti {
     /* 文字样式 */
     font-family: '华康金文体', 'Arial Black', sans-serif;
-    
     font-size: 100px;
-
     /* 根据图片调整字号 */
-    color: #ffd904;
+    color: #0e0d0d;
     /* 金色文字 */
     line-height: 250px;
     /* 垂直居中文字 */
     text-shadow: 2px 2px 0 #B8860B;
     /* 略微加粗文字 */
-    margin-bottom: 100px;
+    margin-bottom: 260px;
 }
 
 /* 添加艺术字样式 */
@@ -214,8 +135,6 @@ const animateScoreChange = () => {
     z-index: 1000;
 }
 
-
-
 /* 添加分数变化动画 */
 .score-change {
     transform: translateX(-50%) scale(1.2);
@@ -247,9 +166,9 @@ const animateScoreChange = () => {
 
 .luckyWheel {
     position: fixed;
-    z-index: 999;
-    left: 1140px;
-    top: 443px;
+    z-index: 2000;
+    left: 826px;
+    top: 487px;
     pointer-events: auto;
 }
 
@@ -257,11 +176,21 @@ const animateScoreChange = () => {
 .wheel-base {
     background-image: url('wheel-base.png');
     position: fixed;
-    left: 1065px;
-    top: 350px;
-    width: 568px;
+    left: 750px;
+    top: 395px;
+    width: 520px;
     height: 600px;
-    z-index: 990;
+    z-index: 1190;
+
+}
+.pan {
+    background-image: url('pan.png');
+    position: fixed;
+    left: 822px;
+    top: 460px;
+    width: 360px;
+    height: 360px;
+    z-index: 1190;
 
 }