接口调试完毕

src/pages/point-book-detail.vue

@@ -2,21 +2,18 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import BowTarget from "@/components/BowTarget.vue";
+import BowTargetEdit from "@/components/BowTargetEdit.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 
 import { getPointBookDetailAPI } from "@/apis";
 
-onLoad(async (options) => {
-  if (options.id) {
-    const result = await getPointBookDetailAPI(options.id);
-    console.log(1212, result);
-  }
-});
-
 const selectedIndex = ref(0);
 const showTip = ref(false);
 const showTip2 = ref(false);
+const groups = ref([]);
+const data = ref({});
+const targetSrc = ref("");
+const arrows = ref([]);
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
@@ -27,6 +24,29 @@ const closeTip = () => {
   showTip.value = false;
   showTip2.value = false;
 };
+
+const onSelect = (index) => {
+  selectedIndex.value = index;
+  data.value = groups.value[index];
+  arrows.value = groups.value[index].list.filter((item) => item.x && item.y);
+};
+
+onLoad(async (options) => {
+  if (options.id) {
+    const result = await getPointBookDetailAPI(options.id);
+    const config = uni.getStorageSync("point-book-config");
+    config.targetOption.some((item) => {
+      if (item.id === result.targetType) {
+        targetSrc.value = item.icon;
+      }
+    });
+    if (result.groups) {
+      groups.value = result.groups;
+      data.value = result.groups[0];
+      arrows.value = result.groups[0].list.filter((item) => item.x && item.y);
+    }
+  }
+});
 </script>
 
 <template>
@@ -34,9 +54,9 @@ const closeTip = () => {
     <view class="container">
       <view class="tab-bar">
         <view
-          v-for="(_, index) in [1, 2, 3, 4, 5]"
+          v-for="(_, index) in groups"
           :key="index"
-          @click="selectedIndex = index"
+          @click="onSelect(index)"
         >
           <text
             :style="{
@@ -66,23 +86,23 @@ const closeTip = () => {
               class="question-mark"
             />
           </view>
-          <text>98.99</text>
+          <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
         </view>
         <view>
           <view>黄心率</view>
-          <text>86.3%</text>
+          <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
         </view>
         <view>
           <view>10环数</view>
-          <text>65</text>
+          <text>{{ data.tenRings }}</text>
         </view>
         <view>
           <view>平均环数</view>
-          <text>8.99</text>
+          <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
         </view>
         <view>
           <view>总环数</view>
-          <text>700/999</text>
+          <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
       </view>
       <view class="title-bar">
@@ -96,7 +116,7 @@ const closeTip = () => {
           />
         </button>
       </view>
-      <BowTarget />
+      <BowTargetEdit :src="targetSrc" :arrows="arrows" />
       <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
         <view class="tip-content">
           <block v-if="showTip">

src/pages/point-book-edit.vue

@@ -46,9 +46,9 @@ const onSubmit = async () => {
       amount.value,
       Object.values(arrowGroups.value)
     );
-    if (res.id) {
+    if (res.record_id) {
       uni.redirectTo({
-        url: `/pages/point-book-detail?id=${res.id}`,
+        url: `/pages/point-book-detail?id=${res.record_id}`,
       });
     }
   }

src/pages/point-book-list.vue

@@ -7,15 +7,20 @@ import PointRecord from "@/components/PointRecord.vue";
 import ScrollList from "@/components/ScrollList.vue";
 import { getPointBookListAPI } from "@/apis";
 
-const bowType = ref("");
+const bowType = ref({});
 const distance = ref(0);
-const bowtargetType = ref("");
+const bowtargetType = ref({});
 const showModal = ref(false);
 const selectorIndex = ref(0);
 const list = ref([]);
 
 const onListLoading = async (page) => {
-  const result = await getPointBookListAPI(page, 1);
+  const result = await getPointBookListAPI(
+    page,
+    bowType.value.id,
+    distance.value,
+    bowtargetType.value.id
+  );
   if (page === 1) {
     list.value = result;
   } else {
@@ -31,12 +36,14 @@ const openSelector = (index) => {
 
 const onSelectOption = (itemIndex, value) => {
   if (itemIndex === 0) {
-    bowType.value = value;
+    bowType.value = value.name === bowType.value.name ? {} : value;
   } else if (itemIndex === 1) {
-    distance.value = value;
+    distance.value = value === distance.value ? 0 : value;
   } else if (itemIndex === 2) {
-    bowtargetType.value = value;
+    bowtargetType.value = value.name === bowtargetType.value.name ? {} : value;
   }
+  showModal.value = false;
+  onListLoading(1);
 };
 const toDetailPage = (id) => {
   uni.navigateTo({
@@ -55,32 +62,32 @@ const toDetailPage = (id) => {
     <view class="container">
       <view class="selectors">
         <view @click="() => openSelector(0)">
-          <text :style="{ color: bowType ? '#000' : '#999' }">{{
-            bowType || "请选择"
+          <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
+            bowType.name || "请选择"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
         <view @click="() => openSelector(1)">
-          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+          <text :style="{ color: distance ? '#000' : '#999' }">{{
             distance ? distance + " 米" : "请选择"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
         <view @click="() => openSelector(2)">
-          <text :style="{ color: bowType ? '#000' : '#999' }">{{
-            bowtargetType || "请选择"
+          <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
+            bowtargetType.name || "请选择"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
       </view>
       <view class="point-records">
-        <ScrollList :onLoading="onMatchLoading">
+        <ScrollList :onLoading="onListLoading">
           <view
             v-for="(item, index) in list"
             :key="index"
             @click="() => toDetailPage(item.id)"
           >
-            <PointRecord />
+            <PointRecord :data="item" />
           </view>
         </ScrollList>
       </view>
@@ -99,6 +106,7 @@ const toDetailPage = (id) => {
             :expand="true"
             :noArrow="true"
             :onSelect="onSelectOption"
+            :value="bowType.name"
           />
           <EditOption
             v-show="selectorIndex === 1"
@@ -106,6 +114,7 @@ const toDetailPage = (id) => {
             :expand="true"
             :noArrow="true"
             :onSelect="onSelectOption"
+            :value="distance + ''"
           />
           <EditOption
             v-show="selectorIndex === 2"
@@ -113,6 +122,7 @@ const toDetailPage = (id) => {
             :expand="true"
             :noArrow="true"
             :onSelect="onSelectOption"
+            :value="bowtargetType.name"
           />
         </view>
       </SModal>
@@ -170,5 +180,6 @@ const toDetailPage = (id) => {
 }
 .point-records {
   padding: 15px;
+  height: calc(100% - 30px);
 }
 </style>