From af888c68be4ea5e35b4537254b46763746fd80d0 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Thu, 31 Jul 2025 14:32:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=88=9B=E5=BB=BA=E9=9D=B6?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BowTarget.vue     |   1 +
 src/components/BowTargetEdit.vue | 222 ++++++++++++++++++++++++++++++-
 src/components/EditOption.vue    |   4 +-
 src/pages/point-book-edit.vue    |  36 +++--
 src/static/arrow-edit-delete.png | Bin 0 -> 530 bytes
 src/static/arrow-edit-move.png   | Bin 0 -> 702 bytes
 src/static/arrow-edit-save.png   | Bin 0 -> 1090 bytes
 src/util.js                      |  18 +++
 8 files changed, 269 insertions(+), 12 deletions(-)
 create mode 100644 src/static/arrow-edit-delete.png
 create mode 100644 src/static/arrow-edit-move.png
 create mode 100644 src/static/arrow-edit-save.png

diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue
index 34cca2f..46b4ef1 100644
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -249,6 +249,7 @@ const simulShoot2 = async () => {
   text-align: center;
   line-height: 10px;
   box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 .hit > text {
   transform: scaleX(0.7);
diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue
index d865c6d..2982a9e 100644
--- a/src/components/BowTargetEdit.vue
+++ b/src/components/BowTargetEdit.vue
@@ -1,8 +1,143 @@
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { getElementRect, calcRing } from "@/util";
+
+const props = defineProps({
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+  onChange: {
+    type: Function,
+    default: (arrow) => {},
+  },
+});
+
+const rect = ref({});
+const arrow = ref(null);
+const isDragging = ref(false);
+const dragStartPos = ref({ x: 0, y: 0 });
+
+// 点击靶纸创建新的点
+const onClick = async (e) => {
+  if (arrow.value !== null) return;
+  const newArrow = {
+    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);
+  arrow.value = newArrow;
+};
+
+// 确认添加箭矢
+const confirmAdd = () => {
+  props.onChange(arrow.value);
+  arrow.value = null;
+};
+
+// 删除箭矢
+const deleteArrow = () => {
+  arrow.value = null;
+};
+
+// 开始拖拽 - 同样修复坐标获取
+const startDrag = async (e, index) => {
+  if (!e.touches[0]) return;
+  isDragging.value = true;
+  dragStartPos.value = {
+    x: e.touches[0].clientX,
+    y: e.touches[0].clientY,
+  };
+};
+
+// 拖拽移动 - 同样修复坐标获取
+const onDrag = async (e) => {
+  if (!isDragging.value || !e.touches[0] || !arrow.value) return;
+
+  let clientX = e.touches[0].clientX;
+  let clientY = e.touches[0].clientY;
+
+  // 计算移动距离
+  const deltaX = clientX - dragStartPos.value.x;
+  const deltaY = clientY - dragStartPos.value.y;
+
+  const length = rect.value.width * 0.9;
+
+  // 更新坐标
+  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);
+
+  // 更新拖拽起始位置
+  dragStartPos.value = { x: clientX, y: clientY };
+};
+
+// 结束拖拽
+const endDrag = () => {
+  isDragging.value = false;
+};
+
+onMounted(async () => {
+  const result = await getElementRect();
+  rect.value = result;
+});
+</script>
 
 <template>
-  <view class="container">
+  <view
+    class="container"
+    @click="onClick"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+  >
     <image src="../static/bow-target.png" mode="widthFix" />
+
+    <view
+      v-for="(arrow, index) in arrows"
+      :key="index"
+      class="arrow-point"
+      :style="{
+        left: (arrow.x !== undefined ? arrow.x : 0) + 'px',
+        top: (arrow.y !== undefined ? arrow.y : 0) + 'px',
+      }"
+    >
+      <view v-if="arrow.x !== undefined && arrow.y !== undefined" class="point"
+        ><text>{{ index + 1 }}</text></view
+      >
+    </view>
+    <!-- 渲染所有箭矢点 -->
+    <view
+      v-if="arrow"
+      class="arrow-point"
+      :style="{
+        left: arrow.x + 'px',
+        top: arrow.y + 'px',
+      }"
+    >
+      <!-- 箭矢点 -->
+      <view class="point"> </view>
+      <!-- 编辑按钮组（只在编辑状态下显示） -->
+      <view class="edit-buttons" @click.stop>
+        <text
+          ><text :style="{ fontSize: '24px', marginRight: '5px' }">{{
+            arrow.ring
+          }}</text
+          >{{ arrow.ring ? "环" : "" }}</text
+        >
+        <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
+          <image src="../static/arrow-edit-save.png" mode="widthFix" />
+        </view>
+        <view class="edit-btn delete-btn" @click.stop="deleteArrow(index)">
+          <image src="../static/arrow-edit-delete.png" mode="widthFix" />
+        </view>
+        <view
+          class="edit-btn drag-btn"
+          @touchstart.stop="startDrag($event, index)"
+        >
+          <image src="../static/arrow-edit-move.png" mode="widthFix" />
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -10,8 +145,91 @@
 .container {
   width: 90%;
   margin: 10px auto;
+  position: relative;
+  user-select: none;
 }
