更新记录

0.0.2（2023-10-12） 下载此版本

新增抽奖概率配置

0.0.1（2023-10-11） 下载此版本

可自定义的九宫格抽奖插件

平台兼容性

一、使用实例：

<template>
    <view class="container-content">
        <view class="sudoku-grid">
            <sudoku-grid :items="sudokuItems" :buttonText="lotteryButtonText" />
        </view>
    </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'App',
    data() {
        return {
      // 模拟后端返回的数据
            sudokuItems: [
        // probability 为抽中奖的概率
                { index: 0, text: '随机积分', image: '../../static/img/card-1.png', probability: 0.2 },
                { index: 1, text: '很遗憾', image: '../../static/img/card-2.png', probability: 0.8 },
                { index: 2, text: '博士工具一套', image: '../../static/img/card-3.png', probability: 0.01 },
                { index: 3, text: '速讯工装一套', image: '../../static/img/card-4.png',  probability: 0.02 },
                { index: 4, text: '奖品6', image: '../../static/img/card-1.png',  probability: 0.6 },
                { index: 5, text: '随机积分', image: '../../static/img/card-1.png',  probability: 0.5 },
                { index: 6, text: '10积分', image: '../../static/img/card-1.png',  probability: 0.3 },
                { index: 7, text: '200积分', image: '../../static/img/card-1.png',  probability: 0.4 }
                // 添加更多奖品项
            ],
      // 按钮的文案
            lotteryButtonText: '开始抽奖'
        }
    }
})
</script>

<style scoped lang="scss">
/* 添加全局样式或者组件内的样式 */
.sudoku-grid {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
}
</style>