vue uniapp 小程序抽奖转盘老虎机和九宫格
1.npm 下载插件
# npm 安装
npm install @lucky-canvas/vue@latest
# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest2. 然后找到 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 的【大转盘 & 九宫格 & 老虎机】抽奖插件
7126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
