LuckyDraw

LuckyDraw

Example one：

1元红包

100元红包

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>

显示代码

Example two：

谢谢参与

抽奖券

小元宝

抽奖券

大元宝

多元宝

抽奖券

礼物

<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>

显示代码

Example three：

开始
抽奖

<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>

显示代码

Example four：

谢谢参与

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>

显示代码

Example five：

开始
抽奖

<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>

显示代码

Example six：

开始
抽奖

<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>

显示代码

Example seven：

<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>

显示代码

Attribute

Parameter	Description	Type	Optional Value	Default Value
ref	LuckyDraw Name	String	--	--
config	config	Object	width,height,padding,fontSize,fontColor,backgroundColor,backgroundImage	--
btnConfig	btnConfig	Object	width,background,fonts,imgs	--
prizes	prizes	Array	fonts,imgs,background	--

Event

Event name	Description	Callback parameter
start	start event	--
end	end event	result index

Method

Method name	Description	parameter
play	method	which index be check

config setting

Parameter	Description	Type	Optional Value	Default Value
width	width	Number	--	--
height	height	Number	--	--
padding	padding	Number	--	--
fontSize	fontSize	String	'16px'	--
fontColor	fontColor	String	'#d64737'	--
backgroundColor	backgroundColor	String	'#d64737'	--
backgroundImage	backgroundImage	String	--	--
rotate	bg rotate	Boolean	true,false	false
rollNum	rollNum	Number	--	6

btnConfig setting

Parameter	Description	Type	Optional Value	Default Value
width	button width	Number	--	--
background	button bg	String	'#FFDCB8)'	--
fonts	button text	Array	{ text: '开始',//按钮文字 fontColor: '#1c258e',//按钮文字颜色 top: '18%',//按钮文字顶部位置 fontSize:'30px'//按钮文字大小 }	--
imgs	button imgs	Array	{ src: '/active-eat.png',//按钮图片 width: '100%',//按钮图片大小 top: '18%',//按钮图片顶部位置 }	--

prizes setting

Parameter	Description	Type	Optional Value	Default Value
background	prizes bg	String	'#1c258e'	--
fonts	prizes text	Object	{ text: '草莓蛋糕',//奖品文字 top: '18%',//奖品文字顶部位置 }	--
imgs	prizes imgs	Object	{ src:'/img/default-eat.png',//奖品图片 width:'100%',//奖品图片宽度 top:'0%'//奖品图片顶部位置 }	--