How to use the WeChat Mini Program lottery component

npm i lottery-turntable-for-wx-miniprogram

{
 "usingComponents": {
  "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
 }
}

const datas = [{
 "id": "792085712309854208",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 1"
}, {
 "id": "766410261029724160",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 2"
}, {
 "id": "770719340921364480",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 3"
}, {
 "id": "770946438416048128",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 4"
}, {
 "id": "781950121802735616",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 5"
}, {
 "id": "766411654436233216",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 6"
}, {
 "id": "770716883860332544",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 7"
}, {
 "id": "796879308510732288",
 "imgUrl": "../../images/icon.png",
 "title": "Thunder Platinum Member Monthly Card - 8"
}];
 
Page({
 data: {
  datas: datas, // data prizeId: '', // The winning result id is passed to the component through attributes config: { // Turntable configuration is passed to the component through attributes titleLength: 7
  }
 },
 /**
  * Insufficient times callback* @param e
  */
 onNotEnoughHandle(e) {
  wx.showToast({
   icon: 'none',
   title: e.detail
  })
 },
 
 /**
  * Lottery callback*/
 onLuckDrawHandle() {
  this.setData({
   prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
  });
 },
 
 /**
  * Animation rotation completion callback */
 onLuckDrawFinishHandle() {
  const datas = this.data.datas;
  const data = datas.find((item) => {
   return item.id === this.data.prizeId;
  });
  wx.showToast({
   icon: 'none',
   title: `Congratulations on winning ${data.title}`
  })
  this.setData({
   prizeId: ''
  });
 }
})
 

<lottery-turntable
   data="{{datas}}"
   prize-id="{{prizeId}}"
   count="{{5}}"
   config="{{config}}"
   bindLuckDraw="onLuckDrawHandle"
   bindNotEnough="onNotEnoughHandle"
   bindLuckDrawFinish="onLuckDrawFinishHandle"
  ></lottery-turntable>

/**
 * ease: The values ​​are as follows* 'linear' The speed of the animation is the same from beginning to end* 'ease' The animation starts at a slow speed, then speeds up, and slows down before the end* 'ease-in' The animation starts at a slow speed* 'ease-in-out' The animation starts and ends at a slow speed* 'ease-out' The animation ends at a slow speed* 'step-start' The animation jumps to the end state in the first frame and continues to end* 'step-end' The animation remains in the start state and jumps to the end state in the last frame*/
// The following is the default configuration let config = {
 size: {
  width: '572rpx',
  height: '572rpx'
 }, // Turntable width and heightbgColors: ['#FFC53F', '#FFED97'], // The background color of the turntable interval supports multiple color alternationfontSize: 10, // Text sizefontColor: '#C31A34', // Text colortitleMarginTop: 12, // Outermost text margintitleLength: 6 // Outermost text numbericonWidth: 29.5, // Icon widthiconHeight: 29.5, // Icon heighticonAndTextPadding: 4, // The margin between the innermost text and iconduration: 8000, // Turntable rotation animation durationrate: 1.5, // Obtained by duration s / number of circlesborder: 'border: 10rpx solid #FEFAE4;', // Turntable borderease: 'ease-out' // Turntable animation};