【vue uniapp 小程序抽奖转盘老虎机和九宫格】

vue uniapp 小程序抽奖转盘老虎机和九宫格

1.npm 下载插件

# npm 安装
npm install @lucky-canvas/vue@latest

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

2. 然后找到 main.js 引入插件并 use

// vue2完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

//vue3 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
createApp(App).use(VueLuckyCanvas).mount('#app')

3.在页面中使用

<template>
	<view style="border: 1px solid blue;">
		<LuckyGrid
			ref="myLucky"
			width="600rpx" //九宫格宽度
			height="600rpx" //九宫格高度
			:blocks="blocks" //九宫格外圈样式背景
			:prizes="prizes" // 九宫格奖品列表
			:buttons="buttons"  //九宫格按钮
			@start="startCallBack" //开始抽奖事件
			@end="endCallBack" //结束抽奖事件
		/>
	</view>
</template>

<script>
import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'; // 引入九宫格插件
export default {
	components: { LuckyGrid },
	data() {
		return {
			blocks: [{ padding: '10px', background: '#869cfa' }, { padding: '10px', 
            background: '#e9e8fe' }],
			prizes: [
				{ x: 0, y: 0, range: 0, fonts: [{ text: '0', top: '35%' }], imgs: [{ src: 
                require('../../static/image/rose.png'), width: '50%', top: '22%' 
                }],background: '#E77697' },
				{ x: 1, y: 0, range: 0, fonts: [{ text: '现金200元', top: 
                '70%',fontColor: '#fff', fontSize: '24rpx' },], imgs: [{ src: 
                require('../../static/image/money.png'), width: '70%', top: '22%' 
                }],background: '#E77697' },
				{ x: 2, y: 0, range: 0, fonts: [{ text: '2', top: '35%' }],background: 
                '#E77697' },
				{ x: 2, y: 1, range: 0, fonts: [{ text: '3', top: '35%' }],background: 
                '#E77697' },
				{ x: 2, y: 2, range: 0, fonts: [{ text: '4', top: '35%' }],background: 
                '#E77697'  },
				{ x: 1, y: 2, range: 10, fonts: [{ text: '5', top: '35%' }],background: 
                '#E77697'  },
				{ x: 0, y: 2, range: 0, fonts: [{ text: '6', top: '35%' }],background: 
                '#E77697'  },
				{ x: 0, y: 1, range: 0, fonts: [{ text: '7', top: '35%' }] ,background: 
                '#E77697' }
			     ],
			   buttons: [
				{
					x: 1,
					y: 1,
					background: '#7f95d1',
					fonts: [{ text: '开始', top: '35%' }],
					imgs: [{ src: require('../../static/image/rose.png'), width: '50%', 
                   top: '22%' }]
				}
			],
			
		};
	},
	methods: {
		// 点击抽奖按钮触发回调
		startCallBack(e, button) {
			// 先开始旋转
			// 先开始旋转
			console.log('1-----------', this.$refs);
			this.$refs.myLucky.play();
			// 使用定时器来模拟请求接口
			setTimeout(() => {
				// 假设后端返回的中奖索引是0
				const index = 0;
				// 调用stop停止旋转并传递中奖索引
				// this.$refs.myLucky.stop(index)
				this.$refs.myLucky.stop();
			}, 3000);
		},
		// 抽奖结束触发回调
		endCallBack(prize) {
			// 奖品详情
			alert('恭喜中奖: ' + prize.fonts[0].text);
		}
	}
};
</script>
<style lang="less"></style>

4.老虎机demo

<template>
	<view>
		<view style="border: 1px solid blue;">
		  <SlotMachine  
			  ref="myLucky"
		    width="240px"
		    height="180px"
		    :blocks="blocks"
		    :slots="slots"
			  :prizes="prizes"
			  :defaultStyle="defaultStyle"
		    :defaultConfig="defaultConfig"
			  @end="endCallBack"
		  />
		</view>
		<view>
			  <button @click="startCallBack()">开始</button>
		</view>
		
		
		<view @click="endClick()" style="margin-top: 30px;">
			<button>结束</button>
		</view>
	</view>
</template>

<script>
  import SlotMachine from '@/components/@lucky-canvas/uni/slot-machine' // 老虎机
  export default {
    components: { SlotMachine },
    data () {
      return {
        blocks: [
              { padding: '10px', background: '#869cfa' },
              { padding: '10px', background: '#e9e8fe' },
            ],
		slots: [
		  { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
		  { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
		  { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
		],
		prizes: [
		  { fonts: [{ text: '0', top: '15%' }]},
			{ fonts: [{ text: '1', top: '15%' }] },
			{ fonts: [{ text: '2', top: '15%' }] },
			{ fonts: [{ text: '3', top: '15%' }] },
			{ fonts: [{ text: '4', top: '15%' }] },
			{ fonts: [{ text: '5', top: '15%' }] },
			{ fonts: [{ text: '6', top: '15%' }] },
			{ fonts: [{ text: '7', top: '15%' }] },
			{ fonts: [{ text: '8', top: '15%' }] },
			{ fonts: [{ text: '9', top: '15%' }] },
		],
		defaultStyle: {
		  borderRadius: Infinity,
		  background: '#bac5ee',
		  fontSize: '32px',
		  fontColor: '#333'
		},
		defaultConfig: {
		  rowSpacing: '25px',
		  colSpacing: '10px'
		}
      }
    },
	onLoad() {
		
	},
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
			// 先开始旋转
			this.$refs.myLucky.play()
			// setTimeout(() => {
			//   // 假设后端返回的中奖索引是0
			//   const index = [5,7,1]
			//   // 调用stop停止旋转并传递中奖索引
			//   this.$refs.myLucky.stop(index)
			// }, 3000)
      },
	  endClick(){
		  const index = [2,3,8]
		  // 调用stop停止旋转并传递中奖索引
		  this.$refs.myLucky.stop(index)
	  },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
		console.log('---------中奖的：',prize)
        // alert('恭喜中奖: '+ prize.fonts[0].text)
      }
    }
  }
</script>

5.大转盘demo

<template>
  <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>

<script>
export default {
  data () {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>

7.关于更多配置可以查看插件官方网站

在 Vue 中使用 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件