UI更新

src/components/EditOption.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import { getPointBookConfigAPI } from "@/apis";
 const props = defineProps({
   itemIndex: {
@@ -27,13 +27,18 @@ const props = defineProps({
     default: "",
   },
 });
-const itemTexts = ["Bow Type", "Distance", "Target Type", "set/Arrows"];
+const itemTexts = ["Select Bow", "Select Distance", "Select Target", "Select Sets/Arrows"];
 const distances = [5, 8, 10, 18, 25, 30, 50, 60, 70];
 const groupArrows = [3, 6, 12, 18];
 
 const data = ref([]);
 const selectedIndex = ref(-1);
 const secondSelectIndex = ref(-1);
+
+const meter = ref("");
+const sets = ref("");
+const arrowAmount = ref("");
+
 const onSelectItem = (index) => {
   selectedIndex.value = index;
   if (props.itemIndex === 0) {
@@ -42,11 +47,13 @@ const onSelectItem = (index) => {
     props.onSelect(props.itemIndex, distances[index]);
   } else if (props.itemIndex === 2) {
     props.onSelect(props.itemIndex, data.value[index]);
-  } else if (props.itemIndex === 3 && secondSelectIndex.value !== -1) {
-    props.onSelect(
-      props.itemIndex,
-      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
-    );
+  } else if (props.itemIndex === 3) {
+    if (secondSelectIndex.value !== -1) {
+      props.onSelect(
+        props.itemIndex,
+        `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+      );
+    }
   }
 };
 const onSelectSecondItem = (index) => {
@@ -54,15 +61,44 @@ const onSelectSecondItem = (index) => {
   if (selectedIndex.value !== -1) {
     props.onSelect(
       props.itemIndex,
-      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+      `${selectedIndex.value < 5 ? selectedIndex.value : sets.value}/${
+        groupArrows[secondSelectIndex.value]
+      }`
     );
   }
 };
-const meter = ref("");
 const onMeterChange = (e) => {
   meter.value = e.detail.value;
   props.onSelect(props.itemIndex, e.detail.value);
 };
+const onSetsChange = (e) => {
+  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.value === 99
+          ? arrowAmount.value
+          : groupArrows[secondSelectIndex.value]
+      }`
+    );
+  }
+};
+const onArrowAmountChange = (e) => {
+  if (!e.detail.value) return;
+  arrowAmount.value = Math.min(60, Number(e.detail.value));
+  if (!arrowAmount.value) return;
+  if (selectedIndex.value !== -1) {
+    props.onSelect(
+      props.itemIndex,
+      `${selectedIndex.value === 99 ? sets.value : selectedIndex.value}/${
+        arrowAmount.value
+      }`
+    );
+  }
+};
 watch(
   () => props.value,
   (newValue) => {
@@ -114,13 +150,24 @@ const loadConfig = () => {
     }
   }
 };
+const formatSetAndAmount = computed(() => {
+  if (selectedIndex.value === -1 || secondSelectIndex.value === -1)
+    return itemTexts[props.itemIndex];
+  if (selectedIndex.value === 99 && !sets.value) return itemTexts[props.itemIndex];
+  if (secondSelectIndex.value === 99 && !arrowAmount.value) return itemTexts[props.itemIndex];
+  return `${selectedIndex.value === 99 ? sets.value : selectedIndex.value} sets/${
+    secondSelectIndex.value === 99
+      ? arrowAmount.value
+      : groupArrows[secondSelectIndex.value]
+  } arrows`;
+});
 onMounted(async () => {
   const config = uni.getStorageSync("point-book-config");
   if (config) {
     loadConfig();
   } else {
     const config = await getPointBookConfigAPI();
-    uni.settorageSync("point-book-config", config);
+    uni.setStorageSync("point-book-config", config);
     loadConfig();
   }
 });
@@ -135,24 +182,21 @@ onMounted(async () => {
     }"
   >
     <view @click="() => onExpand(itemIndex, !expand)">
-      <text :style="{ opacity: expand ? 1 : 0 }">{{ 
-        itemIndex !== 3 ? itemTexts[itemIndex] : "Select set"
-      }}</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] : "Select Sets"
+        }}</text>
+        <text v-if="!expand && itemIndex === 0">{{
           value || itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{ 
-          value && value > 0 ? value + "m" : itemTexts[itemIndex]
+        <text v-if="!expand && itemIndex === 1">{{
+          value && value > 0 ? value + " m" : 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">{{ 
-          selectedIndex !== -1 && secondSelectIndex !== -1
-            ? `${selectedIndex} set / ${groupArrows[secondSelectIndex]} arrows`
-            : itemTexts[itemIndex]
-        }}</text>
+        <text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
       </block>
       <button hover-class="none">
         <image
@@ -195,10 +239,11 @@ onMounted(async () => {
       >
         <input
           v-model="meter"
-          placeholder="custom"
+          type="number"
+          placeholder="Custom"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"
-          @change="onMeterChange"
+          @blur="onMeterChange"
         />
         <text>m</text>
       </view>
@@ -219,7 +264,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',
@@ -227,11 +272,31 @@ onMounted(async () => {
           @click="onSelectItem(i)"
         >
           <text>{{ i }}</text>
-          <text>set</text>
+          <text>sets</text>
+        </view>
+        <view
+          :style="{
+            borderColor: selectedIndex === 99 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            placeholder="1 ~ 30"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            v-model="sets"
+            @focus="() => (selectedIndex = 99)"
+            @blur="onSetsChange"
+          />
+          <text>sets</text>
         </view>
       </view>
       <view
-        :style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
+        :style="{
+          marginTop: '5px',
+          marginBottom: '10px',
+          color: '#999999',
+          textAlign: 'center',
+        }"
         >Select arrows per set</view
       >
       <view class="amount-items">
@@ -246,6 +311,22 @@ onMounted(async () => {
           <text>{{ item }}</text>
           <text>arrows</text>
         </view>
+        <view
+          :style="{
+            borderColor: secondSelectIndex === 99 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            placeholder="1 ~ 60"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            v-model="arrowAmount"
+            maxlength="99"
+            @focus="() => (secondSelectIndex = 99)"
+            @blur="onArrowAmountChange"
+          />
+          <text>arrows</text>
+        </view>
       </view>
     </view>
   </view>
@@ -269,9 +350,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;
@@ -330,7 +410,7 @@ onMounted(async () => {
 }
 .distance-items > view > text:first-child,
 .amount-items > view > text:first-child {
-  margin-right: 10rpx;
+  width: 25px;
   display: block;
   text-align: center;
 }
@@ -352,4 +432,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>