Merge branch 'feature-points-book' into development

src/App.vue

@@ -203,4 +203,19 @@ button::after {
   margin-top: 20px;
   color: #fff9;
 }
+.see-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+}
+.see-more > text {
+  color: #39a8ff;
+  margin-top: 2px;
+  font-size: 13px;
+}
+.see-more > image {
+  width: 15px;
+  margin-top: 2px;
+}
 </style>

src/apis.js

@@ -15,7 +15,7 @@ function request(method, url, data = {}) {
         if (res.data) {
           const { code, data, message } = res.data;
           if (code === 0) resolve(data);
-          else {
+          else if (message) {
             if (message.indexOf("登录身份已失效") !== -1) {
               uni.removeStorageSync("token");
             }
@@ -365,3 +365,48 @@ export const getCurrentGameAPI = async () => {
   const result = await request("GET", "/user/join/battle");
   return result.currentGame || {};
 };
+
+export const getPointBookConfigAPI = async () => {
+  return request("GET", "/user/score/sheet/option");
+};
+
+export const savePointBookAPI = async (
+  bowType,
+  distance,
+  targetType,
+  groups,
+  arrows,
+  data = []
+) => {
+  return request("POST", "/user/score/sheet/report", {
+    bowType,
+    distance,
+    targetType,
+    groups,
+    arrows,
+    group_data: data.map((item) =>
+      item.map((i) => ({
+        ...i,
+        ring: i.ring === "M" ? -1 : i.ring === "X" ? 0 : Number(i.ring),
+      }))
+    ),
+  });
+};
+
+export const getPointBookListAPI = async (
+  page = 1,
+  bowType,
+  distance,
+  targetType
+) => {
+  let url = `/user/score/sheet/list?pageNum=${page}&pageSize=10`;
+  if (bowType) url += `&bowType=${bowType}`;
+  if (distance) url += `&distance=${distance}`;
+  if (targetType) url += `&targetType=${targetType}`;
+  const result = await request("GET", url);
+  return result.list || [];
+};
+
+export const getPointBookDetailAPI = async (id) => {
+  return request("GET", `/user/score/sheet/detail?id=${id}`);
+};

src/components/AppBackground.vue

@@ -5,11 +5,15 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  bgColor: {
+    type: String,
+    default: "#050b19",
+  },
 });
 </script>
 
 <template>
-  <view class="background">
+  <view class="background" :style="{ backgroundColor: bgColor }">
     <image
       class="bg-image"
       v-if="type === 0"
@@ -22,6 +26,12 @@ const props = defineProps({
       src="../static/app-bg2.png"
       mode="widthFix"
     />
+    <image
+      class="bg-image"
+      v-if="type === 2"
+      src="../static/app-bg3.png"
+      mode="widthFix"
+    />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
@@ -34,7 +44,6 @@ const props = defineProps({
   left: 0;
   top: 0;
   z-index: -1;
-  background-color: #050b19;
 }
 
 .bg-image {

src/components/AppFooter.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 
 const tabs = [
   { image: "../static/tab-vip.png" },
-  { image: "../static/tab-grow.png" },
+  { image: "../static/tab-point-book.png" },
   { image: "../static/tab-mall.png" },
 ];
 
@@ -26,7 +26,7 @@ function handleTabClick(index) {
   }
   if (index === 1) {
     uni.navigateTo({
-      url: "/pages/my-growth",
+      url: "/pages/point-book-create",
     });
   }
   if (index === 2) {
@@ -45,14 +45,11 @@ function handleTabClick(index) {
       :key="index"
       class="tab-item"
       @click="handleTabClick(index)"
-    >
-      <image
-        :src="tab.image"
       :style="{
-          width: index === 1 ? '100px' : '40px',
+        width: index === 1 ? '32%' : '10%',
       }"
-        mode="widthFix"
-      />
+    >
+      <image :src="tab.image" mode="widthFix" />
     </view>
   </view>
 </template>
@@ -76,10 +73,16 @@ function handleTabClick(index) {
 .tab-item {
   z-index: 1;
 }
+.tab-item > image {
+  width: 88%;
+}
 .tab-item:nth-child(2) {
-  transform: translateY(10px);
+  transform: translateY(20%) translateX(25%);
+}
+.tab-item:nth-child(3) {
+  transform: translateY(-10%) translateX(5%);
 }
 .tab-item:nth-child(4) {
-  transform: translateY(10px) translateX(-10px);
+  transform: translateY(20%) translateX(-25%);
 }
 </style>

src/components/BowTarget.vue

@@ -249,6 +249,7 @@ const simulShoot2 = async () => {
   text-align: center;
   line-height: 10px;
   box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 .hit > text {
   transform: scaleX(0.7);

src/components/BowTargetEdit.vue

@@ -0,0 +1,260 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { getElementRect, calcRing } from "@/util";
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
+  },
+  src: {
+    type: String,
+    default: "",
+  },
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+  onChange: {
+    type: Function,
+    default: null,
+  },
+});
+
+const rect = ref({});
+const arrow = ref(null);
+const isDragging = ref(false);
+const dragStartPos = ref({ x: 0, y: 0 });
+
+// 点击靶纸创建新的点
+const onClick = async (e) => {
+  if (arrow.value !== null || !props.onChange) return;
+  const newArrow = {
+    x: e.detail.x - (rect.value.width * 0.1) / 2,
+    y: e.detail.y - rect.value.top - 10,
+  };
+  newArrow.ring = calcRing(
+    props.id,
+    newArrow.x,
+    newArrow.y,
+    rect.value.width * 0.9,
+    rect.value.height - rect.value.top
+  );
+  arrow.value = newArrow;
+};
+
+// 确认添加箭矢
+const confirmAdd = () => {
+  if (props.onChange)
+    props.onChange({ ...arrow.value, ring: arrow.value.ring || "M" });
+  arrow.value = null;
+};
+
+// 删除箭矢
+const deleteArrow = () => {
+  arrow.value = null;
+};
+
+// 开始拖拽 - 同样修复坐标获取
+const startDrag = async (e, index) => {
+  if (!e.touches[0]) return;
+  isDragging.value = true;
+  dragStartPos.value = {
+    x: e.touches[0].clientX,
+    y: e.touches[0].clientY,
+  };
+};
+
+// 拖拽移动 - 同样修复坐标获取
+const onDrag = async (e) => {
+  if (!isDragging.value || !e.touches[0] || !arrow.value) return;
+
+  let clientX = e.touches[0].clientX;
+  let clientY = e.touches[0].clientY;
+
+  // 计算移动距离
+  const deltaX = clientX - dragStartPos.value.x;
+  const deltaY = clientY - dragStartPos.value.y;
+
+  const width = rect.value.width * 0.9;
+  const height = rect.value.height - rect.value.top;
+
+  // 更新坐标
+  arrow.value.x = Math.max(0, Math.min(width, arrow.value.x + deltaX));
+  arrow.value.y = Math.max(0, Math.min(height, arrow.value.y + deltaY));
+  arrow.value.ring = calcRing(
+    props.id,
+    arrow.value.x,
+    arrow.value.y,
+    width,
+    height
+  );
+
+  // 更新拖拽起始位置
+  dragStartPos.value = { x: clientX, y: clientY };
+};
+
+// 结束拖拽
+const endDrag = () => {
+  isDragging.value = false;
+};
+
+onMounted(async () => {
+  const result = await getElementRect();
+  rect.value = result;
+});
+</script>
+
+<template>
+  <view
+    class="container"
+    @click="onClick"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+  >
+    <image :src="src" mode="widthFix" />
+    <view
+      v-for="(arrow, index) in arrows"
+      :key="index"
+      class="arrow-point"
+      :style="{
+        left: (arrow.x !== undefined ? arrow.x : 0) + 'px',
+        top: (arrow.y !== undefined ? arrow.y : 0) + 'px',
+      }"
+    >
+      <view v-if="arrow.x !== undefined && arrow.y !== undefined" class="point"
+        ><text>{{ index + 1 }}</text></view
+      >
+    </view>
+    <!-- 渲染所有箭矢点 -->
+    <view
+      v-if="arrow"
+      class="arrow-point"
+      :style="{
+        left: arrow.x + 'px',
+        top: arrow.y + 'px',
+      }"
+    >
+      <!-- 箭矢点 -->
+      <view class="point"> </view>
+      <!-- 编辑按钮组（只在编辑状态下显示） -->
+      <view class="edit-buttons" @click.stop>
+        <text
+          >{{ arrow.ring === 0 ? "未上靶" : arrow.ring
+          }}<text
+            :style="{
+              fontSize: '20px',
+              marginLeft: arrow.ring > 0 ? '5px' : 0,
+            }"
+            >{{ arrow.ring > 0 ? "环" : "" }}</text
+          ></text
+        >
+        <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
+          <image src="../static/arrow-edit-save.png" mode="widthFix" />
+        </view>
+        <view class="edit-btn delete-btn" @click.stop="deleteArrow(index)">
+          <image src="../static/arrow-edit-delete.png" mode="widthFix" />
+        </view>
+        <view
+          class="edit-btn drag-btn"
+          @touchstart.stop="startDrag($event, index)"
+        >
+          <image src="../static/arrow-edit-move.png" mode="widthFix" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 90%;
+  margin: 10px auto;
+  position: relative;
+  user-select: none;
+}
+
+.container > image {
+  width: 100%;
+  display: block;
+}
+
+.arrow-point {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.point {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  z-index: 1;
+  color: #fff;
+  font-size: 8px;
+  text-align: center;
+  line-height: 10px;
+  box-sizing: border-box;
+  background-color: #ff4444;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.point > text {
+  transform: scaleX(0.7);
+  display: block;
+  font-weight: bold;
+}
+
+.edit-buttons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background: #18ff6899;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.edit-buttons > text {
+  width: 100%;
+  display: block;
+  line-height: 50px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.edit-btn {
+  transform: translateX(-50%) translateY(-50%);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+
+.edit-btn > image {
+  width: 24px;
+  height: 24px;
+}
+
+.confirm-btn {
+  left: 50%;
+  bottom: -24px;
+}
+
+.delete-btn {
+  right: -24px;
+  bottom: -24px;
+}
+
+.drag-btn {
+  left: 50%;
+  top: 0;
+}
+</style>

src/components/Container.vue

@@ -32,6 +32,14 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  bgColor: {
+    type: String,
+    default: "#050b19",
+  },
+  whiteBackArrow: {
+    type: Boolean,
+    default: true,
+  },
 });
 const isIos = ref(true);
 const showHint = ref(false);
@@ -67,8 +75,13 @@ const goBack = () => {
 
 <template>
   <view>
-    <AppBackground :type="bgType" />
-    <Header v-if="!isHome" :title="title" :onBack="onBack" />
+    <AppBackground :type="bgType" :bgColor="bgColor" />
+    <Header
+      v-if="!isHome"
+      :title="title"
+      :onBack="onBack"
+      :whiteBackArrow="whiteBackArrow"
+    />
     <BackToGame v-if="showBackToGame" />
     <view
       class="content"

src/components/EditOption.vue

@@ -0,0 +1,325 @@
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from "vue";
+const props = defineProps({
+  itemIndex: {
+    type: Number,
+    default: 0,
+  },
+  expand: {
+    type: Boolean,
+    default: false,
+  },
+  onExpand: {
+    type: Function,
+    default: () => {},
+  },
+  onSelect: {
+    type: Function,
+    default: () => {},
+  },
+  noArrow: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+});
+const itemTexts = ["选择弓种", "选择练习距离", "选择靶纸", "选择组/箭数"];
+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 onSelectItem = (index) => {
+  selectedIndex.value = index;
+  if (props.itemIndex === 0) {
+    props.onSelect(props.itemIndex, data.value[index]);
+  } else if (props.itemIndex === 1) {
+    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]}`
+    );
+  }
+};
+const onSelectSecondItem = (index) => {
+  secondSelectIndex.value = index;
+  if (selectedIndex.value !== -1) {
+    props.onSelect(
+      props.itemIndex,
+      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+    );
+  }
+};
+const meter = ref("");
+const onMeterChange = (e) => {
+  meter.value = e.detail.value;
+  props.onSelect(props.itemIndex, e.detail.value);
+};
+watch(
+  () => props.value,
+  (newValue) => {
+    if (!newValue) {
+      selectedIndex.value = -1;
+      return;
+    }
+    if (props.itemIndex === 0 || props.itemIndex === 2) {
+      data.value.forEach((item, index) => {
+        if (item.name === newValue) {
+          selectedIndex.value = index;
+        }
+      });
+    }
+    if (props.itemIndex === 1) {
+      distances.forEach((item, index) => {
+        if (item == newValue) {
+          selectedIndex.value = index;
+        }
+        if (selectedIndex.value === -1) {
+          meter.value = newValue;
+        }
+      });
+    }
+  }
+);
+onMounted(() => {
+  const config = uni.getStorageSync("point-book-config");
+  if (config) {
+    if (props.itemIndex === 0) {
+      data.value = config.bowOption;
+    } else if (props.itemIndex === 2) {
+      data.value = config.targetOption;
+    }
+  }
+});
+</script>
+
+<template>
+  <view
+    class="container"
+    :style="{
+      maxHeight: expand ? '500px' : '50px',
+      marginTop: noArrow ? '0' : '10px',
+    }"
+  >
+    <view @click="() => onExpand(itemIndex, !expand)">
+      <text :style="{ opacity: expand ? 1 : 0 }">{{
+        itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
+      }}</text>
+      <block>
+        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
+          value || itemTexts[itemIndex]
+        }}</text>
+        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
+          value ? value + "米" : itemTexts[itemIndex]
+        }}</text>
+        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
+          value || itemTexts[itemIndex]
+        }}</text>
+        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
+          selectedIndex !== -1 && secondSelectIndex !== -1
+            ? `${selectedIndex + 1}组/${groupArrows[secondSelectIndex]}箭`
+            : itemTexts[itemIndex]
+        }}</text>
+      </block>
+      <button hover-class="none">
+        <image
+          v-if="!noArrow"
+          src="../static/arrow-grey.png"
+          mode="widthFix"
+          :style="{ transform: expand ? 'rotateX(180deg)' : 'rotateX(0deg)' }"
+        />
+      </button>
+    </view>
+    <view v-if="itemIndex === 0" class="bow-items">
+      <view
+        v-for="(item, index) in data"
+        :key="index"
+        :style="{
+          borderColor: selectedIndex === index ? '#fed847' : '#eeeeee',
+        }"
+        @click="onSelectItem(index)"
+      >
+        <image :src="item.icon" mode="widthFix" />
+        <text>{{ item.name }}</text>
+      </view>
+    </view>
+    <view v-if="itemIndex === 1" class="distance-items">
+      <view
+        v-for="(item, index) in distances"
+        :key="index"
+        :style="{
+          borderColor: selectedIndex === index ? '#fed847' : '#eeeeee',
+        }"
+        @click="onSelectItem(index)"
+      >
+        <text>{{ item }}</text>
+        <text>米</text>
+      </view>
+      <view
+        :style="{
+          borderColor: selectedIndex === 9 ? '#fed847' : '#eeeeee',
+        }"
+      >
+        <input
+          v-model="meter"
+          placeholder="自定义"
+          placeholder-style="color: #DDDDDD"
+          @focus="() => (selectedIndex = 9)"
+          @change="onMeterChange"
+        />
+        <text>米</text>
+      </view>
+    </view>
+    <view v-if="itemIndex === 2" class="bowtarget-items">
+      <view
+        v-for="(item, index) in data"
+        :key="index"
+        :style="{
+          borderColor: selectedIndex === index ? '#fed847' : '#eeeeee',
+        }"
+        @click="onSelectItem(index)"
+      >
+        <text>{{ item.name.substring(0, item.name.length - 3) }}</text>
+        <text>{{ item.name.substring(item.name.length - 3) }}</text>
+      </view>
+    </view>
+    <view v-if="itemIndex === 3">
+      <view class="amount-items">
+        <view
+          v-for="i in 12"
+          :key="i"
+          :style="{
+            borderColor: selectedIndex === i ? '#fed847' : '#eeeeee',
+          }"
+          @click="onSelectItem(i)"
+        >
+          <text>{{ i }}</text>
+          <text>组</text>
+        </view>
+      </view>
+      <view
+        :style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
+        >选择每组的箭数</view
+      >
+      <view class="amount-items">
+        <view
+          v-for="(item, index) in groupArrows"
+          :key="index"
+          :style="{
+            borderColor: secondSelectIndex === index ? '#fed847' : '#eeeeee',
+          }"
+          @click="onSelectSecondItem(index)"
+        >
+          <text>{{ item }}</text>
+          <text>箭</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 20px);
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 0 10px;
+  font-size: 14px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  color: #333;
+}
+.container > view:first-child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+}
+.container > view:first-child > text:first-child {
+  width: 85px;
+  color: #999999;
+}
+.container > view:first-child > button {
+  width: 85px;
+  display: flex;
+  justify-content: flex-end;
+}
+.container > view:first-child > button > image {
+  transition: all 0.5s ease;
+  width: 20px;
+  height: 20px;
+}
+.bow-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 2vw;
+}
+.bow-items > view {
+  width: 27vw;
+  height: 27vw;
+  border-radius: 10px;
+  border: 2px solid #eeeeee;
+  margin-bottom: 2vw;
+}
+.bow-items > view > image {
+  width: 100%;
+}
+.bow-items > view > text {
+  width: 100%;
+  display: block;
+  text-align: center;
+  transform: translateY(-30px);
+}
+.distance-items,
+.bowtarget-items,
+.amount-items {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 2vw;
+  position: relative;
+}
+.distance-items > view,
+.bowtarget-items > view,
+.amount-items > view {
+  width: 20vw;
+  height: 14vw;
+  border-radius: 10px;
+  border: 2px solid #eeeeee;
+  margin-bottom: 2vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.distance-items > view > text:first-child,
+.amount-items > view > text:first-child {
+  width: 25px;
+  display: block;
+  text-align: center;
+}
+.distance-items > view:last-child {
+  width: 65.5vw;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.distance-items > view:last-child > input {
+  width: 80%;
+  text-align: center;
+}
+.bowtarget-items > view {
+  flex-direction: column;
+  height: 16vw;
+}
+.bowtarget-items > view > text {
+  width: 100%;
+  text-align: center;
+}
+</style>

src/components/Header.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  whiteBackArrow: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const onClick = () => {
@@ -20,6 +24,7 @@ const onClick = () => {
 
 const loading = ref(false);
 const showLoader = ref(false);
+const pointBook = ref(null);
 const updateLoading = (value) => {
   loading.value = value;
 };
@@ -29,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" ||
@@ -46,9 +54,14 @@ onUnmounted(() => {
 <template>
   <view class="container" :style="{ paddingTop: isIos ? '80rpx' : '50rpx' }">
     <view class="back-btn" @click="onClick">
-      <image src="../static/back.png" mode="widthFix" />
+      <image v-if="whiteBackArrow" src="../static/back.png" mode="widthFix" />
+      <image
+        v-if="!whiteBackArrow"
+        src="../static/back-black.png"
+        mode="widthFix"
+      />
     </view>
-    <view>
+    <view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
       <block
         v-if="
           '-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
@@ -83,6 +96,21 @@ onUnmounted(() => {
       mode="widthFix"
       class="loading"
     />
+    <view v-if="pointBook" class="point-book-info">
+      <text>{{ pointBook.bowType.name }}</text>
+      <text>{{ pointBook.distance }} 米</text>
+      <text
+        >{{
+          pointBook.bowtargetType.name.substring(
+            0,
+            pointBook.bowtargetType.name.length - 3
+          )
+        }}
+        {{
+          pointBook.bowtargetType.name.substring(pointBook.bowtargetType.name.length - 3)
+        }}</text
+      >
+    </view>
   </view>
 </template>
 
@@ -95,7 +123,8 @@ onUnmounted(() => {
   height: 100rpx;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
-  color: #fff;
+}
+.container > view:nth-child(2) {
   font-size: 16px;
   font-weight: bold;
 }
@@ -104,8 +133,8 @@ onUnmounted(() => {
   align-items: center;
 }
 .back-btn > image {
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
   margin-right: 10px;
 }
 .first-try-steps {
@@ -133,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/components/PointRecord.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+const bowOptions = ref({});
+const targetOptions = ref({});
+
+onMounted(() => {
+  const result = uni.getStorageSync("point-book-config");
+  (result.bowOption || []).forEach((item) => {
+    bowOptions.value[item.id] = item;
+  });
+  (result.targetOption || []).forEach((item) => {
+    targetOptions.value[item.id] = item;
+  });
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <view class="labels">
+        <text>{{
+          bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
+        }}</text>
+        <text>{{ data.distance }} 米</text>
+        <text>{{
+          targetOptions[data.targetType]
+            ? targetOptions[data.targetType].name
+            : ""
+        }}</text>
+      </view>
+      <view>
+        <text>{{ data.createAt }}</text>
+      </view>
+    </view>
+    <view>
+      <image src="../static/bow-target.png" mode="widthFix" />
+      <view class="aroow-amount">
+        <text>共</text>
+        <text>{{ data.arrows * data.groups }}</text>
+        <text>箭</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  background-color: #fff;
+  border-radius: 15px;
+  display: flex;
+  margin-bottom: 15px;
+  height: 24vw;
+}
+.container > view {
+  position: relative;
+  margin-left: 15px;
+}
+.container > view:first-child {
+  width: calc(100% - 5vw);
+}
+.container > view:first-child > view {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+.labels {
+  align-items: flex-end !important;
+}
+.labels > text {
+  font-size: 12px;
+  color: #333333;
+  border: 1px solid #eee;
+  margin-right: 10px;
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+.container > view:last-child {
+  margin-right: 1vw;
+}
+.container > view:last-child > image {
+  width: 24vw;
+}
+.aroow-amount {
+  position: absolute;
+  background-color: #0009;
+  border-radius: 10px;
+  color: #fffc;
+  font-size: 12px;
+  line-height: 22px;
+  width: 60px;
+  display: flex;
+  justify-content: center;
+  top: calc(50% - 11px);
+  left: calc(50% - 30px);
+}
+.aroow-amount > text:nth-child(2) {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+}
+</style>

src/components/SButton.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     default: "#000",
   },
+  disabledColor:{
+    type: String,
+    default: "#757575",
+  }
 });
 
 const loading = ref(false);
@@ -55,7 +59,7 @@ const onBtnClick = debounce(async () => {
     :style="{
       width: width,
       borderRadius: rounded + 'px',
-      backgroundColor: disabled ? '#757575' : backgroundColor,
+      backgroundColor: disabled ? disabledColor : backgroundColor,
       color,
     }"
     open-type="getUserInfo"

src/components/SModal.vue

@@ -9,32 +9,50 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
 });
+const showContainer = ref(false);
 const showContent = ref(false);
 watch(
   () => props.show,
   (newValue) => {
+    if (newValue) {
+      showContainer.value = true;
       setTimeout(() => {
-      showContent.value = newValue;
+        showContent.value = true;
       }, 100);
-  }
-);
-const closeModal = () => {
+    } else {
       showContent.value = false;
       setTimeout(() => {
-    props.onClose();
-  }, 300);
-};
+        showContainer.value = false;
+      }, 100);
+    }
+  },
+  {}
+);
 </script>
 
 <template>
-  <view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
+  <view
+    class="container"
+    v-if="showContainer"
+    :style="{ opacity: show ? 1 : 0 }"
+    @click="onClose"
+  >
     <view
       class="modal-content"
-      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
+      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})`, height: !noBg ? '260px' : 'auto' }"
+      @click.stop=""
     >
-      <image src="../static/modal-content-bg.png" mode="widthFix" />
-      <view class="close-btn" @click="closeModal">
+      <image
+        v-if="!noBg"
+        src="../static/modal-content-bg.png"
+        mode="widthFix"
+      />
+      <view class="close-btn" @click="onClose">
         <image src="../static/close-yellow.png" mode="widthFix" />
       </view>
       <slot></slot>
@@ -60,7 +78,6 @@ const closeModal = () => {
 }
 .modal-content {
   width: 100%;
-  height: 260px;
   transform: translateY(100%);
   transition: all 0.3s ease;
   position: relative;

src/components/ScreenHint2.vue

@@ -0,0 +1,66 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: null,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/point-book-tip-bg.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      v-if="!!onClose"
+      src="../static/close-white-outline.png"
+      :width="30"
+      :onClick="onClose"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 75vw;
+  margin-bottom: 15px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: #fff;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  top: 0;
+}
+</style>

src/pages.json

@@ -6,6 +6,18 @@
     {
       "path": "pages/battle-result"
     },
+    {
+      "path": "pages/point-book-edit"
+    },
+    {
+      "path": "pages/point-book-create"
+    },
+    {
+      "path": "pages/point-book-list"
+    },
+    {
+      "path": "pages/point-book-detail"
+    },
     {
       "path": "pages/match-page"
     },

src/pages/index.vue

@@ -18,7 +18,8 @@ import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { updateConfig, updateUser, updateDevice, updateRank } = store;
+const { updateConfig, updateUser, updateDevice, updateRank, getLvlName } =
+  store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user, device, rankData } = storeToRefs(store);
 const showModal = ref(false);
@@ -109,11 +110,10 @@ const comingSoon = () => {
         <view class="feature-grid">
           <view class="bow-card">
             <image
-              src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbciq9qhkpd3pqxawo.webp"
+              src="../static/my-bow.png"
               mode="widthFix"
               @click="() => toPage('/pages/my-device')"
             />
-
             <text v-if="!user.id">我的弓箭</text>
             <text v-if="user.id && !device.deviceId">请绑定设备</text>
             <text
@@ -123,7 +123,7 @@ const comingSoon = () => {
               >{{ device.deviceName }}</text
             >
             <image
-              src="../static/a2@2x.png"
+              src="../static/first-try.png"
               mode="widthFix"
               @click="() => toPage('/pages/first-try')"
             />
@@ -135,20 +135,17 @@ const comingSoon = () => {
               <text>快来报到吧~</text>
             </BubbleTip>
           </view>
-
-          <view class="practice-card" @click="() => toPage('/pages/practise')">
-            <image src="../static/a2@2x(1).png" mode="widthFix" />
+          <view class="play-card">
+            <view @click="() => toPage('/pages/practise')">
+              <image src="../static/my-practise.png" mode="widthFix" />
+            </view>
+            <view @click="() => toPage('/pages/friend-battle')">
+              <image src="../static/friend-battle.png" mode="widthFix" />
             </view>
-
-          <view
-            class="friend-card"
-            @click="() => toPage('/pages/friend-battle')"
-          >
-            <image src="../static/a3@2x.png" mode="widthFix" />
           </view>
         </view>
         <view class="ranking-section">
-          <image src="../static/a4@2x.png" mode="widthFix" />
+          <image src="../static/rank-bg.png" mode="widthFix" />
           <button
             class="into-btn"
             @click="() => toPage('/pages/ranking')"
@@ -185,7 +182,30 @@ const comingSoon = () => {
               </view>
             </view>
           </view>
-          <view class="region-stats">
+          <view class="my-data">
+            <view @click="() => toPage('/pages/my-growth')">
+              <image src="../static/my-growth.png" mode="widthFix" />
+            </view>
+            <view>
+              <view>
+                <text>段位</text>
+                <text>{{ user.scores ? getLvlName(user.scores) : "-" }}</text>
+              </view>
+              <view>
+                <text>赛季平均环数</text>
+                <text>{{ user.avg_ring ? user.avg_ring + "环" : "-" }}</text>
+              </view>
+              <view>
+                <text>赛季胜率</text>
+                <text>{{
+                  user.avg_win
+                    ? Number((user.avg_win * 100).toFixed(2)) + "%"
+                    : "-"
+                }}</text>
+              </view>
+            </view>
+          </view>
+          <!-- <view class="region-stats">
             <view
               v-for="(region, index) in [
                 { name: '广东', score: 4291 },
@@ -237,7 +257,7 @@ const comingSoon = () => {
               <text>...</text>
               <text>更多</text>
             </view>
-          </view>
+          </view> -->
         </view>
       </view>
       <SModal :show="showModal" :onClose="() => (showModal = false)">
@@ -254,17 +274,19 @@ const comingSoon = () => {
 }
 
 .feature-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas: "bow practice" "bow friend";
-  row-gap: 5px;
-  column-gap: 10px;
-  margin-bottom: 10px;
+  width: 100%;
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.feature-grid > view {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .bow-card {
-  grid-area: bow;
-  position: relative;
+  width: 50%;
 }
 
 .feature-grid > view > image {
@@ -281,21 +303,16 @@ const comingSoon = () => {
   color: #b3b3b3;
 }
 
-.bow-card > image:first-child {
-  transform: scaleY(1.08) translateY(9px);
-}
-
 .bow-card > image:nth-child(3) {
   transform: translateY(-1px);
 }
 
-.practice-card {
-  grid-area: practice;
-  width: 100%;
+.play-card {
+  width: 48%;
+  margin-left: 2%;
 }
 
-.friend-card {
-  grid-area: friend;
+.play-card > view > image {
   width: 100%;
 }
 
@@ -382,7 +399,7 @@ const comingSoon = () => {
 }
 
 .more-players {
-  background: rgba(255, 255, 255, 0.2);
+  background: #3c445a;
   font-size: 9px;
   line-height: 80rpx;
   text-align: center;
@@ -447,4 +464,39 @@ const comingSoon = () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
+.my-data {
+  display: flex;
+  margin-top: 20px;
+  justify-content: space-between;
+}
+.my-data > view:first-child {
+  width: 28%;
+}
+.my-data > view:first-child > image {
+  width: 100%;
+  transform: translateX(-8px);
+}
+.my-data > view:nth-child(2) {
+  width: 68%;
+  font-size: 12px;
+  color: #fff6;
+  display: flex;
+  justify-content: space-between;
+}
+.my-data > view:nth-child(2) > view:nth-child(2) {
+  width: 38%;
+}
+.my-data > view:nth-child(2) > view {
+  width: 28%;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #303b4c 30%, #2c384a 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.my-data > view:nth-child(2) > view > text:last-child {
+  color: #fff;
+  line-height: 25px;
+}
 </style>

src/pages/point-book-create.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import Container from "@/components/Container.vue";
+import EditOption from "@/components/EditOption.vue";
+import SButton from "@/components/SButton.vue";
+import { getPointBookConfigAPI } from "@/apis";
+
+const clickable = ref(false);
+const expandIndex = ref(-1);
+const bowType = ref({});
+const distance = ref(0);
+const bowtargetType = ref("");
+const amountGroup = ref("");
+const onExpandChange = (index, expand) => {
+  if (expandIndex.value !== -1) {
+    expandIndex.value = -1;
+    setTimeout(() => {
+      expandIndex.value = !expand ? -1 : index;
+    }, 100);
+  } else {
+    expandIndex.value = !expand ? -1 : index;
+  }
+};
+
+const toListPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-list",
+  });
+};
+const onSelect = (itemIndex, value) => {
+  if (itemIndex === 0) bowType.value = value;
+  else if (itemIndex === 1) distance.value = value;
+  else if (itemIndex === 2) bowtargetType.value = value;
+  else if (itemIndex === 3) amountGroup.value = value;
+  if (itemIndex < 3) expandIndex.value += 1;
+  if (
+    bowType.value &&
+    distance.value &&
+    bowtargetType.value &&
+    amountGroup.value
+  ) {
+    uni.setStorageSync("point-book", {
+      bowType: bowType.value,
+      distance: distance.value,
+      bowtargetType: bowtargetType.value,
+      amountGroup: amountGroup.value,
+    });
+    clickable.value = true;
+  }
+};
+const toEditPage = () => {
+  expandIndex.value = -1;
+  uni.navigateTo({
+    url: "/pages/point-book-edit",
+  });
+};
+onMounted(async () => {
+  const config = await getPointBookConfigAPI();
+  if (config) {
+    uni.setStorageSync("point-book-config", config);
+  }
+  const pointBook = uni.getStorageSync("point-book");
+  if (pointBook) {
+    bowType.value = pointBook.bowType;
+    distance.value = pointBook.distance;
+    bowtargetType.value = pointBook.bowtargetType;
+  }
+});
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="计分本"
+  >
+    <view class="container">
+      <image
+        src="https://api.shelingxingqiu.com/attachment/2025-07-30/dbp9r4762kiaqykbpn.png"
+        mode="widthFix"
+      />
+      <view>
+        <EditOption
+          :itemIndex="0"
+          :expand="expandIndex === 0"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+          :value="bowType.name"
+        />
+        <EditOption
+          :itemIndex="1"
+          :expand="expandIndex === 1"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+          :value="distance + ''"
+        />
+        <EditOption
+          :itemIndex="2"
+          :expand="expandIndex === 2"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+          :value="bowtargetType.name"
+        />
+        <EditOption
+          :itemIndex="3"
+          :expand="expandIndex === 3"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+      </view>
+    </view>
+    <view :style="{ marginBottom: '20px' }">
+      <SButton
+        :disabled="!clickable"
+        :onClick="toEditPage"
+        disabledColor="#DDDDDD"
+        :color="clickable ? '#000' : '#fff'"
+      >
+        开始计分
+      </SButton>
+      <view class="see-more" @click="toListPage">
+        <text>历史计分记录</text>
+        <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 20px);
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > image {
+  width: 100%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+.container > view:nth-child(2) {
+  margin: 0 10px;
+}
+</style>

src/pages/point-book-detail.vue

@@ -0,0 +1,233 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import BowTargetEdit from "@/components/BowTargetEdit.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+
+import { getPointBookDetailAPI } from "@/apis";
+
+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;
+  else if (index === 2) showTip2.value = true;
+};
+
+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>
+  <Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="分析">
+    <view class="container">
+      <view class="tab-bar">
+        <view
+          v-for="(_, index) in groups"
+          :key="index"
+          @click="onSelect(index)"
+        >
+          <text
+            :style="{
+              color: selectedIndex === index ? '#FF8709' : '#333',
+              fontSize: selectedIndex === index ? '15px' : '13px',
+              letterSpacing: index !== 0 ? '2px' : '0',
+            }"
+            >{{ index === 0 ? "全部" : `第${index}组` }}</text
+          >
+          <image
+            src="../static/s-triangle.png"
+            mode="widthFix"
+            :style="{ bottom: selectedIndex !== index ? '0' : '-6px' }"
+          />
+        </view>
+      </view>
+      <view class="detail-data">
+        <view>
+          <view
+            :style="{ display: 'flex', alignItems: 'center' }"
+            @click="() => openTip(1)"
+          >
+            <text>落点稳定性</text>
+            <image
+              src="../static/s-question-mark.png"
+              mode="widthFix"
+              class="question-mark"
+            />
+          </view>
+          <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
+        </view>
+        <view>
+          <view>黄心率</view>
+          <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
+        </view>
+        <view>
+          <view>10环数</view>
+          <text>{{ data.tenRings }}</text>
+        </view>
+        <view>
+          <view>平均环数</view>
+          <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
+        </view>
+        <view>
+          <view>总环数</view>
+          <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
+        </view>
+      </view>
+      <view class="title-bar">
+        <view />
+        <text>落点分布</text>
+        <button hover-class="none" @click="() => openTip(2)">
+          <image
+            src="../static/s-question-mark.png"
+            mode="widthFix"
+            class="question-mark"
+          />
+        </button>
+      </view>
+      <BowTargetEdit :src="targetSrc" :arrows="arrows" />
+      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+        <view class="tip-content">
+          <block v-if="showTip">
+            <text>落点稳定性说明</text>
+            <text
+              >通过计算每支箭与其他箭的平均距离衡一量射击的稳定性，数字越小则说明射击越稳定。该数据只能在用户标记落点的情况下生成。</text
+            >
+          </block>
+          <block v-if="showTip2">
+            <text>落点分布说明</text>
+            <text>展示用户某次练习中射击的点位</text>
+          </block>
+        </view>
+      </ScreenHint2>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+.tab-bar {
+  display: flex;
+  width: clac(100% - 20px);
+  overflow-x: auto;
+  padding: 0 10px;
+}
+.tab-bar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.tab-bar > view {
+  border-radius: 10px;
+  background-color: #fff;
+  width: 24vw;
+  height: 13vw;
+  line-height: 13vw;
+  text-align: center;
+  margin: 5px;
+  margin-top: 0;
+  font-size: 14px;
+  flex: 0 0 auto;
+  position: relative;
+}
+.tab-bar > view > text {
+  transition: all 0.2s ease;
+}
+.tab-bar > view > image {
+  position: absolute;
+  width: 14px;
+  height: 4px;
+  left: calc(50% - 7px);
+  transition: all 0.3s ease;
+}
+.detail-data {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 3vw;
+  margin: 10px 15px;
+}
+.detail-data > view {
+  border-radius: 10px;
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding: 12px;
+}
+.detail-data > view > view {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 8px;
+}
+.question-mark {
+  width: 15px;
+  height: 15px;
+  margin-left: 3px;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+}
+.title-bar > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+  margin-left: 15px;
+}
+.title-bar > text {
+  margin-bottom: 2px;
+}
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.tip-content > text {
+  width: 100%;
+}
+.tip-content > text:first-child {
+  text-align: center;
+}
+.tip-content > text:last-child {
+  font-size: 13px;
+  margin-top: 20px;
+  opacity: 0.8;
+}
+</style>

src/pages/point-book-edit.vue

@@ -0,0 +1,278 @@
+<script setup>
+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";
+import { savePointBookAPI } from "@/apis";
+
+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 bowtarget = ref({});
+const ringTypes = ref([
+  { ring: "X", color: "#FADB80" },
+  { ring: "10", color: "#FADB80" },
+  { ring: "9", color: "#FADB80" },
+  { ring: "8", color: "#F97E81" },
+  { ring: "7", color: "#F97E81" },
+  { ring: "6", color: "#7AC7FF" },
+  { ring: "5", color: "#7AC7FF" },
+  { ring: "4", color: "#9B9B9B" },
+  { ring: "3", color: "#9B9B9B" },
+  { ring: "2", color: "#d8d8d8" },
+  { ring: "1", color: "#d8d8d8" },
+]);
+
+const onBack = () => {
+  uni.navigateBack();
+};
+const onSubmit = async () => {
+  if (currentGroup.value < groups.value) {
+    currentGroup.value++;
+    currentArrow.value = 0;
+    clickable.value = false;
+  } else {
+    const pointBook = uni.getStorageSync("point-book");
+    const res = await savePointBookAPI(
+      pointBook.bowType.id,
+      pointBook.distance,
+      pointBook.bowtargetType.id,
+      groups.value,
+      amount.value,
+      Object.values(arrowGroups.value)
+    );
+    if (res.record_id) {
+      uni.redirectTo({
+        url: `/pages/point-book-detail?id=${res.record_id}`,
+      });
+    }
+  }
+};
+const onClickRing = (ring) => {
+  if (arrowGroups.value[currentGroup.value]) {
+    arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
+    clickable.value = arrowGroups.value[currentGroup.value].every(
+      (item) => !!item.ring
+    );
+    if (currentArrow.value < amount.value - 1) currentArrow.value++;
+  }
+};
+const deleteArrow = () => {
+  arrowGroups.value[currentGroup.value][currentArrow.value] = {};
+};
+const onEditDone = (arrow) => {
+  arrowGroups.value[currentGroup.value][currentArrow.value] = arrow;
+  clickable.value = arrowGroups.value[currentGroup.value].every(
+    (item) => !!item.ring
+  );
+  if (currentArrow.value < amount.value - 1) currentArrow.value++;
+};
+
+onMounted(() => {
+  const pointBook = uni.getStorageSync("point-book");
+  if (pointBook.bowtargetType) {
+    bowtarget.value = pointBook.bowtargetType;
+    if (bowtarget.value.id > 3) {
+      ringTypes.value = ringTypes.value.slice(0, 6);
+      if (bowtarget.value.id > 8) {
+        ringTypes.value = ringTypes.value.slice(1);
+      }
+    }
+  }
+  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({});
+    }
+  }
+});
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    :onBack="() => (showTip = true)"
+  >
+    <view class="container">
+      <BowTargetEdit
+        :onChange="onEditDone"
+        :arrows="arrowGroups[currentGroup]"
+        :id="bowtarget.id"
+        :src="bowtarget.icon"
+      />
+      <view class="title-bar">
+        <view>
+          <view />
+          <text>第 {{ currentGroup }} 组</text>
+        </view>
+        <view @click="deleteArrow">
+          <image src="../static/delete.png" />
+          <text>删除</text>
+        </view>
+      </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',
+          }"
+          >{{
+            isNaN(arrow.ring)
+              ? arrow.ring
+              : arrow.ring
+              ? arrow.ring + " 环"
+              : ""
+          }}</view
+        >
+      </view>
+      <text>输入分值的情况下，系统不提供落点稳定性分</text>
+      <view class="bow-rings">
+        <view
+          v-for="(item, index) in ringTypes"
+          :key="index"
+          @click="() => onClickRing(item.ring)"
+          :style="{ backgroundColor: item.color }"
+          >{{ item.ring }}</view
+        >
+        <view
+          :style="{ backgroundColor: '#d8d8d8' }"
+          @click="() => onClickRing('M')"
+          >M</view
+        >
+      </view>
+      <ScreenHint2 :show="showTip">
+        <view class="tip-content">
+          <text>现在离开会导致</text>
+          <text>未提交的数据丢失，是否继续？</text>
+          <view>
+            <button hover-class="none" @click="onBack">退出</button>
+            <button hover-class="none" @click="showTip = false">
+              继续记录
+            </button>
+          </view>
+        </view>
+      </ScreenHint2>
+    </view>
+    <view :style="{ marginBottom: '20px' }">
+      <SButton
+        :disabled="!clickable"
+        :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;
+}
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.tip-content > text {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.tip-content > view {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.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;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
+.title-bar {
+  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 > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+}
+.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>

src/pages/point-book-list.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import Container from "@/components/Container.vue";
+import SModal from "@/components/SModal.vue";
+import EditOption from "@/components/EditOption.vue";
+import PointRecord from "@/components/PointRecord.vue";
+import ScrollList from "@/components/ScrollList.vue";
+import { getPointBookListAPI } from "@/apis";
+
+const bowType = ref({});
+const distance = ref(0);
+const bowtargetType = ref({});
+const showModal = ref(false);
+const selectorIndex = ref(0);
+const list = ref([]);
+
+const onListLoading = async (page) => {
+  const result = await getPointBookListAPI(
+    page,
+    bowType.value.id,
+    distance.value,
+    bowtargetType.value.id
+  );
+  if (page === 1) {
+    list.value = result;
+  } else {
+    list.value = list.value.concat(result);
+  }
+  return result.length;
+};
+
+const openSelector = (index) => {
+  selectorIndex.value = index;
+  showModal.value = true;
+};
+
+const onSelectOption = (itemIndex, value) => {
+  if (itemIndex === 0) {
+    bowType.value = value.name === bowType.value.name ? {} : value;
+  } else if (itemIndex === 1) {
+    distance.value = value === distance.value ? 0 : value;
+  } else if (itemIndex === 2) {
+    bowtargetType.value = value.name === bowtargetType.value.name ? {} : value;
+  }
+  showModal.value = false;
+  onListLoading(1);
+};
+const toDetailPage = (id) => {
+  uni.navigateTo({
+    url: `/pages/point-book-detail?id=${id}`,
+  });
+};
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="计分记录"
+  >
+    <view class="container">
+      <view class="selectors">
+        <view @click="() => openSelector(0)">
+          <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: distance ? '#000' : '#999' }">{{
+            distance ? distance + " 米" : "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+        <view @click="() => openSelector(2)">
+          <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="onListLoading">
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            @click="() => toDetailPage(item.id)"
+          >
+            <PointRecord :data="item" />
+          </view>
+        </ScrollList>
+      </view>
+      <SModal
+        :show="showModal"
+        :noBg="true"
+        :onClose="() => (showModal = false)"
+      >
+        <view class="selector">
+          <button hover-class="none" @click="() => (showModal = false)">
+            <image src="../static/close-grey.png" mode="widthFix" />
+          </button>
+          <EditOption
+            v-show="selectorIndex === 0"
+            :itemIndex="0"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="bowType.name"
+          />
+          <EditOption
+            v-show="selectorIndex === 1"
+            :itemIndex="1"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="distance + ''"
+          />
+          <EditOption
+            v-show="selectorIndex === 2"
+            :itemIndex="2"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="bowtargetType.name"
+          />
+        </view>
+      </SModal>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.selectors {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+}
+.selectors > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  height: 55px;
+  border-radius: 12px;
+  color: #333;
+  font-size: 13px;
+  width: 26vw;
+}
+.selectors > view:last-child {
+  width: 34vw;
+}
+.selectors > view > text {
+  width: calc(100% - 11vw);
+  text-align: center;
+  margin-left: 3vw;
+}
+.selectors > view > image {
+  width: 5vw;
+  margin-right: 3vw;
+}
+.selector {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  position: relative;
+}
+.selector > button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.selector > button > image {
+  width: 40px;
+}
+.point-records {
+  padding: 15px;
+  height: calc(100% - 30px);
+}
+</style>

src/util.js

@@ -286,3 +286,155 @@ export const isGameEnded = async (battleId) => {
   }
   return !isGaming;
 };
+
+// 获取元素尺寸和位置信息
+export const getElementRect = () => {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery();
+    query
+      .select(".container")
+      .boundingClientRect((rect) => {
+        resolve(rect);
+      })
+      .exec();
+  });
+};
+
+const calcNormalBowTarget = (x, y, targetWidth, targetHeight) => {
+  // 计算靶心坐标（靶纸中心）
+  const centerX = targetWidth / 2;
+  const centerY = targetHeight / 2;
+
+  // 计算点击点到靶心的距离
+  const deltaX = x - centerX;
+  const deltaY = y - centerY;
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  // 计算靶纸半径（取宽高中较小值的一半）
+  // const targetRadius = Math.min(targetWidth, targetHeight) / 2;
+  const targetRadius = targetWidth / 2;
+
+  // 如果距离超过靶纸半径，则脱靶
+  if (distance > targetRadius) return 0;
+
+  // 计算相对距离（0-1之间）
+  const relativeDistance = distance / targetRadius;
+  // 全环靶有10个环，每个环占半径的10%
+  // 从外到内：1环到10环
+  // 距离越近靶心，环数越高
+  if (relativeDistance <= 0.05) return "X";
+  if (relativeDistance <= 0.1) return 10;
+  if (relativeDistance <= 0.2) return 9;
+  if (relativeDistance <= 0.3) return 8;
+  if (relativeDistance <= 0.4) return 7;
+  if (relativeDistance <= 0.5) return 6;
+  if (relativeDistance <= 0.6) return 5;
+  if (relativeDistance <= 0.7) return 4;
+  if (relativeDistance <= 0.8) return 3;
+  if (relativeDistance <= 0.9) return 2;
+  if (relativeDistance <= 1.0) return 1;
+
+  return 0; // 脱靶
+};
+
+const calcHalfBowTarget = (x, y, side, noX = false) => {
+  // 计算靶心坐标（靶纸中心）
+  const centerX = side / 2;
+  const centerY = side / 2;
+
+  // 计算点击点到靶心的距离
+  const deltaX = x - centerX;
+  const deltaY = y - centerY;
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  // 计算靶纸半径（取宽高中较小值的一半）
+  const targetRadius = side / 2;
+
+  // 如果距离超过靶纸半径，则脱靶
+  if (distance > targetRadius) return 0;
+
+  // 计算相对距离（0-1之间）
+  const relativeDistance = distance / targetRadius;
+  if (relativeDistance <= 0.1) return noX ? 10 : "X";
+  if (relativeDistance <= 0.2) return noX ? 9 : 10;
+  if (relativeDistance <= 0.4) return 9;
+  if (relativeDistance <= 0.6) return 8;
+  if (relativeDistance <= 0.8) return 7;
+  if (relativeDistance <= 1.0) return 6;
+
+  return 0; // 脱靶
+};
+
+export const calcTripleBowTarget = (
+  x,
+  y,
+  targetWidth,
+  targetHeight,
+  noX = false
+) => {
+  const side = targetWidth * 0.325;
+  if (x / targetWidth >= 0.337 && x / targetWidth <= 0.663) {
+    if (y / targetHeight <= 0.325) {
+      return calcHalfBowTarget(x - targetWidth * 0.337, y, side, noX);
+    } else if (y / targetHeight >= 0.335 && y / targetHeight <= 0.662) {
+      return calcHalfBowTarget(
+        x - targetWidth * 0.337,
+        y - targetHeight * 0.335,
+        side,
+        noX
+      );
+    } else if (y / targetHeight >= 0.674) {
+      return calcHalfBowTarget(
+        x - targetWidth * 0.337,
+        y - targetHeight * 0.674,
+        side,
+        noX
+      );
+    }
+  }
+  return 0;
+};
+
+export const calcPinBowTarget = (
+  x,
+  y,
+  targetWidth,
+  targetHeight,
+  noX = false
+) => {
+  const side = targetWidth * 0.48;
+  if (
+    x / targetWidth >= 0.26 &&
+    x / targetWidth <= 0.74 &&
+    y / targetHeight <= 0.48
+  ) {
+    return calcHalfBowTarget(x - targetWidth * 0.26, y, side, noX);
+  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.456) {
+    return calcHalfBowTarget(x, y - targetHeight * 0.456, side, noX);
+  } else if (x / targetHeight >= 0.52 && y / targetHeight >= 0.456) {
+    return calcHalfBowTarget(
+      x - targetWidth * 0.52,
+      y - targetHeight * 0.456,
+      side,
+      noX
+    );
+  }
+  return 0;
+};
+
+export const calcRing = (bowtargetId, x, y, targetWidth, targetHeight) => {
+  if (bowtargetId < 4) {
+    return calcNormalBowTarget(x, y, targetWidth, targetHeight);
+  } else if (bowtargetId < 7) {
+    return calcHalfBowTarget(x, y, targetWidth);
+  } else if (bowtargetId === 7) {
+    return calcTripleBowTarget(x, y, targetWidth, targetHeight);
+  } else if (bowtargetId === 8) {
+    return calcPinBowTarget(x, y, targetWidth, targetHeight);
+  } else if (bowtargetId === 9) {
+    return calcTripleBowTarget(x, y, targetWidth, targetHeight, true);
+  } else if (bowtargetId === 10) {
+    return calcPinBowTarget(x, y, targetWidth, targetHeight, true);
+  }
+  return 0;
+};