mk-wxcom-ttl/readme.md

微信转盘抽奖组件

<a name="xVsSI"></a>
### 以下为转盘抽奖组件的使用方法（微信小程序）
> 作者：Kevin.W

> npm安装：npm i mk-wxcom-ttl


---

<a name="A00UH"></a>
#### json引用
```javascript
"usingComponents": {
  "turntable-lottery": "../../../components/turntable-lottery/turntable-lottery"
}
```
<a name="xpZj3"></a>
#### 页面引用
```javascript
<turntable-lottery id="turntableLottery" lotteryData="{{lotteryData}}" bind:initDone="onInitDone" bind:finsh="onFinsh"></turntable-lottery>
<button size="default" type="primary" onTap="do">开始抽奖</button>
```
<a name="Mmzql"></a>
#### js示例
```javascript
data: {
    lotteryData: {
      turntable: {
        width: 517,
        height: 517,
        img: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01DMgqRe23c06TkBfxp_!!555657275.png"
      },
      pointer: {
        width: 58,
        height: 71,
        x: 228,
        y: 216,
        img: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01QnpPgP23c06Z0mG79_!!555657275.png"
      },
      config: {
        time: 8,
        animation: "ease-in-out",
        allPrize: 6,
        round: 12
      },
      // 奖品列表 可不传
      // prizeList: [
      //   { id: 0, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 1, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 2, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 3, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 4, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 5, img: "xxx.png", name: 'xxxxxxx' }
      // ]
    }
 },
 
 onInitDone(e) {
   // e.detail.success==true时为初始化完成
   console.log(e.detail)
 },
 do(){
  // 实例化组件
  let turntableLottery = this.selectComponent('#turntableLottery')
  // 开始抽奖 prize为结束时需要转到哪个奖品
 	turntableLottery.lotStart({ prize: 2 })
 },
 onFinsh(e) {
  // 结束抽奖 e.detail为返回的中奖数据
  console.log(e.detail)
  // e.detail.id为抽奖时传入的id
  // e.detail.prize为中奖数据（若lotteryData里未传prizeList则为空对象）
 },
```
<a name="TmcMW"></a>
#### 属性说明
| 字段名 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| lotteryData | Object | 是 | 转盘抽奖所需资源 |
| turntable | Object | 是 | 转盘背景所需资源 |
| pointer | Object | 是 | 指针所需资源 |
| config | Object | 是 | 旋转所需资源 |
| prizeList | Array | 否 | 奖品列表 |
| pointer.x | Number | 是 | 指针x轴坐标 |
| pointer.y | Number | 是 | 指针x轴坐标 |
| time | Number | 是 | 旋转时间（秒） |
| animation | String | 是 | 旋转动画 |
| allPrize | Number | 是 | 奖品总数 |
| round | Number | 是 | 旋转几圈 |
| onFinsh | Function | 是 | 抽奖结束回调 |
| onInitDone | Function | 是 | 初始化 |
| lotStart | Function | 是 | 开始抽奖方法---需传入一个对象 |

<a name="jTDNS"></a>
#### 注意

- 开始抽奖时传入的prize不是下标，是奖品总数