yfs/components/detail-lucky

老虎机抽奖组件使用指南

组件简介

本组件是一个整合了1列、3列和5列老虎机功能的抽奖组件，可根据传入的参数动态切换不同列数的老虎机模式。

使用方法

1. 引入组件

import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";

export default {
  components: { 
    DetailLucky 
  }
}

2. 在模板中使用

<template>
  <DetailLucky ref="luckySlot" :mode="3"></DetailLucky>
</template>

3. 组件属性

属性名	类型	默认值	说明
mode	Number/String	1	老虎机模式，可选值：1, 3, 5

4. 组件方法

初始化老虎机

// 初始化老虎机，传入奖品列表和模式
this.$refs.luckySlot.init(prizeList, mode);

// 例如：初始化3列老虎机
this.$refs.luckySlot.init(myPrizes, 3);

// 也可以仅传入奖品列表，使用组件默认的模式
this.$refs.luckySlot.init(myPrizes);

开始抽奖

// 开始抽奖，可选传入回调函数
this.$refs.luckySlot.startDraw(() => {
  console.log('老虎机开始旋转');
});

停止抽奖并指定中奖结果

// 停止抽奖，传入中奖索引数组
// 对于1列老虎机，传入1个索引
this.$refs.luckySlot.stopDraw([5]);

// 对于3列老虎机，传入3个索引
this.$refs.luckySlot.stopDraw([3, 2, 8]);

// 对于5列老虎机，传入5个索引
this.$refs.luckySlot.stopDraw([1, 2, 3, 4, 5]);

// 也可以不传入索引，组件会随机生成
this.$refs.luckySlot.stopDraw();

其他方法

// 强制结束抽奖
this.$refs.luckySlot.forceEndDraw();

// 隐藏老虎机
this.$refs.luckySlot.hide();

// 显示老虎机
this.$refs.luckySlot.show();

// 重置组件状态
this.$refs.luckySlot.reset();

5. 组件事件

事件名	说明	返回值
start	开始抽奖时触发	-
end	结束抽奖时触发	中奖信息对象

使用示例

<template>
  <view>
    <button @click="startLottery">开始抽奖</button>
    <DetailLucky ref="luckySlot" :mode="slotMode"></DetailLucky>
  </view>
</template>

<script>
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";

export default {
  components: { DetailLucky },
  data() {
    return {
      slotMode: 3,
      prizeList: [] // 奖品列表
    }
  },
  mounted() {
    // 获取奖品列表
    this.getPrizeList();
  },
  methods: {
    // 获取奖品列表
    async getPrizeList() {
      // 这里可以从API获取奖品列表
      this.prizeList = [...]; // 示例奖品列表
    },
    
    // 开始抽奖
    startLottery() {
      // 初始化老虎机
      this.$refs.luckySlot.init(this.prizeList, this.slotMode);
      
      // 开始抽奖
      this.$refs.luckySlot.startDraw();
      
      // 模拟3秒后停止抽奖
      setTimeout(() => {
        // 这里可以调用API获取中奖结果
        const winIndex = Math.floor(Math.random() * this.prizeList.length);
        
        // 停止抽奖并指定中奖索引
        if (this.slotMode === 1) {
          this.$refs.luckySlot.stopDraw([winIndex]);
        } else if (this.slotMode === 3) {
          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex]);
        } else {
          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex, winIndex, winIndex]);
        }
      }, 3000);
    }
  }
}
</script>

注意事项

1. 使用前必须先调用init方法初始化组件
2. 中奖索引数组的长度应与当前模式的列数匹配，如果不匹配会自动补足或截取
3. 组件高度会根据模式自动调整
4. 如果不传入奖品列表，将使用默认的奖品列表