fixbug:修改抽奖停留位置不对

This commit is contained in:
2025-08-15 20:52:56 +08:00
parent b5425c30e8
commit 0399791e8f
4 changed files with 61 additions and 62 deletions
@@ -115,8 +115,9 @@ export default {
const preId = option.preId; const preId = option.preId;
// 分红金额 // 分红金额 balance
if (category === 'bonus') { if (category === 'balance') {
this.source = [ this.source = [
{ {
name: "今日分红数量", name: "今日分红数量",
@@ -177,6 +178,7 @@ export default {
]; ];
} }
// 抽奖次数 raffle
if (lockId && lockId !== 'null') { if (lockId && lockId !== 'null') {
this.lockId = lockId; this.lockId = lockId;
@@ -15,7 +15,7 @@
<!-- 中间格子作为抽奖按钮 (索引4) --> <!-- 中间格子作为抽奖按钮 (索引4) -->
<template v-if="index === 4"> <template v-if="index === 4">
<image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix" <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
@click="handleStartClick(1)"></image> @click="handleStartLottery(1)"></image>
</template> </template>
<!-- 其他8个奖品格子 --> <!-- 其他8个奖品格子 -->
@@ -25,10 +25,11 @@
</template> </template>
</view> </view>
</view> </view>
<view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartClick(10)"> 连续抽奖10次 </view> <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
</template> </template>
<script> <script>
import { raffleExecute } from '@/api/raffle.js';
export default { export default {
props: { props: {
// 奖品数据数组 // 奖品数据数组
@@ -42,12 +43,13 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 指定停止的位置索引 (0-7)
targetIndex: { remainCount: {
type: Number, type: Number,
default: null default: 0
} }
}, },
data() { data() {
return { return {
isRotating: false, // 是否正在旋转 isRotating: false, // 是否正在旋转
@@ -62,7 +64,9 @@ export default {
SPEED_INCREMENT: 15, // 减速时的速度增加量 SPEED_INCREMENT: 15, // 减速时的速度增加量
MIN_SPEED: 50, // 最小速度 MIN_SPEED: 50, // 最小速度
STOP_SPEED: 250, // 停止时的速度阈值 STOP_SPEED: 250, // 停止时的速度阈值
animationTimer: null // 动画计时器 animationTimer: null, // 动画计时器
targetIndex: 0,
currentPrize: []
} }
}, },
methods: { methods: {
@@ -135,37 +139,40 @@ export default {
}) })
}, nextSpeed) }, nextSpeed)
}, },
/**
* 获取目标位置
* @returns {number} 目标位置索引
*/
getTargetStep() {
// 如果传入了targetIndex,则使用传入的值
if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) {
return this.targetIndex
}
// 否则随机生成目标位置(带权重)
return this.getRandomTarget()
},
/**
* 随机生成目标位置(带权重)
* @returns {number} 目标位置索引
*/
getRandomTarget() {
// 奖品权重配置,数值越高概率越大
const weights = [2, 2, 1, 0.5, 2, 1, 3, 2]
const total = weights.reduce((sum, w) => sum + w, 0) // 计算总权重
let random = Math.random() * total // 生成随机数
// 根据权重计算目标位置
for (let i = 0; i < weights.length; i++) {
random -= weights[i] /**
if (random <= 0) return i * 处理开始抽奖事件
*/
async handleStartLottery(num) {
if (this.prizesObj.times <= 0) {
uni.showToast({
title: `您当前未获取到抽奖次数,快去获取吧~`,
icon: 'none'
});
return;
} }
// 兜底:随机返回一个位置 if (this.prizesObj.times < num) {
return Math.floor(Math.random() * this.LOTTERY_PATH.length) return;
}
const params = {
id: this.prizesObj.id,
times: num,
}
const { data } = await raffleExecute(params);
this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0]);
console.log("0------", this.prizesObj.prizes, data.idList, this.targetIndex)
this.currentPrize = data.prizeList;
this.handleStartClick(num)
}, },
/** /**
* 处理开始抽奖点击事件 * 处理开始抽奖点击事件
*/ */
@@ -175,9 +182,18 @@ export default {
console.log('抽奖被禁用或正在进行中') console.log('抽奖被禁用或正在进行中')
return return
} }
// 减少抽奖次数
if (this.remainCount <= 0) {
uni.showToast({
title: '抽奖次数不足',
icon: 'none'
})
return
}
// 通知父组件开始抽奖 // 通知父组件开始抽奖
this.$emit('start', num) this.$emit('start', num, this.currentPrize)
// 开始抽奖动画(无论父组件做了什么处理) // 开始抽奖动画(无论父组件做了什么处理)
this.startLotteryAnimation() this.startLotteryAnimation()
@@ -196,7 +212,7 @@ export default {
this.runAnimation({ this.runAnimation({
currentStep: 0, currentStep: 0,
speed: this.INITIAL_SPEED, speed: this.INITIAL_SPEED,
targetStep: this.getTargetStep(), targetStep: this.targetIndex,
cycleCount: 0, cycleCount: 0,
totalSteps: 0 totalSteps: 0
}) })
@@ -10,8 +10,8 @@
<view class="prize-name">{{ item.prizeName }}</view> <view class="prize-name">{{ item.prizeName }}</view>
</view> </view>
</view> </view>
<view class="close" @click="jumpGetFun"> </view> <view class="close" @click.stop="jumpGetFun"> </view>
<view class="confirm-btn" @click="jumpGetFun">立即领取</view> <view class="confirm-btn" @click.stop="jumpGetFun">立即领取</view>
</view> </view>
</view> </view>
</template> </template>
+4 -23
View File
@@ -11,8 +11,8 @@
<!-- 九宫格抽奖组件 --> <!-- 九宫格抽奖组件 -->
<LotteryGrid :prizesObj="prizesObj" :is-disabled="isRotating" @start="handleStartLottery" <LotteryGrid :prizesObj="prizesObj" :remainCount="prizesObj.times" :is-disabled="isRotating"
@complete="handleLotteryComplete" :targetIndex="targetIndex" /> @start="handleStartLottery" @complete="handleLotteryComplete" :targetIndex="targetIndex" />
<!-- 规则 --> <!-- 规则 -->
<view class="rule"> <view class="rule">
@@ -43,7 +43,6 @@ export default {
}, },
// 状态管理 // 状态管理
remainCount: 3, // 剩余抽奖次数
isRotating: false, // 是否正在抽奖 isRotating: false, // 是否正在抽奖
showResult: false, // 是否显示结果弹窗 showResult: false, // 是否显示结果弹窗
currentPrize: [],// 当前中奖奖品 currentPrize: [],// 当前中奖奖品
@@ -79,29 +78,11 @@ export default {
/** /**
* 处理开始抽奖事件 * 处理开始抽奖事件
*/ */
async handleStartLottery(num) { async handleStartLottery(num, currentPrize) {
if (this.prizesObj.times <= 0) {
uni.showToast({
title: `您当前未获取到抽奖次数,快去获取吧~`,
icon: 'none'
});
return;
}
if (this.prizesObj.times < num) {
return;
}
const params = { this.currentPrize = currentPrize;
id: this.prizesObj.id,
times: num,
}
const { data } = await raffleExecute(params);
this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0]);
this.currentPrize = data.prizeList;
console.log("0------", this.currentPrize)
// 减少抽奖次数并标记为正在抽奖 // 减少抽奖次数并标记为正在抽奖