更新记录

1.0.0（2023-08-19）

1. 添加老虎机、九宫格、大转盘三种抽奖模式

平台兼容性

ss-raffle 使用说明

1. 使用示例

Html

    <!-- 老虎机 -->
    <Ss-raffle-tiger ref="tigerMachine" :prize-list="prizeList" v-if="type==1"></Ss-raffle-tiger>

    <!-- 大转盘 -->
    <Ss-raffle-turntable @onStopped="handleResult" :prizeList="prizeList" v-if="type==2"></Ss-raffle-turntable>

    <!-- 九宫格 -->
    <ss-raffle-9box ref="nineBoxMachines" :goods="prizeList" @start="startCallBack"
        v-if="type==3"></ss-raffle-9box>

Javascript

    import SsRaffleTiger from '@/components/ss-raffle-tiger/ss-raffle-tiger'
    import SsRaffleTurntable from '@/components/ss-raffle-turntable/ss-raffle-turntable'
    import SsRaffle9Box from '@/components/ss-raffle-9box/ss-raffle-9box'
    import { tigerData, turnTabelData, nineBoxData } from './data.js'

    export default {
        components: {
            SsRaffleTiger,
            SsRaffleTurntable,
            SsRaffle9Box
        },
        data() {
            return {
                type: 1,
                title: ['老虎机抽奖', '大转盘抽奖', '九宫格抽奖'],
                prizeList: []
            };
        },
        onLoad(options) {
            let _this = this
            this.type = options.type || 1
            uni.setNavigationBarTitle({
                title: _this.title[_this.type - 1]
            })
            // 模拟数据
            if (this.type == 1) {
                this.prizeList = tigerData.prizeList || []
            } else if (this.type == 2) {
                this.prizeList = turnTabelData.prizeList || []
            } else {
                this.prizeList = nineBoxData.prizeList || []
            }
        },
        onReady() {
            // 此处来模拟抽奖结果 开始
            let lastIndex = this.prizeList.length - 1
            let rArr = this.getRandomArr(lastIndex)
            // console.log(rArr)
            let results = [
                this.prizeList[rArr[0]].id,
                this.prizeList[rArr[1]].id,
                this.prizeList[rArr[2]].id
            ]
            // 此处来模拟抽奖结果 结束
            if (this.type == 1) {
                this.$refs.tigerMachine.init({
                    prizeList: this.prizeList,
                    defaultResults: results,
                    duration: 4000,
                    direction: 'up'
                })
            }
        },
        methods: {
            getRandomArr(max) {
                let arr = []
                while (arr.length < 3) {
                    let num = parseInt(Math.random() * 9)
                    if (arr.indexOf(num) == -1 && num < max) {
                        arr.push(num)
                    }
                }
                return arr
            },
            handleResult(info) {
                let _this = this
                let item = info
                if (info.index != undefined && info.index != null) {
                    item = this.prizeList[info.index]
                }
                setTimeout(() => {
                    uni.showModal({
                        title: '抽奖结果',
                        content: item.giftName,
                        showCancel: false,
                        success(res) {}
                    })
                }, 200)
            },
            // 点击抽奖按钮触发回调
            startCallBack() {
                let _this = this
                let res = {
                    "giftName": "按摩仪",
                    "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
                    "id": 248,
                }
                console.log(res.id, this.prizeList.map(i => i.id).join('-'))
                if (!res.id) {
                    console.log(res)
                    return
                }
                // 计算会停在哪里
                const hitIndex = this.prizeList.findIndex(i => i.id == res.id)
                // 先开始旋转
                this.$refs.nineBoxMachines.({
                    index: hitIndex,
                    success(res) {
                        _this.handleResult(res)
                    }
                })
            },
        }

    }

其他

更多资源

扫描二维码可在线体验