年会抽奖程序,开箱即用

年底降至,各类年会都需用到抽奖,最近刚好写了一个抽奖程序,总结一下,也为了方便日后温故,也可给诸位一个开箱即用的抽奖demo参考

demo演示链接

先睹为快,传送门

完整代码地址

传送门

流程图

说明

  1. 公平抽奖,没有暗箱操作,代码通过功能测试、压测,经过多人review,可放心开箱即用。
  2. 这个抽奖程序是上周公司抽奖实际使用的,但是代码我隐去了跟公司相关的信息,所以UI上效果基本没有,但只要稍作修改,如设计一张背景图即可。
  3. 分辨率1920*1080效果最佳,但需考虑实际使用地方的屏幕设备
  4. 有抽奖中、中奖两个音乐,需要连接音频效果更佳
  5. 奖品信息可以配置,一次抽奖可以分若干小次进行,这里抽奖暂时只按1桌/1次来,原因:删除/放回这里需要优化一下
  6. 中奖后会将中奖人名单以及奖品信息写入中奖记录表,有页面可查看,方便后面兑奖
  7. 暂时只放出抽桌号的代码,其实将桌号的图片换成员工头像效果会更好,原还有一个签到页面,可签到的人提前录入了user表,只有签到的人才在奖池中,这里还有一个nestjs写的后台,代码暂时没有放出来,可以私聊沟通。流程可以参考

核心代码

关键节点有相应注释,请仔细阅读,欢迎指正不足

//生成从minNum到maxNum的随机数
randomNum(minNum, maxNum){
    return parseInt(Math.random()* (maxNum - minNum + 1) + minNum); 
},

//奖头像动起来
doMove(start, end) {
    console.log('start, end', start, end );

    this.setIntervalFun = setInterval(() => {
        for(let i = start; i < end; i ++ ) {
            this.$set(this.currentPrizeUsers, i, this.keepNoRepeat(this.currentPrizeUsers, this.moveUsers));
        }
    }, 80) 
},

//保证数字不重复
keepNoRepeat(currentPrizeUsers, userNoPrize) {
  let user = userNoPrize[this.randomNum(0, userNoPrize.length)];

  //由于分多小次抽奖,抽奖完成后奖池人数才变化,所以可能存在取值越界
  if(!user) {
    return this.keepNoRepeat(currentPrizeUsers, userNoPrize);
  }
  if(currentPrizeUsers.filter(item => item.userid == user.userid).length > 0) {
    return this.keepNoRepeat(currentPrizeUsers, userNoPrize);
  }else {
    return user;
  }
},

//停/继续/完成点击
handlePrizeClick: throttle(function() {
    //单次抽奖的最后一小次暂停
    if(this.movePrizeNum == this.currentPrizeInfo.count) {
        this.choujiangId.pause();
        this.zhongjiangId.play();
        clearInterval(this.setIntervalFun);
        this.movePrizeStatus = 2;
        this.movePrizeNum += 1;
        this.doPrize(this.currentPrizeUsers.filter(item => item.userid).map(item => item.userid).join(','));
        return;
    }

    if(this.movePrizeStatus == 2) {//显示状态-完成抽奖
        this.choujiangId.pause();
        this.zhongjiangId.pause();
        this.dialogTableVisible = false;
        this.movePrizeStatus = 0;
    }else if(this.movePrizeStatus == 3) {//再次启动
        this.choujiangId.play();
        this.zhongjiangId.pause();
        this.movePrizeStatus = 1;
        this.doMove(this.movePrizeNum * this.currentPrizeInfo.everytime, this.currentPrizeInfo.everytime * (this.movePrizeNum + 1) );
        this.movePrizeNum += 1;
    }else if(this.movePrizeStatus == 1) {//暂停
        this.choujiangId.pause();
        this.zhongjiangId.play();
        clearInterval(this.setIntervalFun);
        this.movePrizeStatus = 3;
        this.doPrize(this.currentPrizeUsers.filter(item => item.userid).map(item => item.userid).join(','));
    }
}, 1000),

//洗牌
randomUser() {
    let randomUser = setInterval(() => {
        this.moveUsers = this.moveUsers.sort((a, b) => Math.random() > .5 ? -1 : 1);
    }, 100)
    setTimeout(() => {
        clearInterval(randomUser);
    }, 2000);
}

迭代思路(不足之处)

  1. 配置奖品信息应更丰富,单独做一个后台配置页面,支持配置奖品图片、抽奖个数、次数、音乐等等
  2. 将奖品配置信息用数据表管理,而不是json
  3. 抽奖历史记录应可以回看,可以删除(作废),同时删除中奖记录表
  4. 如果奖池人数足够多(1w人以上),可能有性能问题,前端循环可以持续优化
  5. 添加登录/接口权限控制

后续考虑

  1. 空格键按暂停可能会更好操作,但是声控呢?
  2. 洗牌效果做得更炫酷一些