更新记录

1.0.1（2024-12-09） 下载此版本

样式细节优化

1.0.0（2024-12-07） 下载此版本

发布扭蛋机组件

平台兼容性

iliya-capsule-toys

uniapp扭蛋机组件，仅测试了vue2、3，h5和微信小程序，理论支持全平台

使用示例

<template>
    <view class="content">
        <iliyaCapsuleToys :giftImgList="giftImgList" :disabled="disabled" :resLv="resLv" :giftRes="giftRes" :resBallImg="resBallImg" @start="start" @canNotStart="canNotStart" @ok="ok" />
    </view>
</template>

<script>
    import iliyaCapsuleToys from '../../components/iliya-capsule-toys/iliya-capsule-toys.vue';
    export default {
        components: {
            iliyaCapsuleToys
        },
        data() {
            return {
                giftRes: {
                    giftName: null,
                    url: ""
                },
                giftImgList: [],
                resBallImg: '',
                disabled: false,
                resLv: 1
            }
        },
        onLoad() {

        },
        methods: {
            start(fn) {
                this.giftRes.giftName = '预制菜'
                this.giftRes.url = '../../static/zi-qiu.png'
                fn()
            },
            canNotStart() {
                uni.showModal({
                    title: '提示',
                    content: '余额不足'
                })
            },
            ok() {
                console.log('确认中奖信息');
            }
        }
    }
</script>

Props

Methods

@start开始抽取，点击抽取按钮时触发，回调播放动画函数，可以在此方法内调用抽奖接口，然后赋值抽奖结果（如果中奖的话），并调用回调函数触发动画

<template>
    <iliyaCapsuleToys  :resLv="resLv" :giftRes="giftRes" @start="start"  />
</template>
<script>
    data() {
        return {
            giftRes: {
                giftName: null,
                url: ""
            },
            resLv: 1
        }
    },
    methods: {
        start(fn) {
        api().then(res=>{
           this.giftRes.giftName = res.data.name
            this.giftRes.url = res.data.url
            fn()
        })
        },
    }
</script>

@canNotStart点击禁言按钮时触发

<template>
    <iliyaCapsuleToys  :resLv="resLv" :giftRes="giftRes" @canNotStart="canNotStart"  />
</template>
<script>
    data() {
        return {
            giftRes: {
                giftName: null,
                url: ""
            },
            resLv: 1
        }
    },
    methods: {
        canNotStart() {
                uni.showModal({
                    title: '提示',
                    content: '余额不足'
                })
            },
    }
</script>

@ok点击确认抽取结果时触发

<template>
    <iliyaCapsuleToys  :resLv="resLv" :giftRes="giftRes" @ok="ok"  />
</template>
<script>
    data() {
        return {
            giftRes: {
                giftName: null,
                url: ""
            },
            resLv: 1
        }
    },
    methods: {
        ok() {
                console.log('确认中奖信息');
            }
    }
</script>

注意事项

如果要运行在小程序，建议把static下的图片丢到服务器上，然后把组件中的图片地址路径替换成服务器地址

想要替换奖品图片可以用giftImgList来替换，或者直接换掉static里的图片