更改转盘逻辑和背景

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 {