抽奖组件（老虎机）lucky-canvas组件

在这里插入图片描述

安装插件
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]},			
		    ]