lotteries/README.md

抽奖插件，内含宫格、转盘、刮刮乐、抽奖

# lotteries

## Introduction

> 抽奖组件，包含N宫格、大转盘，besed vue 2.x

### Setup

```bash
yarn add lotteries -S
```

```bash
npm install lotteries -S
```

### Example

```bash
git clone https://github.com/Laev/lotteries.git

cd lotteries && yarn && yarn serve

# then you can open http://localhost:8080/index

```

### import

全局引入（vue 2.6.x）

```vue
// main.js

import Vue from 'vue'
import Lotteries from 'lotteries'
import 'lotteries/lib/index.css'

Vue.use(Lotteries)
```

局部引入 （vue 2.6.x）

```vue
demo.vue

<template>
  <div class="demo">
    <PrizeGrid ref="prizeGrid" :list="list" @onEnd="onEnd">
      <template #item="{ rows, index }">
        <div class="demo__item-wrap">
          <div class="demo__item">
            <p>ID: {{ rows.id }}</p>
            <p>index: {{ index }}</p>
            <p>{{ rows.name }}</p>
          </div>
        </div>
      </template>
      <template #button>
        <div class="demo__button-wrap" @click="startLottery">
          <div class="demo__button">立即抽奖</div>
        </div>
      </template>
    </PrizeGrid>
    <PrizeWheel ref="prizeWheel" :list="list" :isShowLight="false" @onStart="onStart">
      <template #item="{ rows }">
        <div class="demo__prize-text">
          <!-- 之所以分割，是因为css布局下的转盘不好控制文字刚好位于扇形内，因此目前只能依靠手动控制字数长度来保证显示边界稳定-->
          <p class="demo__prize-line-one">{{ rows.name | formatLineOne }}</p>
          <p class="demo__prize-line-two">{{ rows.name | formatLineTwo }}</p>
          <p class="demo__prize-line-three">{{ rows.name | formatLineThree }}</p>
        </div>
      </template>
    </PrizeWheel>
  </div>
</template>

<script>
import { PrizeGrid, PrizeWheel } from 'lotteries'
import 'lotteries/lib/index.css'

export default {
  name: 'demo',
  filters: {
    formatLineOne(name) {
      return name.substr(0, 6);
    },
    formatLineTwo(name) {
      return name.substr(6, 4);
    },
    formatLineThree(name) {
      const text = name.length > 12 ? name.substr(10, 2) + '...' : name.substr(10, 2);
      return text;
    }
  },
  data(){
    return {
      list: []
    }
  },
  components: {
    PrizeGrid,
    PrizeWheel
  },
  created() {
    this.list = new Array(8).fill({ id: 1, name: '' }).map((item, index) => {
      return { id: index + 1, name: '奖品' + index };
    });
  },
  methods: {
    startLottery() {
      // 生产过程中，此时为api请求后获取抽得奖品的id，调用实例方法start，入参类型number，入参值[primaryKey]
      this.$refs.prizeGrid.start(3);
    },
    onStart(){
      this.$refs.prizeWheel.start(7)
    },
    onEnd(winItem) {
      // 动画完成后处理一些交互，如弹窗提示等
      console.log(winItem)
    }
  }
}
</script>
```

### API

#### PrizeGrid（宫格抽奖）

##### Props

| 参数        | 说明                         | 类型             | 默认值     |
| ----------- | ---------------------------- | ---------------- | ---------- |
| list   | 奖品数据（必填）<br />*注：当数据长度不满足最大可填充数量（有按钮时为 xy-(x-2)(y-2)，无按钮时为 xy）时，会自动填充”谢谢参与“数据，为防止数据结构不同导致组件运行时异常，建议使用时自备“谢谢参与”等数据后传入适合长度的数据* | array      | []    |
| disabledList | 禁用的[primaryKey]数组<br />*注: 禁用的数组在抽奖时即会跳过，一般的应用场景有：1、多次抽奖不抽到同一种奖品，2、随抽奖次数的叠加解锁更高级的奖品等* | array      | [] |
| primaryKey | 标记数据的唯一字段（推荐使用id） | string | "id"   |
| xy  | 布局 | string    | "3*3"  |
| gap | 奖品缝隙间隔 | number    | 8       |
| circle | 转动圈数  | number   | 5     |
| speed | 速度，必须大于0 | number         | 0.4   |
| rotate | 旋转方向 仅在hasButton为true时有效 | "clockwise" \| "counterclockwise" | "clockwise" |
| hasButton | 是否显示按钮 | boolean   | true |
| isRandom | 是否随机跳动 仅在hasButton为false时有效 | boolean | false |
| containerBorder | 父容器边框 | number | 15  |
| insiderBorder | 子容器边框      | number           | 8       |
| activeClass | 激活时的样式类名 | string | "prize-grid__item-wrap--active" |
| shuffleFn | 洗牌算法 | function | Fisher-Yates 洗牌算法 |

##### Event

| 事件名 | 说明                                          | 回调参数               |
| ------ | --------------------------------------------- | ---------------------- |
| *start* | 实例方法，使用$ref调用，入参为primaryKey，开始动画 |                       |
| onStart | 当未传入button slot时点击抽奖按钮触发 |  |
| onEnd | 当动画完成时触发 | value: 所选中奖品对象 |

##### Slots

| slot name | 说明                 |
| --------- | -------------------- |
| item      | 奖品容器（推荐使用） |
| button    | 抽奖按钮             |

#### PrizeWheel（转盘抽奖）

##### Props

| 参数            | 说明             | 类型                             | 默认值                |
| --------------- | ---------------- | -------------------------------- | --------------------- |
| list            | 奖品数据（必填） | array                            | []                    |
| disabledList | 禁用的[primaryKey]数组    | array      | [] |
| primaryKey | 标记数据的唯一字段（推荐使用id） | string | "id"   |
| circle          | 转动圈数         | number                           | 5 |
| time       | 动画运行时间，单位为毫秒，必须大于0 | number                           | 2000 |
| rotate          | 旋转方向         | "clockwise" \|"counterclockwise" | "clockwise"           |
| isShowLight     | 是否显示彩灯     | boolean                          | true                  |
| lightNum        | 彩灯数量         | number                           | 18                    |
| containerBorder | 父容器边框       | number                           | 18                    |
| shuffleFn       | 洗牌算法         | function                         | Fisher-Yates 洗牌算法 |

##### Event

| 事件名  | 说明                                  | 回调参数              |
| ------- | ------------------------------------- | --------------------- |
| *start* | 实例方法，使用$ref调用，入参为primaryKey，开始动画 |                       |
| onStart | 当未传入button slot时点击抽奖按钮触发 |                       |
| onEnd   | 当动画完成时触发                      | value: 所选中奖品对象 |

##### Slots

| slot name | 说明                 |
| --------- | -------------------- |
| item      | 奖品容器（推荐使用） |
| button    | 抽奖按钮             |

### License

MIT