uniapp 九宫格抽奖

抽奖

样式就自己写吧

实现思路：因为是九宫格，里面商品只会有九个，他们的index是固定的，然后根据后端返回的中奖商品id找出他的index，设置抽奖动画固定跑三遍然后加上你中奖id的index即可

代码：

// 点击后 true 获取奖品后 false 防止重复点击

rolling: false,

// 滚动选中的id

currentIdx: -1,

// 中奖id的key

prizeId: null

点击抽奖事件

// 点击抽奖事件
			drawChange() {
				if (this.rolling) return
				this.currentIdx = -1
				this.rolling = true
				var id = 2
				// 根据key值所以加1
				this.prizeId = this.drawList.findIndex(item => item.id == id)
				if (this.prizeId < 0) {
					this.$Common.showToast('系统繁忙，请稍后重试')
				} else {
					this.prizeId += 1
					this.startAnimation()
				}
			},
			startAnimation() {
				let speed = 100; // 初始速度(ms)
				let step = 0;
				const totalSteps = 9 + this.prizeId; // 总滚动步数
				this.intervalId = setInterval(() => {
					if (step >= totalSteps) {
						clearInterval(this.intervalId);
						// 打开弹窗
						this.stopAtTarget();
					} else {
						this.currentIdx = (this.currentIdx + 1) % this.drawList.length;
						speed += 40; // 逐步增加间隔时间模拟减速
						step++;
					}
				}, speed);
			},