diff --git a/public/bg.jpg b/public/bg.jpg new file mode 100644 index 0000000..0c49d54 Binary files /dev/null and b/public/bg.jpg differ diff --git a/public/bg.png b/public/bg.png deleted file mode 100644 index 7f9959a..0000000 Binary files a/public/bg.png and /dev/null differ diff --git a/src/views/DZP3.vue b/src/views/DZP3.vue index 05786eb..2b5e2de 100644 --- a/src/views/DZP3.vue +++ b/src/views/DZP3.vue @@ -15,14 +15,14 @@ const isSpinning = ref(false) const wheelConfig = ref({ }) const prizes = ref([ - { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //0 - { fonts: [{ text: '+99', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //1 - { fonts: [{ text: '-300', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //2 - { fonts: [{ text: '-200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //3 - { fonts: [{ text: '-100', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //4 - { fonts: [{ text: '+300', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //5 - { fonts: [{ text: '+55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //6 - { fonts: [{ text: '-400', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //7 + { fonts: [{ text: '+188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //0 + { fonts: [{ text: '+88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //1 + { fonts: [{ text: '+188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //2 + { fonts: [{ text: '+588', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //3 + { fonts: [{ text: '+88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //4 + { fonts: [{ text: '+688', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //5 + { fonts: [{ text: '+888', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //6 + { fonts: [{ text: '+88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //7 ]) const blocks = ref([{ padding: '13px', background: ' #FF2A00' }]) const buttons = ref([{ @@ -38,36 +38,48 @@ const buttons = ref([{ }]) -//自定义数组 -const customOrder = ref([1, 2, 4, 0, 3, 6, 4, 5, 4, 0, 7,1,0]) let orderIndex = 0; +// 构造中奖顺序数组 +const customOrder = ref([ + ...Array(8).fill(1), // +88 => 20次 + ...Array(6).fill(4), + ...Array(6).fill(7), + ...Array(3).fill(0), + ...Array(7).fill(2), // +188 => 10次 (索引0) + ...Array(3).fill(3), // +588 => 3次 (索引3) + ...Array(2).fill(5), // +688 => 2次 (索引5) + ...Array(1).fill(6) // +888 => 1次 (索引6) +]) + +// 打乱数组顺序(模拟随机性) +function shuffle(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } +} +shuffle(customOrder.value); + function startCallback() { - // 检查转动条件和次数 - if (spinCount.value >= 13) { // 从0开始计数,11表示第12次 - alert('已达最大转动次数!') - return - } - - isSpinning.value = true - spinCount.value++ - // 重置为初始分数 - //totalScore.value = baseScore - // 调用抽奖组件的play方法开始游戏 - myLucky.value.play() - // 模拟调用接口异步抽奖 - setTimeout(() => { - // - console.log(orderIndex, 'orderIndex') + if (spinCount.value >= 36) { // 总共抽奖36次 + alert('已达最大转动次数!'); + return; + } - const index = orderIndex + isSpinning.value = true; + spinCount.value++; - console.log(customOrder.value[index], 'custome') - // 调用stop停止旋转并传递中奖索引 - myLucky.value.stop(customOrder.value[index]) - //更新指针(循环) - orderIndex = (index + 1) % customOrder.value.length; - }, 3000) + myLucky.value.play(); + + setTimeout(() => { + const prizeIndex = customOrder.value[orderIndex]; + console.log(orderIndex, 'orderIndex'); + console.log(prizeIndex, '即将停止在奖品索引'); + + myLucky.value.stop(prizeIndex); + orderIndex = (orderIndex + 1) % customOrder.value.length; + }, 3000); } const scoreAnimation = ref(false) @@ -240,7 +252,7 @@ onMounted(() => { } .full-background { - background-image: url('/public/bg.png'); + background-image: url('/public/bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; @@ -274,7 +286,7 @@ onMounted(() => { background-image: url('/public/wheel-base1.png'); position: fixed; left: 535px; - top: 210px; + top: 160px; width: 568px; height: 600px; z-index: 990; @@ -286,6 +298,7 @@ onMounted(() => { .luckyWheel .lucky { aspect-ratio: 1/1; color: aqua; + margin-top: -3rem; } h1 {