hookehuyr

fix(PointsCollector): 调整积分收集动画中心点位置并优化点击区域

将动画中心点从50%调整为75%以优化视觉效果
统一积分显示区域的点击事件处理
限制随机点生成在视图顶部60%范围内
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
2 <view class="points-collector" :style="{ height: height }"> 2 <view class="points-collector" :style="{ height: height }">
3 <!-- 中心圆形显示总积分 --> 3 <!-- 中心圆形显示总积分 -->
4 <view class="center-circle"> 4 <view class="center-circle">
5 - <view class="total-points"> 5 + <view class="total-points" @tap="handleGoToRewards">
6 <text class="points-number">{{ animatedTotalPoints }}分</text> 6 <text class="points-number">{{ animatedTotalPoints }}分</text>
7 - <text class="points-label" @tap="handleGoToRewards">去兑换</text> 7 + <text class="points-label">去兑换</text>
8 </view> 8 </view>
9 </view> 9 </view>
10 10
...@@ -93,7 +93,7 @@ const generateMockData = () => { ...@@ -93,7 +93,7 @@ const generateMockData = () => {
93 const minX = radiusXPercent; 93 const minX = radiusXPercent;
94 const maxX = 100 - radiusXPercent; 94 const maxX = 100 - radiusXPercent;
95 const minY = radiusXPercent + 5; 95 const minY = radiusXPercent + 5;
96 - const maxY = 100 - radiusXPercent - 15; 96 + const maxY = 60; // 限制在视图的顶部60%
97 97
98 do { 98 do {
99 attempts++; 99 attempts++;
...@@ -108,7 +108,7 @@ const generateMockData = () => { ...@@ -108,7 +108,7 @@ const generateMockData = () => {
108 108
109 // 检查与中心禁飞区的距离 109 // 检查与中心禁飞区的距离
110 const dxCenter = x - 50; 110 const dxCenter = x - 50;
111 - const dyCenter = y - 50; 111 + const dyCenter = y - 75; // 中心点在75%
112 const distanceFromCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter); 112 const distanceFromCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter);
113 if (distanceFromCenter < centerNoFlyZone) { 113 if (distanceFromCenter < centerNoFlyZone) {
114 hasCollision = true; 114 hasCollision = true;
...@@ -157,7 +157,7 @@ const getItemStyle = (item) => { ...@@ -157,7 +157,7 @@ const getItemStyle = (item) => {
157 157
158 if (item.collecting) { 158 if (item.collecting) {
159 style.left = '50%'; 159 style.left = '50%';
160 - style.top = '50%'; 160 + style.top = '75%';
161 style.transform = 'translate(-50%, -50%) scale(0)'; 161 style.transform = 'translate(-50%, -50%) scale(0)';
162 style.opacity = 0; 162 style.opacity = 0;
163 style.zIndex = 20; // 飞向中心时置于顶层 163 style.zIndex = 20; // 飞向中心时置于顶层
...@@ -268,7 +268,7 @@ const handleGoToRewards = () => { ...@@ -268,7 +268,7 @@ const handleGoToRewards = () => {
268 .center-circle { 268 .center-circle {
269 position: absolute; 269 position: absolute;
270 left: 50%; 270 left: 50%;
271 - top: 50%; 271 + top: 75%;
272 transform: translate(-50%, -50%); 272 transform: translate(-50%, -50%);
273 width: 200rpx; 273 width: 200rpx;
274 height: 200rpx; 274 height: 200rpx;
......