更新记录

1.0.7（2023-05-24）

代码细节优化

1.0.6（2023-05-24）

• 为方便用户使用，把示例工程模板打包为zip，解压后直接导入hbuilderx然后编译各平台即可看效果。

1.0.5（2023-05-10）

细节优化。

平台兼容性

本插件为一个大转盘抽奖活动页面模板，逻辑已经写好了，你可以直接拿来用了。 使用方式：

• 1.点击插件详情页右上方下载zip,下载后解压zip得到kevy-luckdraw项目目录;
• 2.直接把该项目导入hbuilderx然后编译到各平台即可。

服务端中奖比例方案说明：

• 1.中奖比例逻辑应该控制在服务端的，返回对应奖品索引即可，因为放前端不安全；
• 2.服务端分配中奖比例的方案示例：
  • 1）物品A（用中奖下标数字0表示）中奖概率设置为1/1000（可人为控制中奖比例设置即可），物品B（用中奖下标数字1表示）中奖概率是1/100,物品C（用中奖下标数字2表示）中奖概率为1/10；
  • 2）定义一个list，A物品就给list里放999个数字-1（代表未中奖）和1个数字0（0即中奖下标代表物品A）比例就是1/100，B物品就给list放99个数字-1和1个数字1，C物品就放9个数字-1和1个数字2;
  • 3) 将list随机打乱几次，java中调用Collections.shuffle(list)几次；
  • 4）最终例如list长度是10000，此时随机获取0（含）到10000（不含）之间的数字代表list数组下标，例如获取到的随机数为8，则从list中拿到下标为8的对应元素，list[8]若为-1则未中奖，为0-2分别代表A、B、C物品，假如是2则把2返回给小程序端；
  • 5）小程序端拿到中奖下标后，调用start方法旋转转盘并选中对应物品即可。

部分代码如下：

<script>
    var animation = uni.createAnimation({
        duration: 4000,
        timingFunction: 'ease-out'
    });
    export default {
        data() {
            return {
                rotate: 0, //度数-抽奖动画
                turning: false, //转盘是否正在转
                luckDrawTimes: 5, //抽奖机会，5代表可以抽5次
                isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
                drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
            }
        },
        methods: {
            /**
             * 抽奖按钮点击
             */
            start() {
                let $ = this;
                let luckDrawTimes = $.luckDrawTimes;
                if (luckDrawTimes < 1) {
                    uni.showToast({
                        title: "抽奖机会已用完",
                        icon: 'none'
                    });
                    return;
                }
                if (!$.turning) {
                    $.turning = true;
                    $.$nextTick(() => {
                        //这里去请求服务器，生成中奖信息，其中awardIdx为中奖
                        // uni.request({
                        // })
                        //以下为模拟请求返回数据，awardIdx从0开始，0代表谢谢参与，其他代表剩余的奖品，这里随机一个数（0-4之间）
                        let res = {
                            awardIdx: Math.floor(Math.random()*5),
                        };
                        let {
                            awardIdx
                        } = res;
                        //计算旋转角度
                        let rdm = $.computeRotateAward(awardIdx, 1);
                        animation.rotate(rdm).step();
                        $.rotate = animation.export();
                        $.luckDrawTimes = $.luckDrawTimes <= 0 ? 0 : $.luckDrawTimes - 1;
                        setTimeout(() => {
                            let animation1 = uni.createAnimation({
                                duration: 100,
                                timingFunction: 'linear'
                            });
                            animation1.rotate(0).step();
                            $.drawIdx = awardIdx;
                            $.isShowAwd = true;
                            $.$nextTick(() => {
                                setTimeout(() => {
                                    $.rotate = animation1.export();
                                    $.turning = false;
                                }, 1000);
                            });
                        }, 4350);
                    });
                }
            },
            /**
             * 根据后台返回中奖奖品索引计算旋转角度
             * @param {*} idx 中奖奖品下标，从0开始
             * @param {*} type 1-计算角度 2-计算奖品
             */
            computeRotateAward(idx, type) {
                let award;
                if (idx == 5) {
                    award = type == 1 ? 60 : "探亲礼包";
                } else if (idx == 4) {
                    award = type == 1 ? 300 : "加油卡";
                } else if (idx == 3) {
                    award = type == 1 ? 120 : "鸡腿";
                } else if (idx == 2) {
                    award = type == 1 ? 240 : "方便面";
                } else if (idx == 1) {
                    award = type == 1 ? 180 : "矿泉水";
                } else {
                    award = type == 1 ? 0 : "谢谢参与";
                }
                //这里6代表6圈，你可以设置为你想要的
                return type == 1 ? (6 * 360 + award) : award;
            },

            /**
             * 确认奖品按钮点击事件
             */
            toConfirmAwd() {
                //这里中奖信息关闭弹框
                this.isShowAwd = false;

            }
        }
    }
</script>