UI更新

src/pages/point-book-edit.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 import SButton from "@/components/SButton.vue";
+import BowTargetEdit from "@/components/BowTargetEdit.vue";
 
 const clickable = ref(false);
 const showTip = ref(false);
@@ -39,13 +40,16 @@ const onClickRing = (ring) => {
   if (arrowGroups.value[currentGroup.value]) {
     arrowGroups.value[currentGroup.value][currentArrow.value] = ring;
     clickable.value = arrowGroups.value[currentGroup.value].every(
-      (item) => item !== null
+      (item) => !!item
     );
     if (currentArrow.value < amount.value - 1) {
       currentArrow.value++;
     }
   }
 };
+const deleteArrow = () => {
+  arrowGroups.value[currentGroup.value][currentArrow.value] = "";
+};
 
 onMounted(() => {
   const pointBook = uni.getStorageSync("point-book");
@@ -53,7 +57,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(null);
+      arrowGroups.value[i] = new Array(amount.value).fill("");
     }
   }
 });
@@ -67,12 +71,16 @@ onMounted(() => {
     :onBack="() => (showTip = true)"
   >
     <view class="container">
-      <view class="bow-target">
-        <image src="../static/bow-target.png" mode="widthFix" />
-      </view>
+      <BowTargetEdit />
       <view class="title-bar">
-        <view />
-        <text>第 {{ currentGroup }} 组</text>
+        <view>
+          <view />
+          <text>第 {{ currentGroup }} 组</text>
+        </view>
+        <view @click="deleteArrow">
+          <image src="../static/delete.png" />
+          <text>删除</text>
+        </view>
       </view>
       <view class="bow-arrows">
         <view
@@ -84,12 +92,12 @@ onMounted(() => {
             borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
             borderWidth: currentArrow === index ? '2px' : '1px',
           }"
-          >{{ arrow === null ? "" : arrow + " 环" }}</view
+          >{{ isNaN(arrow) ? arrow : arrow ? arrow + " 环" : "" }}</view
         >
       </view>
       <text>输入分值的情况下，系统不提供落点稳定性分</text>
       <view class="bow-rings">
-        <view @click="() => onClickRing(11)">X</view>
+        <view @click="() => onClickRing('X')">X</view>
         <view
           v-for="i in 10"
           :key="i"
@@ -97,7 +105,7 @@ onMounted(() => {
           :style="{ backgroundColor: ringColors[i] || '#d8d8d8' }"
           >{{ 11 - i }}</view
         >
-        <view @click="() => onClickRing(0)">M</view>
+        <view @click="() => onClickRing('M')">M</view>
       </view>
       <ScreenHint2 :show="showTip">
         <view class="tip-content">
@@ -194,27 +202,35 @@ onMounted(() => {
 .tip-content > view > button:last-child {
   background: #fed847;
 }
-.bow-target {
-  width: 90%;
-  margin: 10px auto;
-}
-.bow-target > image {
-  width: 100%;
-}
 .title-bar {
-  width: 100%;
+  width: calc(100% - 30px);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   font-size: 13px;
+  margin: 0 15px;
+}
+.title-bar > view:first-child {
+  display: flex;
+  align-items: center;
   color: #333;
   font-weight: 500;
 }
-.title-bar > view:first-child {
+.title-bar > view:first-child > view:first-child {
   width: 5px;
   height: 15px;
   border-radius: 10px;
   background-color: #fed847;
   margin-right: 7px;
-  margin-left: 15px;
+}
+.title-bar > view:nth-child(2) {
+  color: #287fff;
+  display: flex;
+  align-items: center;
+}
+.title-bar > view:nth-child(2) image {
+  width: 14px;
+  height: 14px;
+  margin-right: 5px;
 }
 </style>