年会抽奖2022

[vieyahn2017]

https://github.com/fouber/lottery

[vieyahn2017]

增加

    .result div {
        display: inline-block;
        font-size: 25px;
        width: 300px;
        background: #ff0;
        line-height: 30px;
        color: #000;
        margin: 5px;
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
        padding: 10px 0;
    }

[vieyahn2017]

内定抽奖

    // todo 抽奖结束，界面上展示：恭喜XXX获得奖品XXX 【基本完成，不过是硬编码的方式，并不算好】
    // todo 界面左边来回滚动展示已出的抽奖结果
    var plans = {
        "count": 3,
        "index": 0,
        "players": ["000", "刘德华", "赖文慧", "杨洋"],
        "schedule": [
            {
                "player": 1,
                "target": [
                    {
                        "phone": "No.5357",
                        "name": "Allenz"
                    },
                    {
                        "phone": "No.0282",
                        "name": "Mr.Q"
                    }
                ]
            },
            {
                "player": 2,
                "target": [
                    {
                        "phone": "No.8517",
                        "name": "堀江由衣"
                    },
                    {
                        "phone": "No.4824",
                        "name": "石之纷如"
                    }
                ]
            },
            {
                "player": 3,
                "target": [
                    {
                        "phone": "No.2686",
                        "name": "в.α.d"
                    },
                    {
                        "phone": "No.2114",
                        "name": "亡者王者"
                    },
                    {
                        "phone": "No.6579",
                        "name": "红颜晕墨色"
                    },
                    {
                        "phone": "No.0749",
                        "name": "睡意朦胧"
                    },
                    {
                        "phone": "No.6392",
                        "name": "CNo15"
                    }
                ]
            }
        ]
    }

    var lotteryWithPlan = function(count){
        var list = canvas.getElementsByTagName('a');
        var color = 'yellow';

        if (plans.index >= plans.count) {
            // alert("抽奖活动已结束，请下次再来");
            return [];
        }

        var ret1 = plans.schedule[plans.index].target;
        playerName = plans.players[plans.schedule[plans.index].player];
        plans.index++;

        if (count != ret1.length) {
            // 排的计划和选择的抽奖数目不一致，按理说提示一下
            console.log("count != ret1.length. count=%d, ret1.lenfgth=%d", count, ret1.length);
            ret1 = ret1.slice(0, count); /* 长度为2的Array，slice(0,5)还是返回2个，因此不存在数据超出的可能  */ 
        }
        // plans里面排队的没有index，需要补上
        ret1.forEach(function(item){
            for (var i=0,lens=member.length;i<lens;i++) {
                if (member[i].phone == item.phone && member[i].name == item.name) {
                    item.index = member[i].index;
                    break;
                }
            }
        });

        var ret = ret1
            .map(function(m){
              choosed[getKey(m)] = 1;
              list[m.index].style.color = color;
              return m.name + '<br/>' + m.phone; 
            });
        localStorage.setItem('choosed', JSON.stringify(choosed));
        return ret;
    }

    var lottery = function(count){
        if (plans) {  // 按照抽奖内定结果来
            return lotteryWithPlan(count);
        }
        var list = canvas.getElementsByTagName('a');
        var color = 'yellow';
        var ret = member
            .filter(function(m, index){
                m.index = index;
                return !choosed[getKey(m)];
            })
            .map(function(m){
                return Object.assign({
                  score: Math.random()
                }, m);
            })
            .sort(function(a, b){
                return a.score - b.score;
            })
            .slice(0, count)
            .map(function(m){
              choosed[getKey(m)] = 1;
              list[m.index].style.color = color;
              return m.name + '<br/>' + m.phone; 
            });
        localStorage.setItem('choosed', JSON.stringify(choosed));
        return ret;
    };

[vieyahn2017]

稍更新 Vue主件

    new Vue({
        el: '#tools',
        data: {
            selected: 30,
            running: false,
            btns: [
                5, 4, 3, 2, 1
            ]
        },
        mounted () {
            canvas.innerHTML = createHTML();
            TagCanvas.Start('myCanvas', '', {
                textColour: null,
                initial: speed(),
                dragControl: 1,
                textHeight: 14
            });
        },
        methods: {
            reset: function(){
                if(confirm('确定要重置么？所有之前的抽奖历史将被清除！')){
                    localStorage.clear();
                    location.reload(true);
                    if(plans) plans.index = 0;
                }
            },
            onClick: function(num){
                $('#result').css('display', 'none');
                $('#main').removeClass('mask');
                this.selected = num;
            },
            toggle: function(){
                if(this.running){
                    TagCanvas.SetSpeed('myCanvas', speed());
                    var ret = lottery(this.selected);
                    if (ret.length === 0) {
                        $('#result').css('display', 'block').html('<span>已抽完</span>');
                        return
                    }
                    playerName = playerName?playerName:"";
                    $('#result').css('display', 'block').html('<div>恭喜选手' + playerName + '获得奖品：</div>·' + '<br/>' + '<span>' + ret.join('</span><span>') + '</span>');
                    TagCanvas.Reload('myCanvas');
                    setTimeout(function(){
                        localStorage.setItem(new Date().toString(), JSON.stringify(ret));
                        $('#main').addClass('mask');
                    }, 300);
                } else {
                    $('#result').css('display', 'none');
                    $('#main').removeClass('mask');
                    TagCanvas.SetSpeed('myCanvas', [5, 1]);
                }
                this.running = !this.running;
            }
        }
    });

