vue抽奖效果Demo

只做了简单的抽奖效果，没有给出弹框和中奖提示

    
    
    
    
    
    


    

        

            

                
                
{{item.text}}
            
            
        
        
        

            立即抽奖
        
    

效果图;\

下面的代码是我平时做项目的时候写的代码，数据是从后台获取的，由于id的特殊性，所以中奖位置我做了一些调整，

data:{
                times: 1 ,  //转动次数
                indexs: -1 ,  //滚动下标
                cycle:50,    //基本转动次数
                speed:200,      //转动速度
}   
下面是methods中的方法

startRoll:function(){  //开始滚动
                    var that = this,
                        _this = this;
                    if (_this.on_load == 1) return;
                    that.Roll();
                    that.times += 1;  // 转动次数
                    if(that.times > that.cycle + 10){
                        clearTimeout(this.timer);      //清除定时器
                        that.times = 0 ;
                    }else{
                        if(that.times < this.cycle){
                            this.speed -=10;   //加快转动速度
                        }else if(that.times >= that.cycle ){ 
                            this.speed += 20;
                            _this.on_load = 1;
                            $.post("{{:url('lotteryProcessHandle')}}", function (res) {
                                switch (parseInt(res.code)) {
                                    case 0:
                                        that.prizes(res.data.id);   
                                        _this.user_info.luckydraw_times;
                                        if (parseInt(res.data.reward_category) == 0) layerMsg(res.msg, 5, 3000, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        else layerMsg(res.msg, 1, 3000, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        break;
                                    default:
                                        layerMsg(res.msg, 5, 1500, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        break;
                                }
                            });

                            /**
                             * 重置参数
                             */
                            _this.times = 1;
                            _this.indexs = -1;
                            _this.speed = 200;
                        }
                        if(that.speed <40) that.speed = 40;
                        this.timer = setTimeout(this.startRoll,this.speed);
                    }
                },
                Roll:function(){   //滚动函数
                    var _this = this;
                    var index = _this.indexs;
                    var count = _this.lotteryItem.length;
                    index += 1;
                    if(index > count -1) index = 0;
                    _this.indexs = index;
                },
                prizes:function(id){
                    var that = this,
                        datas = that.lotteryItem;
                    if (!isEmpty(datas)) {
                        for(var i=0; i< datas.length ;i++){
                            var ind = i;
                            if(datas[ind].id == id){
                                that.indexs = i;
                                break;
                            }
                        }
                    } 
                },
            },
            mounted(){
                // this.changeType();
            },
            updated:function(){
                this.prizes()
                var _that = this
                // 抽奖按钮点击事件
                var letts =  document.getElementsByClassName('lotterydefaultBg');
                for(var i =0 ; i