在这里插入图片描述
安装插件
HBuilderX 导入插件: https://ext.dcloud.net.cn/plugin?id=3499
npm 安装:npm install @lucky-canvas/uni
yarn 安装:yarn add @lucky-canvas/uni
直接上代码
<view class="SlotMachine">
<SlotMachine
ref="SlotMachine"
width="550rpx"
height="270rpx"
:blocks="blocks"
:prizes="prizes"
:slots="slots"
:defaultConfig="defaultConfig"
@end='endCallBack'
/>
</view>
import SlotMachine from '@/components/@lucky-canvas/uni/slot-machine' // 老虎机
data() {
return {
blocks: [{ padding: '13px'}],
slots: [//order里为奖品下标 --依次展示的顺序,speed为转速
{ speed: 5 ,order:[1,2,3,4,0]},//第一列奖品展示数据
{ speed: 3 ,order:[2,3,4,0,1]},//第二列奖品展示数据
{ speed: 5 ,order:[3,4,0,1,2]},//第三列奖品展示数据
],
prizes: [
{nam: '50MB',imgs: [{src: require('../../../static/active/lhj/img-50mb.png')}]},//0
{nam: '10分钟通话',imgs: [{src: require('../../../static/active/lhj/img-th10f.png')}]},//1
{nam: '100金币',imgs: [{src: require('../../../static/active/lhj/img-100jb.png')}]},//2
{nam: '10金币',imgs: [{src: require('../../../static/active/lhj/img-10jb.png')}]},//3
{nam: 'mmd',imgs: [{src: require('../../../static/active/lhj/img-mmd.png')}]},//4
],
defaultConfig:{
rowSpacing: '50rpx',
},
}
},
components: {
SlotMachine,
},
that.$refs.SlotMachine.play() //组件开始旋转
let priceIndex = 0//中奖对应的奖品下标
setTimeout(() => {
// 假设后端返回的中奖索引是0
// 调用stop停止旋转并传递中奖索引
that.$refs.SlotMachine.stop(priceIndex-0);//stop-停止的位置
}, 3000)
// 抽奖结束触发回调
endCallBack (prize) {
// 奖品详情
prize为中奖的奖品信息
}
如需要不同奖品池的切换时 可以把奖品都放进prizes数组里 在slots数组里面修改需要渲染奖品的下标即可,如
this.slots= [ //渲染奖品池下标为2,3,4的奖品
{ speed: 5 ,order:[3,4,2]},
{ speed: 3 ,order:[4,2,3]},
{ speed: 5 ,order:[2,3,4]},
]