diff --git a/public/bg.jpg b/public/bg.jpg index 23ee98d..5deb92f 100644 Binary files a/public/bg.jpg and b/public/bg.jpg differ diff --git a/public/pan.png b/public/pan.png new file mode 100644 index 0000000..c1b94bd Binary files /dev/null and b/public/pan.png differ diff --git a/public/wheel-base.png b/public/wheel-base.png index a73dfc2..78971cd 100644 Binary files a/public/wheel-base.png and b/public/wheel-base.png differ diff --git a/src/assets/img/j.png b/src/assets/img/j.png new file mode 100644 index 0000000..9319127 Binary files /dev/null and b/src/assets/img/j.png differ diff --git a/src/views/DZP.vue b/src/views/DZP.vue index ecbf50e..efb66ae 100644 --- a/src/views/DZP.vue +++ b/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) } -