164 lines
3.7 KiB
Markdown
164 lines
3.7 KiB
Markdown
# 老虎机抽奖组件使用指南
|
||
|
||
## 组件简介
|
||
|
||
本组件是一个整合了1列、3列和5列老虎机功能的抽奖组件，可根据传入的参数动态切换不同列数的老虎机模式。
|
||
|
||
## 使用方法
|
||
|
||
### 1. 引入组件
|
||
|
||
```vue
|
||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||
|
||
export default {
|
||
components: {
|
||
DetailLucky
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 在模板中使用
|
||
|
||
```vue
|
||
<template>
|
||
<DetailLucky ref="luckySlot" :mode="3"></DetailLucky>
|
||
</template>
|
||
```
|
||
|
||
### 3. 组件属性
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|-------|------|-------|------|
|
||
| mode | Number/String | 1 | 老虎机模式，可选值：1, 3, 5 |
|
||
|
||
### 4. 组件方法
|
||
|
||
#### 初始化老虎机
|
||
|
||
```js
|
||
// 初始化老虎机，传入奖品列表和模式
|
||
this.$refs.luckySlot.init(prizeList, mode);
|
||
|
||
// 例如：初始化3列老虎机
|
||
this.$refs.luckySlot.init(myPrizes, 3);
|
||
|
||
// 也可以仅传入奖品列表，使用组件默认的模式
|
||
this.$refs.luckySlot.init(myPrizes);
|
||
```
|
||
|
||
#### 开始抽奖
|
||
|
||
```js
|
||
// 开始抽奖，可选传入回调函数
|
||
this.$refs.luckySlot.startDraw(() => {
|
||
console.log('老虎机开始旋转');
|
||
});
|
||
```
|
||
|
||
#### 停止抽奖并指定中奖结果
|
||
|
||
```js
|
||
// 停止抽奖，传入中奖索引数组
|
||
// 对于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();
|
||
```
|
||
|
||
#### 其他方法
|
||
|
||
```js
|
||
// 强制结束抽奖
|
||
this.$refs.luckySlot.forceEndDraw();
|
||
|
||
// 隐藏老虎机
|
||
this.$refs.luckySlot.hide();
|
||
|
||
// 显示老虎机
|
||
this.$refs.luckySlot.show();
|
||
|
||
// 重置组件状态
|
||
this.$refs.luckySlot.reset();
|
||
```
|
||
|
||
### 5. 组件事件
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|-------|------|-------|
|
||
| start | 开始抽奖时触发 | - |
|
||
| end | 结束抽奖时触发 | 中奖信息对象 |
|
||
|
||
### 使用示例
|
||
|
||
```vue
|
||
<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. 如果不传入奖品列表，将使用默认的奖品列表 |