BUG修改

src/components/EditOption.vue

@@ -72,13 +72,14 @@ const onMeterChange = (e) => {
   props.onSelect(props.itemIndex, e.detail.value);
 };
 const onSetsChange = (e) => {
-  sets.value = e.detail.value;
+  if (!e.detail.value) return;
+  sets.value = Math.min(30, Number(e.detail.value));
   if (!sets.value) return;
   if (secondSelectIndex.value !== -1) {
     props.onSelect(
       props.itemIndex,
       `${sets.value}/${
-        secondSelectIndex === 99
+        secondSelectIndex.value === 99
           ? arrowAmount.value
           : groupArrows[secondSelectIndex.value]
       }`
@@ -86,7 +87,8 @@ const onSetsChange = (e) => {
   }
 };
 const onArrowAmountChange = (e) => {
-  arrowAmount.value = e.detail.value;
+  if (!e.detail.value) return;
+  arrowAmount.value = Math.min(60, Number(e.detail.value));
   if (!arrowAmount.value) return;
   if (selectedIndex.value !== -1) {
     props.onSelect(
@@ -178,22 +180,21 @@ onMounted(async () => {
     }"
   >
     <view @click="() => onExpand(itemIndex, !expand)">
-      <text :style="{ opacity: expand ? 1 : 0 }">{{
-        itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
-      }}</text>
+      <view></view>
       <block>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
+        <text v-if="expand" :style="{ color: '#999', fontWeight: 'normal' }">{{
+          itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
+        }}</text>
+        <text v-if="!expand && itemIndex === 0">{{
           value || itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
+        <text v-if="!expand && itemIndex === 1">{{
           value && value > 0 ? value + "米" : itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
+        <text v-if="!expand && itemIndex === 2">{{
           value || itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
-          formatSetAndAmount
-        }}</text>
+        <text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
       </block>
       <button hover-class="none">
         <image
@@ -235,10 +236,12 @@ onMounted(async () => {
         }"
       >
         <input
+          v-model="meter"
+          type="number"
           placeholder="自定义"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"
-          @change="onMeterChange"
+          @blur="onMeterChange"
         />
         <text>米</text>
       </view>
@@ -275,17 +278,23 @@ onMounted(async () => {
           }"
         >
           <input
-            placeholder="自定义"
+            placeholder="1 ~ 30"
             type="number"
             placeholder-style="color: #DDDDDD"
+            v-model="sets"
             @focus="() => (selectedIndex = 99)"
-            @change="onSetsChange"
+            @blur="onSetsChange"
           />
           <text>组</text>
         </view>
       </view>
       <view
-        :style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
+        :style="{
+          marginTop: '5px',
+          marginBottom: '10px',
+          color: '#999999',
+          textAlign: 'center',
+        }"
         >选择每组的箭数</view
       >
       <view class="amount-items">
@@ -306,11 +315,13 @@ onMounted(async () => {
           }"
         >
           <input
-            placeholder="自定义"
+            placeholder="1 ~ 60"
             type="number"
             placeholder-style="color: #DDDDDD"
+            v-model="arrowAmount"
+            maxlength="99"
             @focus="() => (secondSelectIndex = 99)"
-            @change="onArrowAmountChange"
+            @blur="onArrowAmountChange"
           />
           <text>箭</text>
         </view>
@@ -337,9 +348,8 @@ onMounted(async () => {
   justify-content: space-between;
   height: 50px;
 }
-.container > view:first-child > text:first-child {
+.container > view:first-child > view:first-child {
   width: 85px;
-  color: #999999;
 }
 .container > view:first-child > text:nth-child(2) {
   font-weight: 500;