|
|
@ -250,7 +250,7 @@ export default { |
|
|
|
remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png', |
|
|
|
spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png', |
|
|
|
disabledSpinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9b7383c1f80bb32a279791879947791a.png', |
|
|
|
modalBgImg: '../../assets/img/wealthGoldenWheel/bg.png', |
|
|
|
modalBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/f75ce9ca2703662fd3176dd0493f6d7b.png', |
|
|
|
prizeAmountImg: 'https://d31zlh4on95l9h.cloudfront.net/images/878b8ea0c78bcafdaf4f6eb63a0b2eef.png', |
|
|
|
closeBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png', |
|
|
|
noTimesImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a67e8b3de6e441af7bcb8fbbb2153ec2.png', |
|
|
@ -503,7 +503,7 @@ async loadHistoryRecord() { |
|
|
|
|
|
|
|
// 计算需要旋转的总角度(确保多转几圈) |
|
|
|
// 从当前位置旋转到目标位置,加上多转的圈数(3-5圈) |
|
|
|
const extraRotations = 4 + Math.floor(Math.random() * 3); // 4-5圈 |
|
|
|
const extraRotations = 3 + Math.floor(Math.random() * 3); // 4-5圈 |
|
|
|
const extraDegrees = extraRotations * 360; |
|
|
|
|
|
|
|
// 计算最终旋转角度 |
|
|
@ -544,6 +544,10 @@ async loadHistoryRecord() { |
|
|
|
|
|
|
|
// 计算随机停止位置 |
|
|
|
this.targetPointerRotation = this.calculateRandomStop(); |
|
|
|
|
|
|
|
// 设置CSS变量,用于动画 |
|
|
|
document.documentElement.style.setProperty('--target-pointer-rotation', `${this.targetPointerRotation}deg`); |
|
|
|
|
|
|
|
// 开始旋转动画 |
|
|
|
this.pointerRotation = this.targetPointerRotation; |
|
|
|
|
|
|
@ -554,11 +558,10 @@ async loadHistoryRecord() { |
|
|
|
this.isSpinning = false; |
|
|
|
|
|
|
|
if (success) { |
|
|
|
setTimeout(() => { |
|
|
|
// 直接显示弹窗,无需额外延迟 |
|
|
|
this.showPrizeModal = true; |
|
|
|
}, 1); |
|
|
|
} |
|
|
|
}, 30); |
|
|
|
} |
|
|
|
}, 4000); |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
console.error('查询剩余次数失败:', error); |
|
|
@ -802,7 +805,7 @@ async loadHistoryRecord() { |
|
|
|
|
|
|
|
/* 旋转动画 - 使用requestAnimationFrame优化 */ |
|
|
|
.pointer-img.spinning { |
|
|
|
animation: smooth-spin 4s cubic-bezier(0.2) forwards; |
|
|
|
animation: smooth-spin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; |
|
|
|
/* 添加这些属性确保性能 */ |
|
|
|
backface-visibility: hidden; |
|
|
|
transform: translateZ(0); |
|
|
@ -812,7 +815,7 @@ async loadHistoryRecord() { |
|
|
|
@keyframes smooth-spin { |
|
|
|
0% { |
|
|
|
transform: rotate(-21.5deg); |
|
|
|
animation-timing-function: cubic-bezier(0.1); |
|
|
|
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(var(--target-pointer-rotation, 1440deg)); |
|
|
|