react+antd实现掘金抽奖转盘

1,178 阅读1分钟

模仿掘金官网的抽奖轮盘

项目地址

抽奖轮盘前端展示地址:github.com/noob000/byt…

后台管理地址:github.com/noob000/byt…

项目主要内容

前端展示界面以及后台管理界面均使用create-react-app脚手架搭建,并使用ant-design组件库。抽奖结果从轻服务的云函数中返回,抽奖计划及奖品图片储存于轻服务数据表中。

实现功能

  • 根据预置抽奖计划实现抽奖界面
  • 可显示历史奖品
  • 可在管理界面设置初始矿石值以及每次抽奖消耗的矿石值
  • 可在管理界面新增、修改、删除抽奖计划,抽奖计划中的图片支持本地上传。
  • 奖品的概率支持手工设置

项目预览

  1. 抽奖功能展示

iShot2021-09-02 08.31.04.gif 2. 浏览所有抽奖计划

iShot2021-09-02 09.27.01.png 3.设置奖品中奖概率

iShot2021-09-02 09.29.45.png 当未选择奖品图片时将采用默认奖品样式