LuckyDraw 大转盘抽奖

大转盘抽奖 Demo

大转盘抽奖 Demo：

1元红包1

100元红包1

0.5元红包

2元红包

10元红包

50元红包

0.3元红包

5元红包

开始

消费10积分

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  {fonts:{text:'1元红包',top:'80%'}, imgs: {src:'/img/zp-0.png',width:'25%',top:'70%'},background:'#f9e3bb'},
                  {fonts:{text:'100元红包',top:'80%'},imgs: {src:'/img/zp-1.png',width:'25%',top:'70%'},background:'#f8d384'},
                  {fonts:{text:'0.5元红包',top:'80%'},imgs: {src:'/img/zp-2.png',width:'25%',top:'70%'},background:'#f9e3bb'},
                  {fonts:{text:'2元红包',top:'80%'},imgs: {src:'/img/zp-3.png',width:'25%',top:'70%'},background:'#f8d384'},
                  {fonts:{text:'10元红包',top:'80%'},imgs: {src:'/img/zp-4.png',width:'25%',top:'70%'},background:'#f9e3bb'},
                  {fonts:{text:'50元红包',top:'80%'},imgs: {src:'/img/zp-5.png',width:'25%',top:'70%'},background:'#f8d384'},
                  {fonts:{text:'0.3元红包',top:'80%'},imgs: {src:'/img/zp-6.png',width:'25%',top:'70%'},background:'#f9e3bb'},
                  {fonts:{text:'5元红包',top:'80%'},imgs: {src:'/img/zp-7.png',width:'25%',top:'70%'},background:'#f8d384'}
                ],
               config:{                
                 width:350,
                 height:350,
                 padding:20,
                 fontSize:'16px',
                 fontColor:'#d64737',
                 backgroundColor: '#d64737',             
               },
               btnConfig:{                   
                width:'80',
                background: '#d64737',
                fonts: [
                  { text: '开始', fontColor: '#fff', top: '50%', fontSize: '25px' },
                  { text: '消费10积分', fontColor: '#fff', top: '25%', fontSize: '11px' },
                ]                  
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

仿抽奖乐大转盘：

谢谢参与

抽奖券

小元宝

抽奖券

大元宝

多元宝

抽奖券

礼物

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  {fonts:{text:'谢谢参与',top:'80%'}, imgs: {src:'/img/zp1_p0.png',width:'20%',top:'70%'},background:'#d7d7d7'},
                  {fonts:{text:'抽奖券',top:'80%'},imgs: {src:'/img/zp1_p1.png',width:'60%',top:'70%'},background:'#fef43e'},
                  {fonts:{text:'小元宝',top:'80%'},imgs: {src:'/img/zp1_p2.png',width:'60%',top:'70%'},background:'#ef7683'},
                  {fonts:{text:'抽奖券',top:'80%'},imgs: {src:'/img/zp1_p1.png',width:'60%',top:'70%'},background:'#d7d7d7'},
                  {fonts:{text:'大元宝',top:'80%'},imgs: {src:'/img/zp1_p3.png',width:'60%',top:'70%'},background:'#fef43e'},
                  {fonts:{text:'多元宝',top:'80%'},imgs: {src:'/img/zp1_p4.png',width:'60%',top:'70%'},background:'#ef7683'},
                  {fonts:{text:'抽奖券',top:'80%'},imgs: {src:'/img/zp1_p1.png',width:'60%',top:'70%'},background:'#d7d7d7'},
                  {fonts:{text:'礼物',top:'80%'},imgs: {src:'/img/zp1_p5.png',width:'60%',top:'70%'},background:'#fef43e'}
                ],
               config:{                
                 width:350,
                 height:350,
                 padding:30,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp1_bg.png'            
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                imgs: [
                  { src: '/img/zp1_btn1.png', width: '50%', top: '60%'}
                ]                  
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

仿携程转盘抽奖：

开始
抽奖

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [                  
                  { name: '明天再来' },
                  { name: '免费早餐' },
                  { name: '延迟退房' },
                  { name: '免费取消' },
                  { name: '房型升级' },
                   { name: '免费住酒店' },
                  ],
               config:{                
                 width:350,
                 height:350,
                 padding:0,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp2_bg.png',
                 rotate: true          
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                fonts: [
                  { text: '开始\n抽奖', fontColor: '#fff', top: '45%', fontSize: '18px' }
                ], 
                imgs: [
                  { src: '/img/zp2_btn1.png', width: '50%', top: '50%'}
                ]                 
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

仿京东大转盘抽京豆：

谢谢参与

1个京豆

5个京豆

10个京豆

15个京豆

20个京豆

25个京豆

30个京豆

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  {fonts:{text:'谢谢参与',top:'85%'}, imgs: {src:'/img/zp3_p0.png',width:'50%',top:'75%'},background:'#FEF3FC'},
                  {fonts:{text:'1个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#F8DEF8'},
                  {fonts:{text:'5个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#FEF3FC'},
                  {fonts:{text:'10个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#F8DEF8'},
                  {fonts:{text:'15个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#FEF3FC'},
                  {fonts:{text:'20个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#F8DEF8'},
                  {fonts:{text:'25个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#FEF3FC'},
                  {fonts:{text:'30个京豆',top:'85%'},imgs: {src:'/img/zp3_p1.png',width:'50%',top:'75%'},background:'#F8DEF8'}
                  ],
               config:{                
                 width:350,
                 height:350,
                 padding:40,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp3_bg.png',       
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                imgs: [
                  { src: '/img/zp3_btn1.png', width: '50%', top: '50%'},
                  { src: '/img/zp3_btn2.png', width: '50%', top: '92%'}
                ]                 
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

随意制作抽奖：

开始
抽奖

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  { name: '苹果手机' },
                  { name: '现金折扣券' },
                  { name: '手表' },
                  { name: '现金折扣券' },
                  { name: '电压力锅' },
                  { name: '现金折扣券' } ,
                  { name: '破壁机' },
                  { name: '现金折扣券' }
                  ],
               config:{                
                 width:350,
                 height:350,
                 padding:0,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp4_bg.png',
                 rotate: true          
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                fonts: [
                  { text: '开始\n抽奖', fontColor: '#fff', top: '45%', fontSize: '18px' }
                ], 
                imgs: [
                  { src: '/img/zp4_btn1.png', width: '50%', top: '50%'}
                ]                 
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

游戏网站抽奖：

开始
抽奖

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  { name: 'ipad2' },
                  { name: '九阳豆浆机' },
                  { name: '七天蓝钻' },
                  { name: '1魅力值' },
                  { name: '七天绝版黑桃A' },
                  { name: '10000欢乐豆' } ,
                  { name: '10Q币' },
                  { name: '24小时记牌卡' }
                  ],
               config:{                
                 width:350,
                 height:350,
                 padding:0,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp6_bg.png',
                 rotate: true          
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                fonts: [
                  { text: '开始\n抽奖', fontColor: '#fff', top: '45%', fontSize: '18px' }
                ]                
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

移动网站抽奖：

<lee-luck-draw ref="LuckDraw" :config="config" :prizes="prizes" :btnConfig="btnConfig" @start="startCallBack"
    @end="endCallBack"></lee-luck-draw>  

<script>
    export default {
        data() {
              return {
               luckyNum:3,
               prizes: [
                  { name: '爱奇艺会员' },
                  { name: 'iphone6s' },
                  { name: '充电宝' },
                  { name: '25元代金券' },
                  { name: '2元代金券' },
                  { name: '10M流量' } ,
                  { name: '50M流量' },
                  { name: '50元话费卡' },
                  { name: '100元话费卡' },
                  { name: '500京东卡' }
                  ],
               config:{                
                 width:350,
                 height:350,
                 padding:0,
                 fontSize:'14px',
                 fontColor:'#000',
                 backgroundColor: 'rgba(0, 0, 0, 0)',
                 backgroundImage:'/img/zp6_bg.png',
                 rotate: true          
               },
               btnConfig:{                   
                width:'92',
                background: 'rgba(0,0,0,0)',
                fonts: [
                  { text: '开始\n抽奖', fontColor: '#fff', top: '45%', fontSize: '18px' }
                ], 
                imgs: [
                  { src: '/img/zp4_btn1.png', width: '50%', top: '50%'}
                ]                 
               },
              }
          },
          methods:{
            startCallBack(){
              if (!this.luckyNum) return alert('还剩0次抽奖机会')
              this.$refs.LuckDraw.play(Math.ceil(Math.random() * this.prizes.length))
            },
            endCallBack(inx){
              alert(`恭喜你获得大奖: ${this.prizes[inx].fonts.text}`)
              this.luckyNum--
            }
          }
    }
</script>

显示代码

LuckyDraw 属性

参数	说明	类型	可选值	默认值
ref	转盘名	String	--	--
config	配置转盘	Object	width,height,padding,fontSize,fontColor,backgroundColor,backgroundImage	--
btnConfig	配置按钮	Object	width,background,fonts,imgs	--
prizes	配置礼品	Array	fonts,imgs,background	--

LuckyDraw 事件

事件名称	说明	回调参数
start	开始抽奖事件	--
end	抽奖结束事件	中奖索引

LuckyDraw 方法

方法名称	说明	参数
play	抽奖方法	抽中那个索引

config 设置

参数	说明	类型	可选值	默认值
width	转盘宽度	Number	--	--
height	转盘高度	Number	--	--
padding	转盘内边距	Number	--	--
fontSize	转盘字号	String	'16px'	--
fontColor	字体颜色	String	'#d64737'	--
backgroundColor	转盘背景颜色	String	'#d64737'	--
backgroundImage	转盘背景图	String	--	--
rotate	背景转动	Boolean	true,false	false
rollNum	旋转次数	Number	--	6

btnConfig 设置

参数	说明	类型	可选值	默认值
width	按钮大小	Number	--	--
background	按钮背景色	String	'#FFDCB8)'	--
fonts	按钮文字	Array	{ text: '开始',//按钮文字 fontColor: '#1c258e',//按钮文字颜色 top: '18%',//按钮文字顶部位置 fontSize:'30px'//按钮文字大小 }	--
imgs	按钮图片	Array	{ src: '/active-eat.png',//按钮图片 width: '100%',//按钮图片大小 top: '18%',//按钮图片顶部位置 }	--

prizes 设置

参数	说明	类型	可选值	默认值
background	格子背景颜色	String	'#1c258e'	--
fonts	奖品文字设置	Object	{ text: '草莓蛋糕',//奖品文字 top: '18%',//奖品文字顶部位置 }	--
imgs	奖品图片设置	Object	{ src:'/img/default-eat.png',//奖品图片 width:'100%',//奖品图片宽度 top:'0%'//奖品图片顶部位置 }	--