如何用lucky-canvas插件，写一个老虎机抽奖组件？

DrawLottery/index.tsx文件

import { useEffect, useRef, useState } from "react";
import { View, Image } from "@tarojs/components";
import { SlotMachine } from "@lucky-canvas/taro/react";

import "./index.less";

const DrawLottery = () => {
  const myLucky = useRef<Mylucky>();
  const [lotteryConfig, setLotteryConfig] = useState<LotteryConfigI>({
    prizes: [],
    slots: [],
  });
  // 是否正在抽奖
  const _isDrawing = useRef(false)
  const luckList = [
    {
      giftImage:
        "https://resurl.fuchuang.com/584f26b0-8426-11ee-a4be-8be78400b871-callmgmt-login.png",
    },
    {
      giftImage:
        "https://resurl.fuchuang.com/db679e40-8482-11ee-a4be-8be78400b871-douhuiAI_546894.jpg",
    },
    {
      giftImage:
        "https://resurl.fuchuang.com/e4b97f00-8a76-11ee-a4be-8be78400b871-Snipaste_2023-03-20_17-23-17.png",
    },
  ];

  useEffect(() => {
    init();
  }, []);

  const onStartLottery = async () => {
    try {
      if (_isDrawing.current) {
        return
      }
      _isDrawing.current = true
      myLucky.current?.play();
      // 调用抽奖接口,获取抽奖结果
      setTimeout(() => {
        myLucky.current?.stop([1, 1, 2]);
        _isDrawing.current = false
      }, 2500);
    } catch (error) {
      // 接口报错时，设置老虎机为不选中
      myLucky.current?.stop([0, 1, 2]);
      _isDrawing.current = false
    }
  };
  const onEndLottery = (prize) => {
    console.log("奖品详情:", prize);
  };
  const init = () => {
    let prizes = [] as prizesItemI[];
    let order1 = [] as number[]; // 老虎机第一列奖品排序index
    luckList.map((item, index) => {
      order1.push(index);
      prizes.push({
        borderRadius: "24rpx",
        background: "#FEEBB9",
        imgs: [
          {
            src: item.giftImage,
            width: "150rpx",
            height: "150rpx",
            top: "25rpx",
          },
        ],
      });
    });
    let slots = [] as slotsItemI[];
    if (order1.length) {
      const order2 = [...order1];
      order2.push(order2.shift() as number);
      const order3 = [...order2];
      order3.push(order3.shift() as number);
      slots = [
        { order: order1, direction: 1 },
        { order: order2, direction: -1 },
        { order: order3, direction: 1 },
      ];
    }

    setLotteryConfig({
      prizes,
      slots,
    });
  };

  const defaultConfig = {
    rowSpacing: "16rpx",
    accelerationTime: 3000,
    decelerationTime: 3000,
  };
  return (
    <View className="com-draw-lottery">
      <View className="com-draw-lottery-bg">
        <SlotMachine
          ref={myLucky}
          width="614rpx"
          height="199rpx"
          prizes={lotteryConfig.prizes}
          slots={lotteryConfig.slots}
          defaultConfig={defaultConfig}
          onEnd={onEndLottery}
        ></SlotMachine>
      </View>
      <Image
        onClick={onStartLottery}
        className="lottery-btn"
        src="https://image.fuchuang.com/prod/ba4dc52_slotmachine_button20221010140613.png"
      />
    </View>
  );
};

export default DrawLottery;

DrawLottery/index.less文件

.com-draw-lottery {
  text-align: center;
  .com-draw-lottery-bg {
    background: linear-gradient(#de3d00, #c91320);
    border-radius: 32px;
    padding: 12px;
    box-sizing: border-box;
  }
  .lottery-btn {
    width: 565px;
    height: 150px;
    margin-top: 39px;
  }
}