Skip to content

Commit

Permalink
feat: 移植nutbingo的部分抽奖组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@yang1206
yang1206 committed Jul 13, 2023
1 parent 4698e8e commit 6e19b1a
Show file tree
Hide file tree
Showing 45 changed files with 3,257 additions and 1 deletion.
12 changes: 12 additions & 0 deletions docs/.vitepress/items.ts
View file
Expand Up @@ -122,6 +122,18 @@ export const components = [
{ text: 'TimeSelect 配送时间', link: '/components/business/timeselect' },
],
},
{
text: '抽奖组件',
collapsed: false,
items: [
{ text: 'TurnTable 大转盘抽奖', link: '/components/bingo/turntable' },
{ text: 'Marquee 跑马灯抽奖', link: '/components/bingo/marquee' },
{ text: 'GiftBox 神秘大礼盒', link: '/components/bingo/giftbox' },
{ text: 'Hiteggs 砸金蛋', link: '/components/bingo/hiteggs' },
{ text: 'DollMachine 抓娃娃机', link: '/components/bingo/dollmachine' },
{ text: 'ShakeDice 摇骰子', link: '/components/bingo/shakedice' },
],
},
]

export const navComponents = components.map(i => ({ text: i.text, link: i.items[0].link }))
Expand Down
88 changes: 88 additions & 0 deletions docs/components/bingo/dollmachine.md
View file
@@ -0,0 +1,88 @@
# DollMachine 抓娃娃

### 介绍

模拟娃娃机抽奖，可配置图片、开始结束回调等。


### 基础用法

```html
<template>
<nut-doll-machine
ref="lottoRollDom"
:prize-list="prizeList"
:prize-index="prizeIndex"
@start-turns="startTurns"
@end-turns="endTurns"
>
</nut-doll-machine>
</template>

<script lang="ts">
import { ref, reactive } from "vue";
export default {
props: {},
setup() {
const lottoRollDom: any = ref(null);
const prizeList = reactive([
{
imagePath:
"https://img11.360buyimg.com/imagetools/jfs/t1/147182/12/2440/6194/5f06cde6Ead240fe8/31082e30a182a5ce.png",
text: "大鸡腿",
},
{
imagePath:
"https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
text: "JOY",
},
{
imagePath:
"https://img11.360buyimg.com/imagetools/jfs/t1/128607/26/6643/6790/5f06cd27E9b5e15f7/7509bc7ce2da66b8.png",
text: "VIP",
},
{
imagePath:
"https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
text: "JOY",
},
]);
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
const prizeIndex = ref(3);
const startTurns = () => {
console.log("开始抽奖");
};
const endTurns = () => {
console.log("抽奖结束");
};
return {
lottoRollDom,
prizeList,
prizeIndex,
startTurns,
endTurns,
};
},
};
</script>
```

### Props

| 字段 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------ | ------ | --------------------- |
| prize-list | 奖品列表 | Array | 目前需要至少 4 个奖品 |
| default-claw | 初始化爪子的图片链接 | string | - |
| active-claw | 爪子抓到奖品的图片链接 | string | - |
| prize-index | 中奖奖品在列表的索引位置 | Number | -1（-1 未中奖） |

### Events

| 字段 | 说明 | 回调参数 |
| ----------- | -------------------------------- | ---------------- |
| init | 游戏初始化 | dom.value.init() |
| start-turns | 爪子开始下伸，赋值到 prize-index | - |
| end-turns | 爪子已经抓到/未抓到奖品触发 | - |
51 changes: 51 additions & 0 deletions docs/components/bingo/giftbox.md
View file
@@ -0,0 +1,51 @@
# GiftBox 神秘大礼盒

### 介绍

用于礼盒抽奖，可配置图片、开始结束回调等。


### 基础用法

```html
<template>
<nut-giftbox
ref="refChild"
@start-turns="startTurns"
@end-turns="endTurns"
>
</nut-giftbox>
<div @click="initBox">再来一次</div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
setup() {
const refChild = ref();
const initBox = () => {
refChild.value.init();
};
const startTurns = () => {
console.log("开始");
};
const endTurns = () => {
console.log("结束");
};
return {
refChild,
initBox,
startTurns,
endTurns,
};
},
};
</script>
```

### Events

