增加实时环数计算

src/components/BowTargetEdit.vue

@@ -25,7 +25,12 @@ const onClick = async (e) => {
     x: e.detail.x - (rect.value.width * 0.1) / 2,
     y: e.detail.y - rect.value.top - 10,
   };
-  newArrow.ring = calcRing(newArrow.x, newArrow.y);
+  newArrow.ring = calcRing(
+    newArrow.x,
+    newArrow.y,
+    rect.value.width * 0.9,
+    rect.value.width * 0.9
+  );
   arrow.value = newArrow;
 };
 
@@ -66,7 +71,12 @@ const onDrag = async (e) => {
   // 更新坐标
   arrow.value.x = Math.max(0, Math.min(length, arrow.value.x + deltaX));
   arrow.value.y = Math.max(0, Math.min(length, arrow.value.y + deltaY));
-  arrow.value.ring = calcRing(arrow.value.x, arrow.value.y);
+  arrow.value.ring = calcRing(
+    arrow.value.x,
+    arrow.value.y,
+    rect.value.width * 0.9,
+    rect.value.width * 0.9
+  );
 
   // 更新拖拽起始位置
   dragStartPos.value = { x: clientX, y: clientY };
@@ -119,10 +129,14 @@ onMounted(async () => {
       <!-- 编辑按钮组（只在编辑状态下显示） -->
       <view class="edit-buttons" @click.stop>
         <text
-          ><text :style="{ fontSize: '24px', marginRight: '5px' }">{{
-            arrow.ring
-          }}</text
-          >{{ arrow.ring ? "环" : "" }}</text
+          >{{ arrow.ring === 0 ? "未上靶" : arrow.ring
+          }}<text
+            :style="{
+              fontSize: '20px',
+              marginLeft: arrow.ring > 0 ? '5px' : 0,
+            }"
+            >{{ arrow.ring > 0 ? "环" : "" }}</text
+          ></text
         >
         <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
           <image src="../static/arrow-edit-save.png" mode="widthFix" />
@@ -198,7 +212,7 @@ onMounted(async () => {
   display: block;
   line-height: 50px;
   text-align: center;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: bold;
   color: #fff;
 }

src/pages/point-book-edit.vue

@@ -37,7 +37,9 @@ const onSubmit = () => {
     currentArrow.value = 0;
     clickable.value = false;
   } else {
-    console.log("submit", arrowGroups.value);
+    uni.redirectTo({
+      url: `/pages/point-book-detail`,
+    });
   }
 };
 const onClickRing = (ring) => {
@@ -53,10 +55,7 @@ const deleteArrow = () => {
   arrowGroups.value[currentGroup.value][currentArrow.value] = {};
 };
 const onEditDone = (arrow) => {
-  arrowGroups.value[currentGroup.value][currentArrow.value] = {
-    ...arrow,
-    ring: 10,
-  };
+  arrowGroups.value[currentGroup.value][currentArrow.value] = arrow;
   if (currentArrow.value < amount.value - 1) currentArrow.value++;
 };
 

src/util.js

@@ -296,7 +296,38 @@ export const getElementRect = () => {
   });
 };
 
-export const calcRing = (x, y) => {
-  console.log(1111, x, y);
-  return 8;
+export const calcRing = (x, y, targetWidth, targetHeight) => {
+  // 计算靶心坐标（靶纸中心）
+  const centerX = targetWidth / 2;
+  const centerY = targetHeight / 2;
+
+  // 计算点击点到靶心的距离
+  const deltaX = x - centerX;
+  const deltaY = y - centerY;
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  // 计算靶纸半径（取宽高中较小值的一半）
+  const targetRadius = Math.min(targetWidth, targetHeight) / 2;
+
+  // 如果距离超过靶纸半径，则脱靶
+  if (distance > targetRadius) return 0;
+
+  // 计算相对距离（0-1之间）
+  const relativeDistance = distance / targetRadius;
+
+  // 全环靶有10个环，每个环占半径的10%
+  // 从外到内：1环到10环
+  // 距离越近靶心，环数越高
+  if (relativeDistance <= 0.1) return 10; // 靶心区域
+  if (relativeDistance <= 0.2) return 9;
+  if (relativeDistance <= 0.3) return 8;
+  if (relativeDistance <= 0.4) return 7;
+  if (relativeDistance <= 0.5) return 6;
+  if (relativeDistance <= 0.6) return 5;
+  if (relativeDistance <= 0.7) return 4;
+  if (relativeDistance <= 0.8) return 3;
+  if (relativeDistance <= 0.9) return 2;
+  if (relativeDistance <= 1.0) return 1;
+
+  return 0; // 脱靶
 };