diff --git a/src/assets/img/wealthGoldenWheel/bg.png b/src/assets/img/wealthGoldenWheel/bg.png new file mode 100644 index 0000000..2836b03 Binary files /dev/null and b/src/assets/img/wealthGoldenWheel/bg.png differ diff --git a/src/assets/img/wealthGoldenWheel/pointer.png b/src/assets/img/wealthGoldenWheel/pointer.png new file mode 100644 index 0000000..668cf7a Binary files /dev/null and b/src/assets/img/wealthGoldenWheel/pointer.png differ diff --git a/src/views/wealth/goldenWheel.vue b/src/views/wealth/goldenWheel.vue index 9f04667..cbd7073 100644 --- a/src/views/wealth/goldenWheel.vue +++ b/src/views/wealth/goldenWheel.vue @@ -18,22 +18,33 @@ 转动财富金轮 开启财富人生 - +
- + 财富金轮 - - 指针 - - 指针盖 + + +
+ +
+ + + 指针 + + + 指针盖 +
@@ -70,7 +81,6 @@
奖品数量背景
- {{ prizeAmount }}   {{ prizeAmount }} @@ -236,7 +246,6 @@ export default { ruleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9a3f7680b29e31b60151cf562c0d43cb.png', titleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a87d19806fed47b7fdf18d4b5dd70e65.png', wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/caaf77a490be46c56ae824d2d9aa72f4.png', - pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/72cda5c3b13823aa6ca87a3065fe2197.png', pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/19f2ea90e2560330089214e88eff04b5.png', remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png', spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png', @@ -257,12 +266,12 @@ export default { showNoTimesModal: false, showRuleModal: false, isFirstVisit: true, - currentRotation: -22.5, // 初始旋转-22.5度 + pointerRotation: -21.5, // 指针初始旋转角度 noTimesTimer: null, prizeMessage: '', prizeAmount: '', textWidth: 0, - targetRotation: 0, // 新增:目标旋转角度, + targetPointerRotation: 0, // 指针目标旋转角度 historyRecordListVisible: false, nowMonths: [], @@ -370,7 +379,7 @@ async loadHistoryRecord() { preloadImages() { const images = [ this.historyImg, this.ruleImg, this.titleImg, this.wheelImg, - this.pointerImg, this.pointerCoverImg, this.remainingBgImg, + this.pointerCoverImg, this.remainingBgImg, this.spinBtnImg, this.disabledSpinBtnImg, this.modalBgImg, this.prizeAmountImg, this.closeBtnImg, this.noTimesImg, this.ruleBgImg, this.closeRuleBtnImg @@ -488,19 +497,19 @@ async loadHistoryRecord() { // 随机选择一个区域 (0-7) const randomSector = Math.floor(Math.random() * 8); - // 计算目标角度:从初始位置(-22.5度)到选中区域的中心 + // 计算目标角度:从初始位置(-21.5度)到选中区域的中心 // 每个区域中心的角度 = 区域索引 * 45度 - 22.5度 - const targetAngle = randomSector * sectorDegrees - 22.5; + const targetAngle = randomSector * sectorDegrees - 21.5; // 计算需要旋转的总角度(确保多转几圈) // 从当前位置旋转到目标位置,加上多转的圈数(3-5圈) - const extraRotations = 5 + Math.floor(Math.random() * 3); // 3-5圈 + const extraRotations = 3 + Math.floor(Math.random() * 3); // 4-5圈 const extraDegrees = extraRotations * 360; // 计算最终旋转角度 // 从当前角度旋转到目标角度,加上额外的圈数 // 注意:需要确保旋转方向正确 - let rotationNeeded = targetAngle - this.currentRotation; + let rotationNeeded = targetAngle - this.pointerRotation; // 如果旋转角度为负,加上360度使其为正 if (rotationNeeded < 0) { @@ -508,7 +517,7 @@ async loadHistoryRecord() { } // 加上额外的圈数 - return this.currentRotation + rotationNeeded + extraDegrees; + return this.pointerRotation + rotationNeeded + extraDegrees; }, // 处理转动 @@ -534,13 +543,13 @@ async loadHistoryRecord() { this.isSpinning = true; // 计算随机停止位置 - this.targetRotation = this.calculateRandomStop(); + this.targetPointerRotation = this.calculateRandomStop(); // 设置CSS变量,用于动画 - document.documentElement.style.setProperty('--target-rotation', `${this.targetRotation}deg`); + document.documentElement.style.setProperty('--target-pointer-rotation', `${this.targetPointerRotation}deg`); // 开始旋转动画 - this.currentRotation = this.targetRotation; + this.pointerRotation = this.targetPointerRotation; // 调用抽奖API获取奖品信息 const success = await this.fetchPrizeInfo(); @@ -553,7 +562,7 @@ async loadHistoryRecord() { this.showPrizeModal = true; }, 500); } - }, 3000); + }, 5000); } catch (error) { console.error('查询剩余次数失败:', error); @@ -660,7 +669,7 @@ async loadHistoryRecord() { \ No newline at end of file + +