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

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

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

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

import Taro from '@tarojs/taro'
import { NineGrid } from '@lylb/tzo-ui-marketing'
export default class Index extends Taro.Component {
    constructor() {
        super(...arguments)
        this.state = {
            nineGridConfig: {
                size: 578,
                innerSize: 550,
                backgroundImage:
                    'https://mystore-img.watsonsvip.com.cn/upload/6adf9ba5-0475-43d7-add2-7ad356b5bc0b.png',
                playImage:
                    'https://mystore-img.watsonsvip.com.cn/upload/31e909fd-4645-4761-ba28-cb2840f28ce3.png',
                prizeStyle: {
                    backgroundImage:
                        'https://mystore-img.watsonsvip.com.cn/upload/b6189b66-5e91-4393-8951-096273f1cada.png'
                }
            },
            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加油红包'
                },
                {
                    id: 7,
                    image: 'https://yanxuan.nosdn.127.net/static-union/165951604419ac9a.png',
                    name: '5元直减红包'
                },
                {
                    id: 8,
                    image: 'https://yanxuan.nosdn.127.net/static-union/1659516044816161.png',
                    name: '700加油红包'
                }
            ]
        }
    }
    handlePlay = (onFinish) => {
        onFinish(Math.ceil(Math.random() * 7) + 1).then(
            (item) => {
                console.log('中奖啦 >>>>>>', item)
                Taro.showToast({
                    title: `恭喜中奖了！${item.name}`,
                    icon: 'none'
                })
            },
            () => {
                console.log('未中奖')
            }
        )
    }
    render() {
        const { bigWheelConfig, prizeGroup } = this.state
        return (
            <View>
                <NineGrid
                    config={nineGridConfig}
                    prizeGroup={prizeGroup}
                    onPlay={handlePlay}
                />
            </View>
        )
    }
}