更新记录

1.0.0（2023-08-19） 下载此版本

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

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × × × ×

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>

data.js

const tigerData = {
    "type": 1,
    "createTime": "2023-07-28 06:02:16",
    "templateName": "老虎机抽奖",
    "prizeList": [{
        "image": "http://assets.shinshen.com/static/prizeImage/1692177434635-8.png",
        "score": 100,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "积分",
        "oneUserWinNum": 0,
        "giftNum": 50,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "rule": "ABA",
        "weight": 300,
        "giftType": 2,
        "id": 237,
        "sort": 1
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177441696-9.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "weight": 1000,
        "giftType": 3,
        "id": 238,
        "sort": 2
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177454785-0.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "旅行洗发水",
        "oneUserWinNum": 0,
        "giftNum": 10,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "rule": "AAA",
        "weight": 200,
        "giftType": 1,
        "id": 239,
        "sort": 3
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177459829-1.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "weight": 1000,
        "giftType": 3,
        "id": 240,
        "sort": 4
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177463429-2.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "weight": 1000,
        "giftType": 3,
        "id": 241,
        "sort": 5
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177473553-3.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "口罩",
        "oneUserWinNum": 0,
        "giftNum": 1,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "rule": "AAA",
        "weight": 100,
        "giftType": 1,
        "id": 242,
        "sort": 6
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177478954-4.png",
        "score": 0,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "weight": 1000,
        "giftType": 3,
        "id": 243,
        "sort": 7
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177482190-5.png",
        "score": 10,
        "createTime": "2023-08-17 20:49:49",
        "giftName": "积分",
        "oneUserWinNum": 0,
        "giftNum": 507,
        "prizeDrawId": "DF0B19DA1EA04C5A935E39FAD61FB74D",
        "rule": "AAB",
        "weight": 400,
        "giftType": 2,
        "id": 244,
        "sort": 8
    }],
    "status": 1
}

const nineBoxData = {
    "type": 2,
    "createTime": "2023-08-13 12:54:06",
    "templateName": "九宫格抽奖",
    "prizeList": [{
        "image": "http://assets.shinshen.com/static/prizeImage/1692177062649-7.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 1000,
        "giftType": 3,
        "id": 212,
        "sort": 1
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177066163-8.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 1000,
        "giftType": 3,
        "id": 213,
        "sort": 2
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177077099-9.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "按摩器",
        "oneUserWinNum": 0,
        "giftNum": 1,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 100,
        "giftType": 1,
        "id": 214,
        "sort": 3
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177085476-0.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 1000,
        "giftType": 3,
        "id": 215,
        "sort": 4
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177098783-1.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "小密梳",
        "oneUserWinNum": 0,
        "giftNum": 100,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 200,
        "giftType": 1,
        "id": 216,
        "sort": 5
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177288504-5.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 1000,
        "giftType": 3,
        "id": 217,
        "sort": 6
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177292967-6.png",
        "score": 500,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "积分500",
        "oneUserWinNum": 0,
        "giftNum": 200,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 300,
        "giftType": 2,
        "id": 218,
        "sort": 7
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177297300-7.png",
        "score": 0,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 1000,
        "giftType": 3,
        "id": 219,
        "sort": 8
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177303632-8.png",
        "score": 300,
        "createTime": "2023-08-17 20:14:13",
        "giftName": "积分300",
        "oneUserWinNum": 0,
        "giftNum": 500,
        "prizeDrawId": "D98947C55E3144C2A5B0CF43B666D0EC",
        "weight": 400,
        "giftType": 2,
        "id": 220,
        "sort": 9
    }]
}

const turnTabelData = {
    "type": 1,
    "createTime": "2023-07-28 21:37:45",
    "templateName": "转盘抽奖",
    "prizeList": [{
        "image": "http://assets.shinshen.com/static/prizeImage/1692177369914-0.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 100,
        "giftType": 3,
        "id": 245,
        "sort": 1
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177374759-1.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "\"立“式洗发水",
        "oneUserWinNum": 0,
        "giftNum": 10,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 200,
        "giftType": 1,
        "id": 246,
        "sort": 2
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177396382-2.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 100,
        "giftType": 3,
        "id": 247,
        "sort": 3
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177405517-3.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "按摩仪",
        "oneUserWinNum": 0,
        "giftNum": 50,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 100,
        "giftType": 1,
        "id": 248,
        "sort": 4
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177412728-4.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 100,
        "giftType": 3,
        "id": 249,
        "sort": 5
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177416024-5.png",
        "score": 500,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "500积分",
        "oneUserWinNum": 0,
        "giftNum": 500,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 300,
        "giftType": 2,
        "id": 250,
        "sort": 6
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177419286-6.png",
        "score": 100,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "100积分",
        "oneUserWinNum": 0,
        "giftNum": 1000,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 400,
        "giftType": 2,
        "id": 251,
        "sort": 7
    }, {
        "image": "http://assets.shinshen.com/static/prizeImage/1692177422651-7.png",
        "score": 0,
        "createTime": "2023-08-17 20:50:37",
        "giftName": "谢谢参与",
        "oneUserWinNum": 0,
        "giftNum": 0,
        "prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
        "weight": 100,
        "giftType": 3,
        "id": 252,
        "sort": 8
    }]
}

export {
    tigerData,
    turnTabelData,
    nineBoxData
}

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.onStart({
                    index: hitIndex,
                    success(res) {
                        _this.handleResult(res)
                    }
                })
            },
        }

    }

其他

更多资源

扫描二维码可在线体验

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...