HaniBlindBox/honey_box/pages/shouye/prize-wheel-demo.vue

<template>
  <page-container title="抽奖特效演示" :showBack="true">
    <view class="demo-container">
      <view class="prize-wheel-wrapper">
        <prize-wheel 
          ref="prizeWheel"
          :prizes="prizes"
          :duration="4"
          :bufferCount="3"
          :itemWidth="itemWidth"
          :itemHeight="itemHeight"
          @spin-start="onSpinStart"
          @spin-end="onSpinEnd">
          <!-- 自定义奖品插槽（可选） -->
          <template v-slot="{item}">
            <view class="custom-prize" :style="{ backgroundColor: item.bgColor }">
              <text :style="{ color: item.color }">{{item.value}}</text>
            </view>
          </template>
        </prize-wheel>
      </view>
      
      <view class="control-panel">
        <button class="start-btn" @click="startLottery" :disabled="isSpinning">开始抽奖</button>
        
        <view class="result-display" v-if="prizeResult">
          <text class="result-label">抽奖结果:</text>
          <text class="result-value" :style="{ color: prizeResult.color }">{{prizeResult.value}}</text>
        </view>
      </view>
    </view>
  </page-container>
</template>

<script>
import PrizeWheel from '@/components/prize-wheel/prize-wheel.vue'

export default {
  components: {
    PrizeWheel
  },
  data() {
    return {
      // 奖品列表
      prizes: [
        { id: 1, value: '一等奖', color: '#ff0000', bgColor: 'rgba(255,0,0,0.1)' },
        { id: 2, value: '二等奖', color: '#00ff00', bgColor: 'rgba(0,255,0,0.1)' },
        { id: 3, value: '三等奖', color: '#0000ff', bgColor: 'rgba(0,0,255,0.1)' },
        { id: 4, value: '四等奖', color: '#ffff00', bgColor: 'rgba(255,255,0,0.1)' },
        { id: 5, value: '五等奖', color: '#ff00ff', bgColor: 'rgba(255,0,255,0.1)' },
        { id: 6, value: '六等奖', color: '#00ffff', bgColor: 'rgba(0,255,255,0.1)' },
        { id: 7, value: '七等奖', color: '#ff8800', bgColor: 'rgba(255,136,0,0.1)' },
        { id: 8, value: '八等奖', color: '#888888', bgColor: 'rgba(136,136,136,0.1)' },
        { id: 9, value: '谢谢参与', color: '#333333', bgColor: 'rgba(51,51,51,0.1)' }
      ],
      isSpinning: false,
      prizeResult: null,
      itemWidth: uni.upx2px(170),
      itemHeight: uni.upx2px(150)
    }
  },
  methods: {
    // 开始抽奖
    startLottery() {
      if (this.isSpinning) return
      
      this.isSpinning = true
      this.prizeResult = null
      
      // 启动抽奖动画
      this.$refs.prizeWheel.startSpin()
      
      // 模拟异步获取抽奖结果
      // 实际应用中应该调用后端API获取结果
      setTimeout(() => {
        // 随机选择一个奖品（真实场景中应该使用后端返回的结果）
        const randomIndex = Math.floor(Math.random() * this.prizes.length)
        const result = this.prizes[randomIndex]
        
        // 设置最终奖品并开始停止动画
        this.$refs.prizeWheel.setPrize(result)
      }, 2000) // 2秒后获取结果
    },
    
    // 抽奖开始回调
    onSpinStart() {
      console.log('抽奖开始')
      // 播放背景音乐或其他操作
      uni.showToast({
        title: '抽奖开始',
        icon: 'none'
      })
    },
    
    // 抽奖结束回调
    onSpinEnd(prize) {
      console.log('抽奖结束', prize)
      this.isSpinning = false
      this.prizeResult = prize
      
      // 显示结果
      uni.showToast({
        title: `恭喜获得: ${prize.value}`,
        icon: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss">
.demo-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-image: url($imgurl + 'common/slot_bg.webp');
  background-size: cover;
  background-position: center;
  
  .prize-wheel-wrapper {
    width: 100%;
    padding: 40rpx 0;
    background-image: url($imgurl + 'common/slot1.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 40rpx;
  }
  
  .control-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    
    .start-btn {
      width: 300rpx;
      height: 90rpx;
      background: linear-gradient(to right, #ff5a5f, #ff8a5f);
      color: white;
      border-radius: 45rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 10rpx rgba(255, 90, 95, 0.3);
      
      &:active {
        transform: scale(0.98);
      }
      
      &[disabled] {
        background: #cccccc;
        color: #888888;
      }
    }
    
    .result-display {
      margin-top: 20rpx;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20rpx 40rpx;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .result-label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }
      
      .result-value {
        font-size: 40rpx;
        font-weight: bold;
      }
    }
  }
  
  .custom-prize {
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    
    text {
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
</style>