jdf2e / nutui-bingo

Bingo - 基于 NutUI 的抽奖组件

基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景

特性

• 使用 Vue3 语法
• 支持 H5 和小程序
• 详尽的文档和示例
• 支持 TypeScript

组件

• 幸运大转盘 💻 📱
• 跑马灯 💻 📱
• 九宫格 💻 📱
• 开心刮刮乐 💻
• 神秘大礼盒 💻 📱
• 砸金蛋 💻 📱
• 老虎机 💻 📱
• 摇好运 💻
• 红包雨 💻 📱
• 娃娃机 💻
• 你藏我猜 💻 📱
• 摇骰子 💻 📱

支持环境

• Android 5.0+
• iOS 9.2+
• 主要适用于 H5 和小程序

构建版本

• es nutbig.es.js
• umd nutbig.umd.js

⌨️ 本地开发

你可以使用 Gitpod 进行在线开发：

或者克隆到本地开发:

$ git clone https://github.com/jdf2e/nutui-bingo.git
$ cd nutui-bingo
$ npm install
$ npm run dev

nutui-bingo's Issues

taro版本下打包编译后会出现未定义的refs，vue3.0

taro版本下打包编译后会出现未定义的refs，vue3.0
但是找遍了mode_modules源码没看到有用到refs的地方

求问抽奖机如何先运行一段匀速动画，再衔接慢慢降速到指定Index，因为我可能不知道抽奖接口啥时候才能返回，想让动画先跑起来

LottoRoll 摇奖机在taro中编译到h5点击抽奖报错

taro编译到小程序是正常的，在h5中报错
taro 3.5.7
@nutui/nutui-bingo-taro 1.0.7-beta.1
vue 3.2.41

希望出taro react的版本

代码有bug？

src/packages/utils/create/component.ts:14:13 - error TS2352: Conversion of type '<PropsOptions extends Readonly<ComponentPropsOptions>, Props extends Readonly<ExtractPropTypes>>(_component: { ...; }) => (props: Record<...> & {}) => any' to type '{ <Props extends Record<string, any>, E extends EmitsOptions = {}, EE extends string = string, S extends SlotsType<Record<string, any>> = {}>(setup: (props: Props, ctx: SetupContext<E, S>) => RenderFunction | Promise<...>, options?: (Pick<...> & { ...; }) | undefined): (props: Props & EmitsToProps<...>) => any; <Pro...' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type '(props: Record<string, any> & {}) => any' is not comparable to type 'DefineComponent<any, any, any, any, any, any, any, any, any, PublicProps, Readonly, {} | { [x: string]: any; }, any>'.
Type '(props: Record<string, any> & {}) => any' is not comparable to type 'ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions>'.
Type '(props: Record<string, any> & {}) => any' provides no match for the signature 'new (...args: any[]): any'.

14 create: function <
~~~~~~~~~~
15 PropsOptions extends Readonly,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
32 return defineComponent(_component as any);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
33 } as typeof defineComponent,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in src/packages/utils/create/component.ts:14

在Taro+Vue3里无法使用，不显示内容

引入之后在taro-vue项目里，编译完成不报错，但是在开发工具里查看不显示

能不能别在taro版本里面写div代码？你们是jd程序员吗

好意思么，这点基础都没有？不能在taro里面写html标签

支持 taro + vue3吗？

进入组件，点击taro时又会跳转至首页，是不支持吗

taro+vue3 引入不显示

在NutUI4项目中无法使用

尝鲜用 taro + NutUI4 新建项目，并安装bingo，运行报错：

ERROR in ./src/pages/index/index.vue?vue&type=template&id=1badc801 (./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unplugin-vue-components!./node_modules/babel-loader/lib/index.js??clonedRuleSet-11.use[0]!./node_modules/vue-loader/dist/templ
ateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/index/index.vue?vue&type=template&id=1badc801) 1:112-170
Module not found: Error: Can't resolve '@nutui/nutui-taro/dist/packages/bigmarquee/style' in

在NutUI3下使用正常

大转盘的单位不是自适应单位

在h5中或小程序中不会转化rpx或rem单位，是需要额外处理吗？
ps：像九宫格或跑马灯这两个组件是会转化为rpx的,不过h5中不是rem单位，还是px单位

砸金蛋组件功能期望优化

1.砸金蛋组件期望暴露当前点击的金蛋的下标和当前金蛋的原数据对象
2.砸金蛋组件期望能够接收【已砸金蛋数组】进行初始化组件，来满足用户刷新后砸过的金蛋能够回显的需求

感谢作者开源 🙏

娃娃机是固定高度

娃娃机固定690px高度，怎么调整？

想问这个会支持React吗？会接受React的PR吗？

SquareNine 九宫格组件问题

1. 小程序上没有中奖的图片显示有问题，没有显示对应id的奖品图片
2. 连续翻转2张牌，位置就错乱了， 官网可以复现
3. 在微信小程序中，收牌的位置没有完全隐藏在翻牌按钮下

关于跑马灯更换图片的问题

请问Marquee 跑马灯怎么更换点击抽奖后的itemStyle背景图和startStyle背景图？现在只能更换点击抽奖前的背景图。

nutui-bingo-taro 小程序版本在真机中错乱【大转盘】

微信开发工具正常，但是真机不行，奖品显示层级不对，滚动之后抖动错乱
换了两个版本都一样（1.0.7-beta.1和1.0.7-beta.2）
如视频所示：
https://user-images.githubusercontent.com/22288837/222670726-f3be8f69-81c0-4342-8fa8-d59f1fc8e0c5.mp4

大转盘希望暴露设置奖品图片大小方法

就是希望设置奖品小图的大小

抽奖机的 BUG，不中奖显示三个图片一样

当后端返回不中奖时，设置 prizeIndex = -1 ，但抽奖机还是显示三个图片一样。
在官网验证也会出现这个问题：

1. 点击不中奖按钮（双击后出现概率会很高）
2. 显示三个图片一样

以下图片都是通过双击「不中奖」按钮出现的

npm install 报错code E401

npm install 报错code E401，是私有包需要登录权限账号吗

开始抽奖为什么不加一个条件

抽奖一般都会设置一个条件才可以抽奖，但是目前只要点击了抽奖 不管有没有写逻辑都会转动抽奖。
为什么不把lock做成可配置的了？

大转盘抽奖ts校验问题

小白提问求助：
在大转盘抽奖代码中，turntable.value.rotateTurn()这行代码会提示“turntable.value”可能为 “null”。const turntable: Ref
请问如何解决定义类型的问题？谢谢

有没react版本的

开源出来就不怎么更新了，去年京东没用到这些东西，没BUG修复？

刮刮卡回调事件问题

src\packages__VUE\scratchcard\index.vue ---目标路径

图中方法，会改变回调事件导致，刮开后执行到该回调中。