+
 .container > image {
   width: 100%;
+  display: block;
+}
+
+.arrow-point {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.point {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  z-index: 1;
+  color: #fff;
+  font-size: 8px;
+  text-align: center;
+  line-height: 10px;
+  box-sizing: border-box;
+  background-color: #ff4444;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.point > text {
+  transform: scaleX(0.7);
+  display: block;
+  font-weight: bold;
+}
+
+.edit-buttons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background: #18ff6899;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.edit-buttons > text {
+  width: 100%;
+  display: block;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.edit-btn {
+  transform: translateX(-50%) translateY(-50%);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+
+.edit-btn > image {
+  width: 24px;
+  height: 24px;
+}
+
+.confirm-btn {
+  left: 50%;
+  bottom: -24px;
+}
+
+.delete-btn {
+  right: -24px;
+  bottom: -24px;
+}
+
+.drag-btn {
+  left: 50%;
+  top: 0;
 }
 </style>
diff --git a/src/components/EditOption.vue b/src/components/EditOption.vue
index 6d7effe..fcdf775 100644
--- a/src/components/EditOption.vue
+++ b/src/components/EditOption.vue
@@ -236,7 +236,9 @@ watch(
           <text>组</text>
         </view>
       </view>
-      <view>选择每组的箭数</view>
+      <view :style="{ marginTop: '5px', marginBottom: '10px' }"
+        >选择每组的箭数</view
+      >
       <view class="amount-items">
         <view
           v-for="(item, index) in groupArrows"
diff --git a/src/pages/point-book-edit.vue b/src/pages/point-book-edit.vue
index 0a8b7d3..691b6a5 100644
--- a/src/pages/point-book-edit.vue
+++ b/src/pages/point-book-edit.vue
@@ -24,6 +24,10 @@ const ringColors = [
   "#9B9B9B",
 ];
 
+const onEdit = (arrows) => {
+  arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
+};
+
 const onBack = () => {
   uni.navigateBack();
 };
@@ -38,17 +42,22 @@ const onSubmit = () => {
 };
 const onClickRing = (ring) => {
   if (arrowGroups.value[currentGroup.value]) {
-    arrowGroups.value[currentGroup.value][currentArrow.value] = ring;
+    arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
     clickable.value = arrowGroups.value[currentGroup.value].every(
-      (item) => !!item
+      (item) => !!item.ring
     );
-    if (currentArrow.value < amount.value - 1) {
-      currentArrow.value++;
-    }
+    if (currentArrow.value < amount.value - 1) currentArrow.value++;
   }
 };
 const deleteArrow = () => {
-  arrowGroups.value[currentGroup.value][currentArrow.value] = "";
+  arrowGroups.value[currentGroup.value][currentArrow.value] = {};
+};
+const onEditDone = (arrow) => {
+  arrowGroups.value[currentGroup.value][currentArrow.value] = {
+    ...arrow,
+    ring: 10,
+  };
+  if (currentArrow.value < amount.value - 1) currentArrow.value++;
 };
 
 onMounted(() => {
@@ -57,7 +66,7 @@ onMounted(() => {
     groups.value = Number(pointBook.amountGroup.split("/")[0]);
     amount.value = Number(pointBook.amountGroup.split("/")[1]);
     for (let i = 1; i <= groups.value; i++) {
-      arrowGroups.value[i] = new Array(amount.value).fill("");
+      arrowGroups.value[i] = new Array(amount.value).fill({});
     }
   }
 });
@@ -71,7 +80,10 @@ onMounted(() => {
     :onBack="() => (showTip = true)"
   >
     <view class="container">
-      <BowTargetEdit />
+      <BowTargetEdit
+        :onChange="onEditDone"
+        :arrows="arrowGroups[currentGroup]"
+      />
       <view class="title-bar">
         <view>
           <view />
@@ -92,7 +104,13 @@ onMounted(() => {
             borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
             borderWidth: currentArrow === index ? '2px' : '1px',
           }"
-          >{{ isNaN(arrow) ? arrow : arrow ? arrow + " 环" : "" }}</view
+          >{{
+            isNaN(arrow.ring)
+              ? arrow.ring
+              : arrow.ring
+              ? arrow.ring + " 环"
+              : ""
+          }}</view
         >
       </view>
       <text>输入分值的情况下，系统不提供落点稳定性分</text>
diff --git a/src/static/arrow-edit-delete.png b/src/static/arrow-edit-delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3b6076cc9c4b0e3e292961052261c77bc58263e
GIT binary patch
literal 530
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA3?vioaBc-sEa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyacHU@CkAK|NsAwl<HqC(}4^)a4+!rclGv<)M}{6*Kcqs;u*hcCj5vii_o2U
z3uu>oNswRgnLi&6vdA81xc0{(?%dLoL5KE;tS=066FNPqcme<6&zFU}%YjZ*^>lFz
z@i;zr+RbTA1_CbKp)5DeBTfGQpDrwGJK3Xo<;v|R_R3B3D=+wU#^OwH^zp*GexD8U
z^bW_Z`&-mH@%5$k>`s^OZaBF%yR5}vwZgJfPM#e_Z`As?IY~WGaQvk?g_SRO%C>+<
z*<QgO-S3?y{^JZ}XlJ<?%~5Qj${+8<c06UjQ}9l%(9a@P7R#$SR)^Y)+Z#^rtl#)5
z>#9@!$MRCMo+oSGO}m(#XjuPYsu9mw?WeP^PZxGu{crw>+Z)8z|20h7Ab+}nMNVq|
z#^jDY$J9@>oyp$Qno%+DME0JxoD+MFB|mId>)#(f??Cn(u@}*c<Y(2b{nEbJyIId}
z*PfreF8P7GI6vgJ<)zfDUNYP8{=1)zhx&EuG(IIymw)r;;zRj%;pvah^Xql0-*r@#
R{0a<P22WQ%mvv4FO#oj86_5Y`

literal 0
HcmV?d00001

diff --git a/src/static/arrow-edit-move.png b/src/static/arrow-edit-move.png
new file mode 100644
index 0000000000000000000000000000000000000000..15713f472cc009757f0f856ec42685780e035327
GIT binary patch
literal 702
zcmeAS@N?(olHy`uVBq!ia0vp^CLqkg3?x4-dwml~v7|ftIx;Y9?C1WI$O_~$76-XI
zF|0c$^AgCJ6W|l#>R#aUpBmstTp7@q9|djyUcUMF^Vg5!j(>07|NHgp&(X6#@|u5k
z&HlaZ;E(w7e_y`+n!omE?Sy|HKK)v@`DgFEKNqh5$ZGhJSox#0^Uv8UKfCAtIdkPl
zY1g0g*YlI|`ho70C<*clW>_HhPGA1t&Xs?zg->JUk&T~p=k<@8>f=@a_S6IYHOJG%
zF~sBe)@v`znhXS3A1G-(IJN8<7gLk;gIoLl?-tz}I%&a+Ip6-Zd@fY*G5Y-Rqr2p+
zX=&E$Uf-CN$`>!Vwvau>>Twuv<}0=hHcM{S?Y^D+J+dl-sqJ2kla!ZqqKJNkX14{`
z#W1OUpYYcCXJ$^ReB}H#Y*HQnk69Z}ohe#yefn94=KV?hn?Eh&RWUx8c6MIM-h(ay
zwY>LwY|ox)KDIxRf3{Tc3f`(ayAH;0zO|-y%C!v(la9un;Cl79Uh~9F?~@DfWG#Pt
zTE2v*Y4M-Py5HLum8g7jW>%Q6UhP8tt6Ln}S<ho0h>D6zU7sbd_~^aQ>5NnNyAAd&
z;7ht!k^1DLmfQ19{u^UHu%)uZ=}xnFpDL_=@PkJH`wZ4i6S&+Q_IM?VdN`{|2o`EJ
zhbc%`AM{wU#x7C(#KABFBdwLXbC`DC;9SOZ_bQ*B=)}1GEdona)&Ir_w|_s~5wc;)
zTF2WhOWyifMP#^3yxg!v_Vf}qhiua=%iOZ&Z*i-Y<@{vs&UEX8qfBug^VOGj0duq1
pS9zc9KXNhm%CGr~AE(wZKYMl1zr*!y05C2YJYD@<);T3K0RaDTde{H}

literal 0
HcmV?d00001

diff --git a/src/static/arrow-edit-save.png b/src/static/arrow-edit-save.png
new file mode 100644
index 0000000000000000000000000000000000000000..50e065e496b2e660d06d4668e2dbbc417bf524e9
GIT binary patch
literal 1090
zcmb`F=~I(u6vbZ@FwLT5+5v~cP*B@46<ORyx<D`(0%0i)Z4nUyGAt^J$RY@65D0NV
zVIU}^0oe>`%|Jm=7K`k*fyg2uh}r>U2}=y?^R8|BKlC?q@44s8{c=vOpAU;hHYY<6
zL}Pm}{q=g}zaj0^@3q<`wO$M(8Qu&CYPdtect(0}5bw`&gXBXNi~2jxkHd9mUFQ7r
ze*n%V>faDB0^$WAB#A%}talK^X2QZUwD~!)v4xaBg46C2AJ&lCMi6rY&XZs-RUjc3
z@UCHlW5nVzK@i|vDyA4Ca2zSB2E1fqa~mm_qmMfY-8z9`a7H0W5Ms{;aMc_5W)VL5
z4qsYD<*oS4JT^Rm^$vl!Y<zkiPP$F3XhFnvd|68%D4ddyjjBOZ27wdA);1z-!e<xY
zTOtsejB8fld<pub8*OMue|rMLt`XY+8=Zu+N(ikEPP`4y-^7&TSdRkzy#vm<2QJ;h
z`jrHLQCTxSrvYIpNXbL|?F@Xk0$ku@J%b=J4bHg_CkT-;8QR{5O}qgYGvR_tq_Q6C
zQxYhODOD!HOF*B*-mCsTKR^|xtM*pJ(>iSYCy^1=GNf>730zO@Pa)bfAZUjdo5|pM
z^gk8_B-t=bvM3~~3CTw@^mi;<@WuJSBt0!5f9#=k|D3J<u5CM4Gio*ZP`qGeTfnhh
z<Qywwe^qy`i$Yhhc>YJM#C*lAeXbW@YBnbE^fpyAEyi{KH#2;YX8nm*@s3Zq(jp-V
z#@ZYk4WzG}UUTI#lET?WxA#L(I4e5%Gt-vC@#HaQt*n(CG1RB1QiqxyExp&`7iUB<
zZ}SYg5th!Q4%$*1$C--R<5HSLmQBvwgBy&gGc_d6^!t+~-_}veC0|<ytQ$wiM2WxW
zan)5a(w#MD|AVPnfA$InU<=RXzyq_nf-i+aw72Vd8KNauGMOKZk>woJp}Bd}MQY7p
zvZ=xMS1cj>lD;{JZR7bMqV?*W=*1Zq8U&o0gFNU3{CwR=WI}hSU58m-7~Bi0cV-Dj
z7Q7F2Oj5)dm1P~_d^IMuT49t5oT7Xy8llUYsR1ON;jl|$KE<cfBZkW@9zl@A@$h<a
zo;%bzy&2G*i4L5$PB(;-2NmzOa+OnO9Z#Hct)189{0h}47HQvptf-k0Nv*>Z4A<XB
zKp-W~%fZF>bl2w=ytorC$C_qCTrM=29%?a8+RPggPh9dfp-=5Mo|{3HEX6Oob_X69
z8IaU3b&VbuuO%1N@2=6AbWR5KZ&(&*pQJx~-SfbA)qTNlRh56x+cv4L&qmc%U0QP{
zNMsIOsX7%aW#{=mW!U}5Uk#BPUim9$wzSHg+x^1rsJPXSPB)4le`RNexp-BY;Rf8m
V;X+&2rV4%aAhx>?Q|=bZ{}=7CdC~v?

literal 0
HcmV?d00001

diff --git a/src/util.js b/src/util.js
index 937711e..91a5527 100644
--- a/src/util.js
+++ b/src/util.js
@@ -282,3 +282,21 @@ export const isGameEnded = async (battleId) => {
   }
   return !isGaming;
 };
+
+// 获取元素尺寸和位置信息
+export const getElementRect = () => {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery();
+    query
+      .select(".container")
+      .boundingClientRect((rect) => {
+        resolve(rect);
+      })
+      .exec();
+  });
+};
+
+export const calcRing = (x, y) => {
+  console.log(1111, x, y);
+  return 8;
+};