uni-app 幸运转盘 - 陌上华年比例

如何调整比例

怎么整比例呢？比如奖品1是多少比例，奖品2是多少比例，现在每次都固定一个了

itying888 1楼•5 小时前

你是说中奖概率？这得自己算，不过这东西一般是后端返回的

wuwangju 2楼•5 小时前

在处理 uni-app 幸运转盘功能时，你可以通过动态计算每个奖项的比例来实现转盘功能。下面是一个简化的示例代码，展示了如何设置和管理幸运转盘的比例。假设我们有一个名为“陌上华年”的奖项，需要为其设置特定的比例。

1. 数据准备

首先，我们需要定义奖项和对应的比例。这里假设有三个奖项：一等奖、二等奖和“陌上华年”（三等奖）。

data() {
    return {
        prizes: [
            { name: '一等奖', ratio: 1 },  // 比例可以根据实际情况调整
            { name: '二等奖', ratio: 5 },
            { name: '陌上华年', ratio: 15 }  // 为“陌上华年”设置较高的比例
        ],
        totalRatio: 0,
        segments: []
    };
},

2. 计算总比例和每个奖项的区间

在 mounted 生命周期钩子中，我们计算总比例，并根据比例生成每个奖项的区间。

mounted() {
    this.calculatePrizeRanges();
},
methods: {
    calculatePrizeRanges() {
        this.totalRatio = this.prizes.reduce((sum, prize) => sum + prize.ratio, 0);

        let start = 0;
        this.segments = this.prizes.map(prize => {
            const end = (prize.ratio / this.totalRatio) * 360;  // 假设转盘是360度
            return {
                name: prize.name,
                start,
                end,
                range: end - start
            };
            start = end;
        });
    }
}

3. 幸运转盘逻辑

接下来，我们可以实现一个简单的转盘逻辑，通过生成一个随机数来决定落在哪个区间。

methods: {
    spinWheel() {
        const randomAngle = Math.random() * 360;
        let prize = null;

        this.segments.forEach(segment => {
            if (randomAngle >= segment.start && randomAngle < segment.end) {
                prize = segment.name;
            }
        });

        console.log('你获得了：', prize);
    }
}

4. 模板部分

在模板部分，你可以添加一个按钮来触发转盘旋转。

<template>
    <view>
        <button @click="spinWheel">旋转转盘</button>
    </view>
</template>