feat: 九宫格完成

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

@@ -12,15 +12,14 @@
     <view class="grid-item" v-for="(item, index) in 9" :key="index">
       <!-- 中间格子作为抽奖按钮 (索引4) -->
       <template v-if="index === 4">
-        <view class="lottery-btn" @click="handleStartClick">
-          <text>{{ isRotating ? '抽奖中...' : '开始抽奖' }}</text>
-        </view>
+        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
+          @click="handleStartClick"></image>
       </template>
 
       <!-- 其他8个奖品格子 -->
       <template v-else>
-        <image :src="prizes[index].img" class="prize-img" mode="widthFix"></image>
-        <text class="prize-name">{{ prizes[index].name }}</text>
+        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img" mode="widthFix"></image>
+        <text class="prize-name">{{ prizesObj.prizes[index]?.name }}</text>
       </template>
     </view>
   </view>
@@ -30,15 +29,20 @@
 export default {
   props: {
     // 奖品数据数组
-    prizes: {
-      type: Array,
+    prizesObj: {
+      type: Object,
       required: true,
-      default: () => []
+      default: () => ({ prizes: [] })
     },
     // 是否禁用抽奖
     isDisabled: {
       type: Boolean,
       default: false
+    },
+    // 指定停止的位置索引 (0-7)
+    targetIndex: {
+      type: Number,
+      default: null
     }
   },
   data() {
@@ -66,8 +70,8 @@ export default {
     moveHighlight(index) {
       const row = Math.floor(index / 3) // 计算行
       const col = index % 3 // 计算列
-      this.highlightTop = `${row * 200}rpx`
-      this.highlightLeft = `${col * 200}rpx`
+      this.highlightTop = `${row * 202}rpx`
+      this.highlightLeft = `${col * 202}rpx`
     },
     /**
      * 执行抽奖动画
@@ -113,7 +117,7 @@ export default {
         this.isRotating = false
         this.animationTimer = null
         // 触发抽奖完成事件，返回中奖奖品
-        this.$emit('complete', this.prizes[this.LOTTERY_PATH[nextStep]])
+        this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]])
         return
       }
 
@@ -128,6 +132,18 @@ export default {
         })
       }, nextSpeed)
     },
+    /**
+     * 获取目标位置
+     * @returns {number} 目标位置索引
+     */
+    getTargetStep() {
+      // 如果传入了targetIndex，则使用传入的值
+      if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) {
+        return this.targetIndex
+      }
+      // 否则随机生成目标位置（带权重）
+      return this.getRandomTarget()
+    },
     /**
      * 随机生成目标位置（带权重）
      * @returns {number} 目标位置索引
@@ -158,7 +174,7 @@ export default {
       }
 
       // 通知父组件开始抽奖
-      this.$emit('start')
+      this.$emit('start', 1)
 
       // 开始抽奖动画（无论父组件做了什么处理）
       this.startLotteryAnimation()
@@ -177,7 +193,7 @@ export default {
       this.runAnimation({
         currentStep: 0,
         speed: this.INITIAL_SPEED,
-        targetStep: this.getRandomTarget(),
+        targetStep: this.getTargetStep(),
         cycleCount: 0,
         totalSteps: 0
       })
@@ -195,34 +211,36 @@ export default {
 
 <style scoped>
 .lottery-grid {
-  width: 600rpx;
-  height: 600rpx;
+  width: 615rpx;
+  height: 605rpx;
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  border: 8rpx solid #ffc107;
   border-radius: 16rpx;
-  background-color: #fff;
+  background-color: transparent;
   box-sizing: content-box;
-  margin: 0 auto;
+  margin: 45rpx 0 0 10rpx;
 }
 
 .grid-item {
-  width: 200rpx;
-  height: 200rpx;
+  width: 203rpx;
+  height: 194rpx;
   box-sizing: border-box;
-  border: 2rpx solid #ffeeba;
+  border: 8rpx solid #FF4646;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   flex-shrink: 0;
+  background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%);
+  box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5);
+  border-radius: 20rpx;
 }
 
 .lottery-btn {
-  width: 180rpx;
-  height: 180rpx;
+  width: 203rpx;
+  height: 194rpx;
   background: linear-gradient(135deg, #ff5252 0%, #e63946 100%);
   border-radius: 50%;
   display: flex;
@@ -251,6 +269,12 @@ export default {
   margin-bottom: 10rpx;
 }
 
+.prize-img-button {
+  width: 100%;
+  height: 100%;
+
+}
+
 .prize-name {
   font-size: 26rpx;
   color: #333;
@@ -264,13 +288,17 @@ export default {
 .highlight-box {
   position: absolute;
   width: 200rpx;
-  height: 200rpx;
+  height: 194rpx;
   box-sizing: border-box;
-  border: 6rpx solid #ff4081;
-  background-color: rgba(255, 64, 129, 0.1);
+  border: 6rpx solid #FFDAB2;
+  background-color: rgba(255, 64, 129, 0.4);
   z-index: 1;
   pointer-events: none;
+  border-radius: 20rpx;
   /* 增加高亮动画效果 */
-  box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5);
+  /* box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5); */
+
+  /* background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); */
+  box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5);
 }
 </style>