diff --git a/public/tanchaung.png b/public/tanchaung.png new file mode 100644 index 0000000..4161821 Binary files /dev/null and b/public/tanchaung.png differ diff --git a/src/views/DZP.vue b/src/views/DZP.vue index 3b92513..ed7366f 100644 --- a/src/views/DZP.vue +++ b/src/views/DZP.vue @@ -8,18 +8,18 @@ const popupMessage = ref(''); const totalScore = ref(4000) // 初始分数 const myLucky = ref() // 新增变量记录基础分数 -const baseScore = 4000 +//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 +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 ]) const blocks = ref([{ padding: '13px', background: ' #FF2A00' }]) const buttons = ref([{ @@ -32,7 +32,7 @@ const buttons = ref([{ //background: '#8a9bf3', pointer: true, - + }]) //自定义数组 @@ -41,7 +41,7 @@ let orderIndex = 0; function startCallback() { // 重置为初始分数 - totalScore.value = baseScore + //totalScore.value = baseScore // 调用抽奖组件的play方法开始游戏 myLucky.value.play() // 模拟调用接口异步抽奖 @@ -66,16 +66,16 @@ function endCallback(prize) { const result = Number(prize.fonts[0].text) console.log(prize.fonts[0].text) // 更新总分 - totalScore.value = baseScore + result + totalScore.value = totalScore.value + result // 触发动画 animateScoreChange() // 设置弹窗内容 - popupMessage.value = `${totalScore.value}金币`; // <--- 正确的用法 + popupMessage.value = `${result}金币`; // <--- 正确的用法 showPopup.value = true; // 3秒后隐藏弹窗 setTimeout(() => { showPopup.value = false; - },3000); + }, 3000); } // 添加分数变化动画方法 const animateScoreChange = () => { @@ -88,7 +88,7 @@ const animateScoreChange = () => { @@ -120,53 +123,65 @@ const animateScoreChange = () => {