vue 方式实现九宫格抽奖效果

<template>
    <view class="content">
        <view class="lottery-grid">
            <view
              class="grid-item"
              v-for="(item, index) in gridItems"
              :key="index"
              :class="{ active: index === activeIndex }"
            >
              <text v-if="index !== 4">{{ item }}</text>
              <button v-else @tap="startLottery">抽奖</button>
            </view>
          </view>
    </view>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                 gridItems: ['奖品1', '奖品2', '奖品3', '奖品4', '抽奖', '奖品5', '奖品6', '奖品7', '奖品8'],
                       activeIndex: -1,
                       isRunning: false,
                       sequence: [0, 1, 2, 5, 8, 7, 6, 3] // 顺时针旋转顺序
            };
        },
        async onLoad() {
        },
        async onShow() {
            
        },
        onHide() {
        },
        mounted() {
        },
        created() {
        },
        methods: {
            startLottery() {
                  if (this.isRunning) return;
                  this.isRunning = true;
                  let count = 0;
                  const totalSteps = Math.floor(Math.random() * 20) + 30; // 随机步数
                  const interval = setInterval(() => {
                    this.activeIndex = this.sequence[count % this.sequence.length];
                    count++;
                    if (count >= totalSteps) {
                      clearInterval(interval);
                      this.isRunning = false;
                      // 这里可以添加中奖后的逻辑
                      console.log('中奖:', this.gridItems[this.activeIndex]);
                    }
                  }, 100 - Math.floor(count / totalSteps * 80)); // 从快速到慢速
                }
        },
    };
</script>

<style lang="scss" scoped>
    .content {
        .lottery-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10rpx;
          width: 300rpx;
          margin: 0 auto;
          padding: 20rpx;
          background: linear-gradient(135deg, #e0eafc, #cfdef3);
          border-radius: 20rpx;
          box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
        }
        
        .grid-item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100rpx;
          background: #fff;
          border-radius: 10rpx;
          box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
          font-size: 24rpx;
          color: #333;
          transition: background 0.3s;
        }
        
        .grid-item.active {
          background: #ffcc00;
          color: #fff;
          box-shadow: 0 0 10rpx rgba(255, 204, 0, 0.5);
        }
        
        button {
          width: 80rpx;
          height: 80rpx;
          background: #ff5722;
          color: #fff;
          border: none;
          font-size: 20rpx;
          cursor: pointer;
          outline: none;
          box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
          line-height: 40rpx;
        }
    }
</style>