[vieyahn2017]

原来的抽奖程序是 member

{ "phone": "No.0737", "name": "神隐少女" }, 这种，类似姓名和电话吧

我这边预期其实是按照商品和ID来了

[vieyahn2017]

    var playerName = "";

    // todo 抽奖结束，界面上展示：恭喜XXX获得奖品XXX 【基本完成，不过是硬编码的方式，并不算好】
    // todo 界面左边来回滚动展示已出的抽奖结果
    var plans = 

{ "count": 3, "index": 0, "players": ["000", "杨得桢", "杨又嘉", "杨洋"], "schedule": [ { "player": 1, "target": [ { "phone": "1袋", "name": "悟空麻花" }, { "phone": "1瓶", "name": "茉莉奶绿低糖奶茶" } ] }, { "player": 2, "target": [ { "phone": "1袋", "name": "徐福记牛轧糖" }, { "phone": "1瓶", "name": "乌龙奶茶" } ] }, { "player": 3, "target": [ { "phone": "2枚", "name": "果中佳品神秘水果" }, { "phone": "1袋", "name": "上品红心火龙果" } ] } ] }

plans = null; // 真抽的时候这一行开启即可

[vieyahn2017]

Array.prototype.slice.call(document.querySelectorAll(".list-group-item > .p-name")).forEach(x=> {console.log(x.innerText)});

Array.prototype.slice.call(document.querySelectorAll(".r-1777fci > div > a >div > div:nth-child(2)")).forEach(x=> {console.log(x.innerText)});

