# taro3安装营销插件包
npm install @lylb/tzo-ui-marketing

# taro2安装tzo-ui包
npm install @lylb/tzo-ui

import { BigWheel } from '@lylb/tzo-ui-marketing'

import { BigWheel } from '@lylb/tzo-ui'

import Taro from '@tarojs/taro'
import { BigWheel } from '@lylb/tzo-ui-marketing'
export default class Index extends Taro.Component {
    constructor() {
        super(...arguments)
        this.state = {
            bigWheelConfig: {
                size: 523.5,
                prizeOffset: 30,
                turntableImage:
                    'http://tzo-ui.wangchunhai.com/images/wheel-bg.png',
                offsetRotate: 30,
                prizeScale: 0.6,
                pointerImage:
                    'https://qw-oss1.oss-cn-shenzhen.aliyuncs.com/ba_assistant/201a3a40-2f3e-49c6-a067-13a4afabaa94-signin_draw_pointer.png',
                prize: {
                    textColor: '#222222'
                }
            },
            prizeGroup: [
                {
                    id: 1,
                    image: 'https://yanxuan.nosdn.127.net/static-union/1659516044c3a18c.png', // 奖品图片
                    name: '199减5红包' // 奖品名称
                },
                {
                    id: 2,
                    image: 'https://yanxuan.nosdn.127.net/static-union/165951604487ef12.png',
                    name: '99减5红包'
                },
                {
                    id: 3,
                    image: 'https://yanxuan.nosdn.127.net/static-union/165951604419ac9a.png',
                    name: '5元直减红包'
                },
                {
                    id: 4,
                    image: 'https://yanxuan.nosdn.127.net/static-union/1659516044816161.png',
                    name: '700加油红包'
                },
                {
                    id: 5,
                    image: 'https://yanxuan.nosdn.127.net/static-union/165951604419ac9a.png',
                    name: '5元直减红包'
                },
                {
                    id: 6,
                    image: 'https://yanxuan.nosdn.127.net/static-union/1659516044816161.png',
                    name: '700加油红包'
                }
            ]
        }
    }
    handlePlay = (onFinish) => {
        onFinish(Math.ceil(Math.random() * 5) + 1).then(
            (item) => {
                Taro.showToast({
                    title: `恭喜中奖了！${item.name}`,
                    icon: 'none'
                })
            },
            () => {
                console.log('未中奖')
            }
        )
    }
    render() {
        const { bigWheelConfig, prizeGroup } = this.state
        return (
            <View>
                <BigWheel
                    config={bigWheelConfig}
                    prizeGroup={prizeGroup}
                    onPlay={this.handlePlay()}
                />
            </View>
        )
    }
}