计分本细节更新

src/components/EditOption.vue

@@ -63,6 +63,30 @@ const onMeterChange = (e) => {
   meter.value = e.detail.value;
   props.onSelect(props.itemIndex, e.detail.value);
 };
+const sets = ref(null);
+const onSetsChange = (e) => {
+  sets.value = e.detail.value;
+  if (!sets.value) return;
+  if (arrowAmount.value || groupArrows[secondSelectIndex.value]) {
+    props.onSelect(
+      props.itemIndex,
+      `${e.detail.value}/${
+        arrowAmount.value || groupArrows[secondSelectIndex.value]
+      }`
+    );
+  }
+};
+const arrowAmount = ref("");
+const onArrowAmountChange = (e) => {
+  arrowAmount.value = e.detail.value;
+  if (!arrowAmount.value) return;
+  if (sets.value || selectedIndex.value !== -1) {
+    props.onSelect(
+      props.itemIndex,
+      `${sets.value || selectedIndex.value}/${e.detail.value}`
+    );
+  }
+};
 watch(
   () => props.value,
   (newValue) => {
@@ -219,7 +243,7 @@ onMounted(async () => {
     <view v-if="itemIndex === 3">
       <view class="amount-items">
         <view
-          v-for="i in 12"
+          v-for="i in 4"
           :key="i"
           :style="{
             borderColor: selectedIndex === i ? '#fed847' : '#eeeeee',
@@ -229,6 +253,21 @@ onMounted(async () => {
           <text>{{ i }}</text>
           <text>组</text>
         </view>
+        <view
+          :style="{
+            borderColor: selectedIndex === 5 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            v-model="sets"
+            placeholder="自定义"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            @focus="() => (selectedIndex = 5)"
+            @change="onSetsChange"
+          />
+          <text>组</text>
+        </view>
       </view>
       <view
         :style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
@@ -246,6 +285,21 @@ onMounted(async () => {
           <text>{{ item }}</text>
           <text>箭</text>
         </view>
+        <view
+          :style="{
+            borderColor: secondSelectIndex === 4 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            v-model="arrowAmount"
+            placeholder="自定义"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            @focus="() => (secondSelectIndex = 4)"
+            @change="onArrowAmountChange"
+          />
+          <text>箭</text>
+        </view>
       </view>
     </view>
   </view>
@@ -352,4 +406,12 @@ onMounted(async () => {
   width: 100%;
   text-align: center;
 }
+.amount-items > view:last-child {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+.amount-items > view:last-child > input {
+  width: 85%;
+  text-align: center;
+}
 </style>

src/components/PointRecord.vue

@@ -6,6 +6,10 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+  longPress: {
+    type: Function,
+    default: () => {},
+  },
 });
 const bowOptions = ref({});
 const targetOptions = ref({});
@@ -28,7 +32,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <view class="container" @click="toDetailPage">
+  <view class="container" @click="toDetailPage" @longpress="longPress(props.data)">
     <view>
       <view class="labels">
         <view></view>
@@ -54,9 +58,9 @@ onMounted(() => {
     <view>
       <image src="../static/bow-target.png" mode="widthFix" />
       <view class="arrow-amount">
-        <text>共</text>
-        <text>{{ data.arrows * data.groups }}</text>
-        <text>箭</text>
+        <text>{{ data.actualTotalRing }}</text>
+        <text>/</text>
+        <text>{{ data.totalRing }}</text>
       </view>
     </view>
   </view>
@@ -124,19 +128,18 @@ onMounted(() => {
 .arrow-amount {
   position: absolute;
   background-color: #0009;
-  border-radius: 10px;
+  border-radius: 12px;
   color: #fffc;
-  font-size: 12px;
-  line-height: 22px;
-  width: 60px;
+  font-size: 24rpx;
+  line-height: 26px;
+  width: 64px;
   display: flex;
   justify-content: center;
-  top: calc(50% - 13px);
-  left: calc(50% - 30px);
+  top: calc(50% - 15px);
+  left: calc(50% - 32px);
 }
-.arrow-amount > text:nth-child(2) {
+.arrow-amount > text:nth-child(1) {
+  font-size: 30rpx;
   color: #fff;
-  font-size: 14px;
-  margin: 0 3px;
 }
 </style>

src/components/RingBarChart.vue

@@ -61,6 +61,7 @@ const ringText = (ring) => {
         {{ b && b.ring !== undefined ? b.ring : "" }}
       </text>
     </view>
+    <text>环值</text>
   </view>
 </template>
 
@@ -70,9 +71,18 @@ const ringText = (ring) => {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  position: relative;
+}
+.container > text {
+  position: absolute;
+  bottom: 2rpx;
+  left: 0;
+  font-size: 18rpx;
+  color: #999999;
 }
 .container > view {
-  padding: 0 10rpx;
+  padding-left: 40rpx;
+  padding-right: 10rpx;
 }
 .container > view:first-child {
   display: flex;
@@ -93,14 +103,15 @@ const ringText = (ring) => {
   transition: all 0.3s ease;
   height: 0;
 }
-.container > view:last-child {
+.container > view:nth-child(2) {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   border-top: 1rpx solid #333;
   font-size: 22rpx;
   color: #333333;
+  padding-top: 2rpx;
 }
-.container > view:last-child > text {
+.container > view:nth-child(2) > text {
   text-align: center;
 }
 </style>