计分本细节更新

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>