计分详情里添加注释功能

src/components/EditOption.vue

@@ -27,7 +27,7 @@ const props = defineProps({
     default: "",
   },
 });
-const itemTexts = ["Bow Type", "Distance", "Target Type", "Sets/Arrows"];
+const itemTexts = ["Bow Type", "Distance", "Target Type", "set/Arrows"];
 const distances = [5, 8, 10, 18, 25, 30, 50, 60, 70];
 const groupArrows = [3, 6, 12, 18];
 
@@ -120,7 +120,7 @@ onMounted(async () => {
     loadConfig();
   } else {
     const config = await getPointBookConfigAPI();
-    uni.setStorageSync("point-book-config", config);
+    uni.settorageSync("point-book-config", config);
     loadConfig();
   }
 });
@@ -136,7 +136,7 @@ onMounted(async () => {
   >
     <view @click="() => onExpand(itemIndex, !expand)">
       <text :style="{ opacity: expand ? 1 : 0 }">{{ 
-        itemIndex !== 3 ? itemTexts[itemIndex] : "Select Sets"
+        itemIndex !== 3 ? itemTexts[itemIndex] : "Select set"
       }}</text>
       <block>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{ 
@@ -150,7 +150,7 @@ onMounted(async () => {
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{ 
           selectedIndex !== -1 && secondSelectIndex !== -1
-            ? `${selectedIndex}sets/${groupArrows[secondSelectIndex]}arrows`
+            ? `${selectedIndex} set / ${groupArrows[secondSelectIndex]} arrows`
             : itemTexts[itemIndex]
         }}</text>
       </block>
@@ -227,7 +227,7 @@ onMounted(async () => {
           @click="onSelectItem(i)"
         >
           <text>{{ i }}</text>
-          <text>sets</text>
+          <text>set</text>
         </view>
       </view>
       <view
@@ -330,7 +330,7 @@ onMounted(async () => {
 }
 .distance-items > view > text:first-child,
 .amount-items > view > text:first-child {
-  width: 25px;
+  margin-right: 10rpx;
   display: block;
   text-align: center;
 }

src/pages/point-book-detail.vue

@@ -12,11 +12,14 @@ import { getPointBookDetailAPI } from "@/apis";
 const selectedIndex = ref(0);
 const showTip = ref(false);
 const showTip2 = ref(false);
+const showTip3 = ref(false);
 const groups = ref([]);
 const data = ref({});
 const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
+const notes = ref("");
+const draftNotes = ref("");
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
@@ -26,6 +29,13 @@ const openTip = (index) => {
 const closeTip = () => {
   showTip.value = false;
   showTip2.value = false;
+  showTip3.value = false;
+};
+
+const saveNote = () => {
+  notes.value = draftNotes.value;
+  draftNotes.value = "";
+  showTip3.value = false;
 };
 
 const onSelect = (index) => {
@@ -121,7 +131,7 @@ onLoad(async (options) => {
           <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
         </view>
         <view>
-          <view>10 Rings</view>
+          <view>Gold Rings</view>
           <text>{{ data.tenRings }}</text>
         </view>
         <view>
@@ -132,6 +142,14 @@ onLoad(async (options) => {
           <view>Total Rings</view>
           <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
+        <view class="add-notes">
+          <button class="note-btn" @click="showTip3 = true">
+            <image
+              :src="`../static/${notes ? 'has-note' : 'add-grey'}.png`"
+              mode="widthFix"
+            />
+          </button>
+        </view>
       </view>
       <view class="title-bar">
         <view />
@@ -155,18 +173,22 @@ onLoad(async (options) => {
       <view :style="{ transform: 'translateY(-90rpx)' }">
         <view class="title-bar">
           <view />
-          <text>Ring Value Distribution</text>
+          <text>Score Distribution</text>
         </view>
         <view :style="{ padding: '0 30rpx' }">
           <RingBarChart :data="ringRates" />
         </view>
         <view class="title-bar" :style="{ marginTop: '30rpx' }">
           <view />
-          <text>{{ selectedIndex === 0 ? "Rings per Set" : `Set ${selectedIndex} Rings` }}</text>
+          <text>{{
+            selectedIndex === 0 ? "Rings per Set" : `Set ${selectedIndex} Rings`
+          }}</text>
         </view>
         <view class="ring-text-groups">
           <view v-for="(item, index) in groups" :key="index">
-            <text v-if="selectedIndex === 0 && index !== 0">{{ `Set${index}` }}</text>
+            <text v-if="selectedIndex === 0 && index !== 0">{{
+              `Set${index}`
+            }}</text>
             <view
               v-if="
                 (selectedIndex === 0 && index !== 0) ||
@@ -182,11 +204,7 @@ onLoad(async (options) => {
                 }"
               >
                 {{
-                  arrow.ring === 0
-                    ? "X"
-                    : arrow.ring === -1
-                    ? "M"
-                    : arrow.ring
+                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
                 }}
               </text>
             </view>
@@ -196,18 +214,40 @@ onLoad(async (options) => {
           <SButton :onClick="goBack" :rounded="50">Close</SButton>
         </view>
       </view>
-      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+      <ScreenHint2
+        :show="showTip || showTip2 || showTip3"
+        :onClose="!notes && showTip3 ? null : closeTip"
+      >
         <view class="tip-content">
           <block v-if="showTip">
             <text>Stability Description</text>
             <text
-              >The stability of archery is measured by calculating the average distance of each arrow to other arrows. The smaller the number, the more stable the archery. This data can only be generated when the user marks the landing point.</text
+              >The stability of archery is measured by calculating the average
+              distance of each arrow to other arrows. The smaller the number,
+              the more stable the archery. This data can only be generated when
+              the user marks the landing point.</text
             >
           </block>
           <block v-if="showTip2">
             <text>Distribution Description</text>
             <text>Show the user's archery points in a practice session</text>
           </block>
+          <block v-if="showTip3">
+            <text>Notes</text>
+            <text v-if="notes">{{ notes }}</text>
+            <textarea
+              v-if="!notes"
+              v-model="draftNotes"
+              rows="4"
+              class="notes-input"
+            />
+            <view v-if="!notes">
+              <button hover-class="none" @click="showTip3 = false">
+                Cancel
+              </button>
+              <button hover-class="none" @click="saveNote">Save Notes</button>
+            </view>
+          </block>
         </view>
       </ScreenHint2>
     </view>
@@ -322,6 +362,33 @@ onLoad(async (options) => {
   margin-top: 20px;
   opacity: 0.8;
 }
+.tip-content > view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip-content > view > input {
+  width: 80%;
+  height: 44px;
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 .ring-text-groups {
   display: flex;
   flex-direction: column;
@@ -331,8 +398,9 @@ onLoad(async (options) => {
   color: #999999;
 }
 .ring-text-groups > view {
+  width: 100%;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
 }
 .ring-text-groups > view > text {
   width: 82rpx;
@@ -352,4 +420,23 @@ onLoad(async (options) => {
   text-align: center;
   margin-bottom: 10rpx;
 }
+.notes-input {
+  width: calc(100% - 40rpx);
+  margin: 25rpx 0;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  padding: 5px;
+  color: #000;
+  padding: 20rpx;
+}
+.note-btn {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.note-btn > image {
+  width: 52rpx;
+  height: 52rpx;
+}
 </style>