抽奖是大家常用的一个业务场景，如果专业点的可以用NutUI Bingo，是由京东 NutUI 前端团队出品的一款基于 NutUI + Vue 3 的抽奖组件库，用于快速开发营销活动和小游戏场景的抽奖玩法。
如果大家环境和NutUI/Vue3相符，可以试试看，因为我采用的是Vue2/AntD,所以就换了一个组件：lattice-lottery，其对应的官网地址为：
https://h5-group.github.io/lattice-lottery/guide/#%E4%BB%8B%E7%BB%8D
最终实现的效果如下：
大致的实现思路如下：
组件的封装
首先将官方组件封装为一个新组件，以管理抽奖业务场景的其它业务需求，在上例中，实现了：
- 抽奖页到中奖页的切换
- 配送地址功能入口
实现机制都比较简单，前者切换用一个开关进行标识，后者则触发一个访问地址的事件。
组件比较简单，大家看官方文档，这里注意几点：
- 奖品数量因为要凑满九宫格，所以在扣除中间的按钮后，要指定八个奖品
- Go触发2次会报错
- 在实际业务场景中，实际获奖情况由后端提供，Go接收这个参数，如后端给2，则go函数将返回中奖的奖品为列表数组中的下标为2的奖品。
定制样式
官方文档给的样式比较简单，一般情况下我们要进行定制，这里贴一下定制样式的代码，这个是参考官网中最后一个例子来的，需要主意的地方是原例子用的是像素，我这里为了实现自适应，改为了百分比。
.lottery-kit {
padding:30px;
display: flex;
justify-content: center;
align-items: center;
background-image: url('../assets/images/lucky-bg.jpeg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 奖品列表的蒙层，根据抽奖动画选中的位置被显示出来 */
.lottery1 .prize__item__mask {
background-image: url('../assets/images/mask.png');
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 10px;
background-color: transparent;
overflow: hidden;
}
/* 奖品图样式 */
.lottery1 .prize__item__image {
width: 100%;
height: 100%;
}
/* 九宫格组件样式 为了跟随羡慕的自适应方案 */
.lottery1 .lattice__lottery__box {
width: 100%;
}
/* 奖品块样式 为了跟随羡慕的自适应方案 */
.lottery1 .lattice__lottery__item {
width: 30%;
height: 30%;;
margin-bottom: 30px;
border: none;
font-size: 18px;
background-color: transparent;
}
/* 抽奖按钮 */
.lottery1 .lattice__lottery__btn {
margin-bottom:30px;
width: 30%;
height: auto;
border: none;
background-image: url('../assets/images/start-btn.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
其它就没什么了，一个很简单的功能，希望有用到这个场景的朋友可以参考一下。
#javascript##编程#