fixbug:修改抽奖停留位置不对
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|
||||||
// 减少抽奖次数并标记为正在抽奖
|
// 减少抽奖次数并标记为正在抽奖
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user