var member = [ { "phone": "1份", "name": "蓝天白云的微笑" }, { "phone": "1袋", "name": "悟空麻花" }, { "phone": "1袋", "name": "徐福记牛轧糖" }, { "phone": "1袋", "name": "三只松鼠蟹香蚕豆" }, { "phone": "1袋", "name": "三只松鼠手剥巴旦木" }, { "phone": "1袋", "name": "三只松鼠无核白葡萄干" }, { "phone": "1袋", "name": "日式小圆饼" }, { "phone": "1瓶", "name": "茉莉奶绿低糖奶茶" }, { "phone": "1瓶", "name": "乌龙奶茶" }, { "phone": "1个", "name": "毛毡包" }, { "phone": "1个", "name": "手机支架" }, { "phone": "1盒", "name": "超威蚊香" }, { "phone": "1盒", "name": "干制香菇桑植" }, { "phone": "1瓶", "name": "米香果果红糖泡米热饮" }, { "phone": "1瓶", "name": "米香果果红糖泡米饮品" }, { "phone": "1个", "name": "扬眉吐气兔年小公仔" }, { "phone": "1个", "name": "顺遂平安兔年小公仔" }, { "phone": "1袋", "name": "精选柠檬" }, { "phone": "1袋", "name": "上品红心火龙果" }, { "phone": "1盒", "name": "优选猕猴桃" }, { "phone": "2枚", "name": "果中佳品神秘水果" }, { "phone": "2枚", "name": "精选甜橙" }, { "phone": "2枚", "name": "优选山梨" }, { "phone": "1盒", "name": "精品冬草莓" }, { "phone": "1份", "name": "贺新年精品水果礼盒" },

{
    "phone": "1台",
    "name": "HUAWEI MatePad Pro 11吋 曜金黑"
},
{
    "phone": "1台",
    "name": "HUAWEI MatePad Pro 11吋 星河蓝"
},
{
    "phone": "1台",
    "name": "HUAWEI MatePad Pro 11吋 晶钻白"
},
{
    "phone": "1台",
    "name": "HUAWEI MatePad Pro 10吋 2022款"
},
{
    "phone": "1台",
    "name": "华为畅享 50 Pro 4G"
},
{
    "phone": "1台",
    "name": "华为nova 9 Pro"
},
{
    "phone": "1台",
    "name": "华为nova 10 Pro 全网通版"
},
{
    "phone": "1台",
    "name": "HUAWEI P40 Pro 全网通"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pro"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pro 麒麟9000 4G全网通版"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pro 雪域白 全网通版"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pocket 可可茶金 全网通版"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pro 天青蓝 全网通版"
},
{
    "phone": "1台",
    "name": "HUAWEI P50 Pocket 晶钻白 全网通版"
},

{
    "phone": "1盒",
    "name": "莫塞尔进口原料坚果"
},
{
    "phone": "1瓶",
    "name": "意大利托斯卡纳有机橄榄油"
},
{
    "phone": "1瓶",
    "name": "西班牙伯爵哈默尼橄榄油"
},
{
    "phone": "1盒",
    "name": "茶蜜礼盒"
},
{
    "phone": "1盒",
    "name": "樱之舞礼盒"
},
{
    "phone": "1盒",
    "name": "樱花粉礼盒"
},
{
    "phone": "1份",
    "name": "京瓷陶瓷刀礼盒"
},
{
    "phone": "1盒",
    "name": "莫塞尔牙买加进口咖啡"
},
{
    "phone": "1盒",
    "name": "新西兰蔓尔斯蜂蜜"
},
{
    "phone": "1盒",
    "name": "斯里兰卡锡尔德茶叶"
},
{
    "phone": "1盒",
    "name": "斯里兰卡迪尔玛茶叶"
},
{
    "phone": "1瓶",
    "name": "乐王吉庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "碧尚女爵庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "法国2017年玛歌红亭红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "意大利2016年欧纳拉雅庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "克莱蒙教皇堡红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "拉图庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "法国玫瑰庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "拉古斯庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "敖云干红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "乐夫普勒庄园红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "法国碧尚女爵红葡萄酒"
},
{
    "phone": "1瓶",
    "name": "法国轩尼诗XO进口洋酒"
},
{
    "phone": "1瓶",
    "name": "五粮液52度普五第八代"
},
{
    "phone": "1瓶",
    "name": "五粮液头曲浓香型白酒"
},
{
    "phone": "1瓶",
    "name": "泸州老窖国窖1573"
},
{
    "phone": "1瓶",
    "name": "飞天茅台2022版"
},
{
    "phone": "1瓶",
    "name": "衡水老白干"
},
{
    "phone": "1瓶",
    "name": "经典青花郎"
},
{
    "phone": "1瓶",
    "name": "郎酒小歪嘴"
},
{
    "phone": "1份",
    "name": "莫塞尔起泡酒礼盒"
},
{
    "phone": "1份",
    "name": "星巴克便当盒"
},
{
    "phone": "1份",
    "name": "华为MatePad 11"
},
{
    "phone": "1个",
    "name": "华为快充移动电源10000mA"
},
{
    "phone": "1个",
    "name": "SKG眼部按摩仪E3"
},
{
    "phone": "1个",
    "name": "瑞士达午休折叠床"
},
{
    "phone": "1个",
    "name": "遥控儿童电动汽车"
},
{
    "phone": "1个",
    "name": "飞利浦大空间空气净化器"
},
{
    "phone": "1个",
    "name": "美菱多功能涮烤一体锅"
},
{
    "phone": "1个",
    "name": "九阳空气炸锅"
},
{
    "phone": "1个",
    "name": "联想ThinkPad T490S"
},
{
    "phone": "1台",
    "name": "ZGL CR41公路自行车"
},
{
    "phone": "1台",
    "name": "电动折叠滑板车"
},
{
    "phone": "1台",
    "name": "儿童自行车"
},
{
    "phone": "1个",
    "name": "华为手环7（NFC版）"
},
{
    "phone": "1个",
    "name": "艾森斯电子冷暖箱"
},
{
    "phone": "1个",
    "name": "小熊加湿器"
},
{
    "phone": "1台",
    "name": "小天鹅洗衣机"
},
{
    "phone": "1台",
    "name": "九阳豆浆机"
},
{
    "phone": "1台",
    "name": "任天堂游戏机"
},
{
    "phone": "1份",
    "name": "爱奇艺会员年卡"
},
{
    "phone": "1份",
    "name": "腾讯视频会员年卡"
},
{
    "phone": "1份",
    "name": "Bilibili视频会员年卡"
},
{
    "phone": "1张",
    "name": "成都欢乐谷新年畅玩卡"
},
{
    "phone": "1张",
    "name": "国色天乡萌宠乐园门票卡"
},
{
    "phone": "1台",
    "name": "电动升降桌"
},
{
    "phone": "1台",
    "name": "膝盖理疗仪"
},
{
    "phone": "1台",
    "name": "小米全自动洗碗机"
},
{
    "phone": "1台",
    "name": "G10S智能扫地机器人"
},
{
    "phone": "1台",
    "name": "七彩虹游戏显卡"
},
{
    "phone": "1台",
    "name": "小天才儿童电话手表"
}

]