fixbug: 九宫格bug

pages/other_package/nine-grid/components/LotteryGrid.vue

@@ -1,5 +1,7 @@
 <template>
   <!-- 九宫格容器 -->
+  <view>
+  </view>
   <view class="lottery-grid">
     <!-- 高亮选中框 -->
     <view class="highlight-box" :style="{
@@ -13,7 +15,7 @@
       <!-- 中间格子作为抽奖按钮 (索引4) -->
       <template v-if="index === 4">
         <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
-          @click="handleStartClick"></image>
+          @click="handleStartClick(1)"></image>
       </template>
 
       <!-- 其他8个奖品格子 -->
@@ -23,6 +25,7 @@
       </template>
     </view>
   </view>
+  <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartClick(10)"> 连续抽奖10次 </view>
 </template>
 
 <script>
@@ -166,7 +169,7 @@ export default {
     /**
      * 处理开始抽奖点击事件
      */
-    handleStartClick() {
+    handleStartClick(num) {
       // 如果正在抽奖或被禁用，则不执行
       if (this.isDisabled || this.isRotating) {
         console.log('抽奖被禁用或正在进行中')
@@ -174,7 +177,7 @@ export default {
       }
 
       // 通知父组件开始抽奖
-      this.$emit('start', 1)
+      this.$emit('start', num)
 
       // 开始抽奖动画（无论父组件做了什么处理）
       this.startLotteryAnimation()
@@ -301,4 +304,19 @@ export default {
   /* background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); */
   box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5);
 }
+
+.coiled-lottery {
+  width: 670rpx;
+  height: 88rpx;
+  background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+  box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+  border-radius: 44rpx;
+  margin: 120rpx auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #FFFFFF;
+}
 </style>

pages/other_package/nine-grid/components/ResultModal.vue

@@ -93,6 +93,12 @@ export default {
     justify-content: space-around;
 
     .modal-content-result-item {
+      margin-left: 15rpx;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
 
       .par-value {
         font-weight: bold;

pages/other_package/nine-grid/nine-grid.vue

@@ -10,13 +10,9 @@
     <view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
 
 
-
     <!-- 九宫格抽奖组件 -->
-    <LotteryGrid :prizesObj="prizesObj" :remain-count="prizesObj.times" :is-disabled="isRotating"
-      @start="handleStartLottery" @complete="handleLotteryComplete" :targetIndex="targetIndex" />
-
-    <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
-
+    <LotteryGrid :prizesObj="prizesObj" :is-disabled="isRotating" @start="handleStartLottery"
+      @complete="handleLotteryComplete" :targetIndex="targetIndex" />
 
     <!-- 规则 -->
     <view class="rule">
@@ -24,8 +20,6 @@
       <view class="rule_content" v-html="prizesObj.ruleDescr"></view>
     </view>
 
-
-
     <!-- 中奖结果弹窗 -->
     <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
   </view>
@@ -103,13 +97,10 @@ export default {
         id: this.prizesObj.id,
         times: num,
       }
-      const result = await raffleExecute(params);
-      let runCount = null;
-      if (result && result.bizcode === 100) {
+      const { data } = await raffleExecute(params);
+      this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0].id);
 
-        this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === result.data[0].id);
-
-        this.currentPrize = result.data;
+      this.currentPrize = data.prizeList;
       console.log("0------", this.currentPrize)
 
       // 减少抽奖次数并标记为正在抽奖
@@ -117,14 +108,9 @@ export default {
       this.isRotating = true
 
       const total = this.prizesObj.times;
-        const data = result.data;
-        this.lotteryList = data;// 中奖列表
       this.prizesObj.times = total - num;// 减去次数
-
-      }
-
-
     },
+
     /**
      * 处理抽奖完成事件
      * @param {Object} prize - 中奖奖品
@@ -185,21 +171,6 @@ export default {
 
 }
 
-.coiled-lottery {
-  width: 670rpx;
-  height: 88rpx;
-  background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
-  box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
-  border-radius: 44rpx;
-  margin: 120rpx auto 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  font-size: 32rpx;
-  color: #FFFFFF;
-}
-
 .rule {
   width: 670rpx;
   background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);