| 字段 | 说明 | 回调参数 |
| ----------- | ---------------------- | -------- |
| init | 礼盒初始化 | - |
| start-turns | 礼盒打开时候的回调函数 | - |
| end-turns | 礼盒打开后的回调函数 | - |
58 changes: 58 additions & 0 deletions docs/components/bingo/hiteggs.md
View file
@@ -0,0 +1,58 @@
# Hiteggs 组件

### 介绍

用于砸金蛋抽奖场景，可以自定义金蛋图片等


### 基础用法

```html
<template>
<nut-hiteggs></nut-hiteggs>
</template>
```

### 自定义传入个数

```html
<template>
<nut-hiteggs :num="9"></nut-hiteggs>
</template>
```

### 砸击事件

```html
<template>
<nut-hiteggs :num="9" @click="hit"></nut-hiteggs>
</template>
<script>
export default {
setup() {
const hit = () => {
console.log("中奖啦");
};
return {
hit,
};
},
};
</script>
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ---------------- | ------ | ------------------------------------------------------------------------------------------------- |
| num | 金蛋个数 | number | 9 |
| intact-img | 完整金蛋图片地址 | String | - |
| hammer | 锤子图片 | String | - |
| width | 金蛋图片宽度 | String | 80px |
| height | 金蛋图片高度 | String | 80px |

### Events

| 事件名 | 说明 | 回调参数 |
| ------ | -------------- | -------- |
| click | 砸击金蛋后触发 | - |
123 changes: 123 additions & 0 deletions docs/components/bingo/marquee.md
View file
@@ -0,0 +1,123 @@
# Marquee 跑马灯

### 介绍

用于跑马灯抽奖场景，可配置奖品、图片等。

### 基础用法

```html
<template>
<nut-marquee
:prize-list="prizeList"
:prize-index="prizeIndex"
:speed="100"
:circle="40"
:style-opt="styleOpt"
@start-turns="startTurns"
@end-turns="endTurns"
>
</nut-marquee>
</template>
<script>
import { ref, reactive } from "vue";
export default {
setup() {
// 转盘上要展示的奖品数据
const prizeList = ref([
{
id: "xiaomi",
prizeName: "小米手机",
prizeImg:
"https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png",
},
{
id: "blue",
prizeColor: "rgb(251, 219, 216)",
prizeName: "蓝牙耳机",
prizeImg:
"https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg",
},
{
id: "thanks",
prizeName: "谢谢参与",
prizeImg:
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
},
{
id: "apple",
prizeName: "apple watch",
prizeImg:
"https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png",
},
{
id: "fruit",
prizeColor: "rgba(246, 142, 46, 0.5)",
prizeName: "迪士尼苹果",
prizeImg:
"https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png",
},
{
id: "thanks",
prizeName: "谢谢参与",
prizeImg:
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
},
{
id: "fish",
prizeName: "海鲜套餐",
prizeImg:
"https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png",
},
{
id: "thanks",
prizeName: "谢谢参与",
prizeImg:
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
},
]);
// 转盘样式的选项
const styleOpt = reactive({
itemStyle: {},
startStyle: {},
bgStyle: {
background: "rgb(255, 231, 149)",
},
});
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
const prizeIndex = ref(0);
const startTurns = () => {
const index = Math.floor(Math.random() * prizeList.value.length);
prizeIndex.value = index;
};
const endTurns = () => {
console.log("中奖了");
};
return {
prizeList,
styleOpt,
prizeIndex,
startTurns,
endTurns,
};
},
};
</script>
```

### Props

| 字段 | 说明 | 类型 | 默认值 |
| ----------- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------- |
| prize-list | 奖品列表 | Array | [] |
| prize-index | 中奖奖品在列表的索引位置 | Number | -1 |
| speed | 转动速度 | Number | 150 |
| circle | 转动圈数 | Number | 30 |
| style-opt | 跑马灯中的样式：bgStyle-整个容器样式，itemStyle-每个奖品样式，startStyle-中间按钮样式 | Object | `{bgStyle: {},itemStyle: {},startStyle:{}}` |

### Events

| 字段 | 说明 | 回调参数 |
| ----------- | -------------------------------------------------------------- | -------- |
| start-turns | 开始跑动的回调函数，此时将接口中的中奖索引，赋值到 prize-index | - |
| end-turns | 停止跑动后的回调函数 | - |

0 comments on commit 6e19b1a

Please sign in to comment.