UI更新

src/components/EditOption.vue

@@ -78,7 +78,7 @@ const onSelectItem = (index) => {
   } else if (props.itemIndex === 3 && secondSelectIndex.value !== -1) {
     props.onSelect(
       props.itemIndex,
-      `${selectedIndex.value + 1}组/${groupArrows[secondSelectIndex.value]}箭`
+      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
     );
   }
 };
@@ -87,7 +87,7 @@ const onSelectSecondItem = (index) => {
   if (selectedIndex.value !== -1) {
     props.onSelect(
       props.itemIndex,
-      `${selectedIndex.value + 1}组/${groupArrows[secondSelectIndex.value]}箭`
+      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
     );
   }
 };

src/components/Header.vue

@@ -24,6 +24,7 @@ const onClick = () => {
 
 const loading = ref(false);
 const showLoader = ref(false);
+const pointBook = ref(null);
 const updateLoading = (value) => {
   loading.value = value;
 };
@@ -33,6 +34,9 @@ onMounted(() => {
   isIos.value = deviceInfo.osName === "ios";
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
+  if (currentPage.route === "pages/point-book-edit") {
+    pointBook.value = uni.getStorageSync("point-book");
+  }
   if (
     currentPage.route === "pages/battle-room" ||
     currentPage.route === "pages/team-match" ||
@@ -92,6 +96,21 @@ onUnmounted(() => {
       mode="widthFix"
       class="loading"
     />
+    <view v-if="pointBook" class="point-book-info">
+      <text>{{ pointBook.bowType }}</text>
+      <text>{{ pointBook.distance }} 米</text>
+      <text
+        >{{
+          pointBook.bowtargetType.substring(
+            0,
+            pointBook.bowtargetType.length - 3
+          )
+        }}
+        {{
+          pointBook.bowtargetType.substring(pointBook.bowtargetType.length - 3)
+        }}</text
+      >
+    </view>
   </view>
 </template>
 
@@ -104,6 +123,8 @@ onUnmounted(() => {
   height: 100rpx;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
+}
+.container > view:nth-child(2) {
   font-size: 16px;
   font-weight: bold;
 }
@@ -141,4 +162,19 @@ onUnmounted(() => {
   background-blend-mode: darken;
   animation: rotate 2s linear infinite;
 }
+.point-book-info {
+  color: #333;
+  position: fixed;
+  width: 60%;
+  left: 20%;
+  display: flex;
+  justify-content: center;
+}
+.point-book-info > text {
+  border-radius: 6px;
+  background-color: #fff;
+  font-size: 10px;
+  padding: 5px 10px;
+  margin: 3px;
+}
 </style>

src/pages/point-book-create.vue

@@ -4,7 +4,7 @@ import Container from "@/components/Container.vue";
 import EditOption from "@/components/EditOption.vue";
 import SButton from "@/components/SButton.vue";
 
-const clickable = ref(true);
+const clickable = ref(false);
 const expandIndex = ref(-1);
 const bowType = ref("");
 const distance = ref(0);
@@ -30,6 +30,12 @@ const onSelect = (itemIndex, value) => {
     bowtargetType.value &&
     amountGroup.value
   ) {
+    uni.setStorageSync("point-book", {
+      bowType: bowType.value,
+      distance: distance.value,
+      bowtargetType: bowtargetType.value,
+      amountGroup: amountGroup.value,
+    });
     clickable.value = true;
   }
 };

src/pages/point-book-edit.vue

@@ -1,16 +1,62 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 import SButton from "@/components/SButton.vue";
 
 const clickable = ref(false);
 const showTip = ref(false);
+const groups = ref(0);
+const amount = ref(0);
+const currentGroup = ref(1);
+const currentArrow = ref(0);
+const arrowGroups = ref({});
+const ringColors = [
+  "#FADB80",
+  "#FADB80",
+  "#FADB80",
+  "#F97E81",
+  "#F97E81",
+  "#7AC7FF",
+  "#7AC7FF",
+  "#9B9B9B",
+  "#9B9B9B",
+];
 
 const onBack = () => {
   uni.navigateBack();
 };
-const onClick = () => {};
+const onSubmit = () => {
+  if (currentGroup.value < groups.value) {
+    currentGroup.value++;
+    currentArrow.value = 0;
+    clickable.value = false;
+  } else {
+    console.log("submit", arrowGroups.value);
+  }
+};
+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
+    );
+    if (currentArrow.value < amount.value - 1) {
+      currentArrow.value++;
+    }
+  }
+};
+
+onMounted(() => {
+  const pointBook = uni.getStorageSync("point-book");
+  if (pointBook.amountGroup) {
+    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);
+    }
+  }
+});
 </script>
 
 <template>
@@ -20,7 +66,39 @@ const onClick = () => {};
     :whiteBackArrow="false"
     :onBack="() => (showTip = true)"
   >
-    <view>
+    <view class="container">
+      <view class="bow-target">
+        <image src="../static/bow-target.png" mode="widthFix" />
+      </view>
+      <view class="title-bar">
+        <view />
+        <text>第 {{ currentGroup }} 组</text>
+      </view>
+      <view class="bow-arrows">
+        <view
+          v-if="arrowGroups[currentGroup]"
+          v-for="(arrow, index) in arrowGroups[currentGroup]"
+          :key="index"
+          @click="currentArrow = index"
+          :style="{
+            borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
+            borderWidth: currentArrow === index ? '2px' : '1px',
+          }"
+          >{{ arrow === null ? "" : arrow + " 环" }}</view
+        >
+      </view>
+      <text>输入分值的情况下，系统不提供落点稳定性分</text>
+      <view class="bow-rings">
+        <view @click="() => onClickRing(11)">X</view>
+        <view
+          v-for="i in 10"
+          :key="i"
+          @click="() => onClickRing(11 - i)"
+          :style="{ backgroundColor: ringColors[i] || '#d8d8d8' }"
+          >{{ 11 - i }}</view
+        >
+        <view @click="() => onClickRing(0)">M</view>
+      </view>
       <ScreenHint2 :show="showTip">
         <view class="tip-content">
           <text>现在离开会导致</text>
@@ -37,17 +115,57 @@ const onClick = () => {};
     <view :style="{ marginBottom: '20px' }">
       <SButton
         :disabled="!clickable"
-        :onClick="onClick"
+        :onClick="onSubmit"
         disabledColor="#DDDDDD"
         :color="clickable ? '#000' : '#fff'"
       >
-        记完了，提交看分析
+        {{ currentGroup === groups ? "记完了，提交看分析" : "下一组" }}
       </SButton>
     </view>
   </Container>
 </template>
 
 <style scoped>
+.container {
+  width: 100%;
+}
+.container > text {
+  margin: 15px;
+  color: #999;
+  font-size: 13px;
+  font-weight: 200;
+}
+.bow-arrows,
+.bow-rings {
+  margin: 15px;
+  display: grid;
+  column-gap: 1vw;
+  grid-template-columns: repeat(6, 1fr);
+}
+.bow-arrows > view,
+.bow-rings > view {
+  background: #ffffff;
+  border-radius: 6px;
+  border: 1px solid #eeeeee;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  padding: 5px 0;
+  height: 32px;
+  line-height: 20px;
+  margin-bottom: 5px;
+}
+.bow-rings > view {
+  font-size: 13px;
+  height: 36px;
+  line-height: 24px;
+  color: #fff;
+  background-color: #d8d8d8;
+}
+.bow-rings > view:first-child {
+  background-color: #fadb80;
+}
 .tip-content {
   width: 100%;
   padding: 25px;
@@ -76,4 +194,27 @@ const onClick = () => {};
 .tip-content > view > button:last-child {
   background: #fed847;
 }
+.bow-target {
+  width: 90%;
+  margin: 10px auto;
+}
+.bow-target > image {
+  width: 100%;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+.title-bar > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+  margin-left: 15px;
+}
 </style>