计分本修改

2025-10-11 09:06:56 +08:00
parent fb0cf62ca0
commit 5bf3bbccdb
6 changed files with 155 additions and 30 deletions
--- a/src/components/BowTargetEdit.vue
+++ b/src/components/BowTargetEdit.vue
@@ -19,6 +19,10 @@ const props = defineProps({
    type: Function,
    default: null,
  },
+  editMode: {
+    type: Boolean,
+    default: true,
+  },
 });

 const rect = ref({});
@@ -150,6 +154,7 @@ onMounted(async () => {

 <template>
  <view
+    :style="{ overflowY: editMode ? 'auto' : 'hidden' }"
    class="container"
    @tap="onClick"
    @touchmove="onDrag"
@@ -231,7 +236,6 @@ onMounted(async () => {
  width: 100vw;
  height: 100vw;
  overflow-x: hidden;
-  overflow-y: auto;
 }
 .container::-webkit-scrollbar {
  width: 0;
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -273,6 +273,6 @@ onBeforeUnmount(() => {
  font-size: 30rpx;
  color: #333333;
  margin: 0 20rpx;
-  max-width: 280rpx;
+  max-width: 300rpx;
 }
 </style>
--- a/src/components/RingBarChart.vue
+++ b/src/components/RingBarChart.vue
@@ -6,6 +6,10 @@ const props = defineProps({
    type: Object,
    default: () => ({}),
  },
+  total: {
+    type: Number,
+    default: 0,
+  },
 });

 const barColor = (rate) => {
@@ -15,20 +19,16 @@ const barColor = (rate) => {
 };

 const bars = computed(() => {
-  let data = Object.values(props.data);
-  if (!data.length) data = new Array(11).fill({ ring: 0, rate: 0 });
-  const newList = data.map((item, index) => {
+  const newList = new Array(12).fill({ ring: 0, rate: 0 }).map((_, index) => {
    let ring = index;
    if (ring === 11) ring = "M";
    if (ring === 0) ring = "X";
    return {
      ring: ring,
-      rate: item,
+      rate: props.data[index] || 0,
    };
  });
-  if (newList.length >= 12) {
-    [newList[0], newList[11]] = [newList[11], newList[0]];
-  }
+  [newList[0], newList[11]] = [newList[11], newList[0]];
  return newList.reverse();
 });

@@ -44,12 +44,12 @@ const ringText = (ring) => {
    <view>
      <view v-for="(b, index) in bars" :key="index">
        <text v-if="b && b.rate">
-          {{ Number((b.rate * 100).toFixed(1)) }}%
+          {{ total === 0 ? `${Number((b.rate * 100).toFixed(1))}%` : b.rate }}
        </text>
        <view
          :style="{
-            background: barColor(b.rate),
-            height: b.rate * 300 + 'rpx',
+            background: barColor(total === 0 ? b.rate : b.rate / total),
+            height: (total === 0 ? b.rate : b.rate / total) * 300 + 'rpx',
          }"
        >
        </view>
@@ -64,6 +64,12 @@ const ringText = (ring) => {
 </template>

 <style scoped>
+.container {
+  min-height: 150rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
 .container > view {
  padding: 0 10rpx;
 }
@@ -79,10 +85,11 @@ const ringText = (ring) => {
  align-items: center;
  font-size: 18rpx;
  color: #333;
+  width: 5vw;
 }
 .container > view:first-child > view > view {
+  width: 100%;
  transition: all 0.3s ease;
-  width: 5vw;
  height: 0;
 }
 .container > view:last-child {
--- a/src/pages/point-book-detail.vue
+++ b/src/pages/point-book-detail.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } 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 SButton from "@/components/SButton.vue";
+import RingBarChart from "@/components/RingBarChart.vue";

 import { getPointBookDetailAPI } from "@/apis";

@@ -13,7 +14,7 @@ const showTip = ref(false);
 const showTip2 = ref(false);
 const groups = ref([]);
 const data = ref({});
-const targetId = ref("");
+const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);

@@ -41,9 +42,18 @@ const goBack = () => {
  });
 };

+const ringRates = computed(() => {
+  const rates = new Array(12).fill(0);
+  arrows.value.forEach((item) => {
+    if (item.ring === -1) rates[11] += 1;
+    else rates[item.ring] += 1;
+  });
+  return rates.map((r) => r / arrows.value.length);
+});
+
 onLoad(async (options) => {
  if (options.id) {
-    const result = await getPointBookDetailAPI(options.id);
+    const result = await getPointBookDetailAPI(options.id || 164);
    const config = uni.getStorageSync("point-book-config");
    config.targetOption.some((item) => {
      if (item.id === result.targetType) {
@@ -54,7 +64,7 @@ onLoad(async (options) => {
    if (result.groups) {
      groups.value = result.groups;
      data.value = result.groups[0];
-      arrows.value = result.groups[0].list.filter((item) => item.x && item.y);
+      arrows.value = result.groups[0].list;
    }
  }
 });
@@ -134,8 +144,56 @@ onLoad(async (options) => {
          />
        </button>
      </view>
-      <BowTargetEdit :id="targetId" :src="targetSrc" :arrows="arrows" />
-      <view :style="{ marginTop: '20px' }">
+      <BowTargetEdit
+        :id="targetId"
+        :src="targetSrc"
+        :arrows="arrows.filter((item) => item.x && item.y)"
+        :editMode="false"
+      />
+      <view class="title-bar">
+        <view />
+        <text>环值分布</text>
+      </view>
+      <view :style="{ padding: '0 30rpx' }">
+        <RingBarChart :data="ringRates" />
+      </view>
+      <view class="title-bar" :style="{ marginTop: '30rpx' }">
+        <view />
+        <text>{{
+          selectedIndex === 0 ? "每组环数" : `第${selectedIndex}组环数`
+        }}</text>
+      </view>
+      <view class="ring-text-groups">
+        <view v-for="(item, index) in groups" :key="index">
+          <text v-if="selectedIndex === 0 && index !== 0">{{
+            `第${index}组`
+          }}</text>
+          <view
+            v-if="
+              (selectedIndex === 0 && index !== 0) ||
+              (selectedIndex !== 0 && index === selectedIndex)
+            "
+          >
+            <text
+              v-for="(arrow, index2) in item.list"
+              :key="index2"
+              :style="{
+                color:
+                  arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
+              }"
+            >
+              {{
+                arrow.ring === 0
+                  ? "X"
+                  : arrow.ring === -1
+                  ? "M"
+                  : arrow.ring + "环"
+              }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view :style="{ marginBottom: '40rpx' }">
        <SButton :onClick="goBack" :rounded="50">关闭</SButton>
      </view>
      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
@@ -178,8 +236,7 @@ onLoad(async (options) => {
  border-radius: 10px;
  background-color: #fff;
  width: 24vw;
-  height: 13vw;
-  line-height: 13vw;
+  height: 90rpx;
  text-align: center;
  margin: 5px;
  margin-top: 0;
@@ -188,6 +245,7 @@ onLoad(async (options) => {
  position: relative;
 }
 .tab-bar > view > text {
+  line-height: 90rpx;
  transition: all 0.2s ease;
 }
 .tab-bar > view > image {
@@ -206,21 +264,24 @@ onLoad(async (options) => {
 .detail-data > view {
  border-radius: 10px;
  background-color: #fff;
-  margin-bottom: 10px;
-  padding: 12px;
+  margin-bottom: 20rpx;
+  padding: 18rpx 24rpx;
 }
 .detail-data > view > view {
  font-size: 13px;
  color: #999;
-  margin-bottom: 8px;
+  margin-bottom: 12rpx;
+}
+.detail-data > view > view > text {
+  word-break: keep-all;
 }
 .detail-data > view > text {
  font-weight: 500;
  color: #000;
 }
 .question-mark {
-  width: 15px;
-  height: 15px;
+  width: 28rpx;
+  height: 28rpx;
  margin-left: 3px;
 }
 .title-bar {
@@ -231,15 +292,15 @@ onLoad(async (options) => {
  color: #999;
 }
 .title-bar > view:first-child {
-  width: 5px;
-  height: 15px;
+  width: 8rpx;
+  height: 28rpx;
  border-radius: 10px;
  background-color: #fed847;
  margin-right: 7px;
  margin-left: 15px;
 }
-.title-bar > text {
-  margin-bottom: 2px;
+.title-bar > button {
+  height: 34rpx;
 }
 .tip-content {
  width: 100%;
@@ -258,4 +319,34 @@ onLoad(async (options) => {
  margin-top: 20px;
  opacity: 0.8;
 }
+.ring-text-groups {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx;
+  padding-top: 30rpx;
+  font-size: 24rpx;
+  color: #999999;
+}
+.ring-text-groups > view {
+  display: flex;
+  justify-content: center;
+}
+.ring-text-groups > view > text {
+  width: 82rpx;
+  text-align: center;
+  font-size: 27rpx;
+}
+.ring-text-groups > view > view {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(6, auto);
+  grid-gap: 10rpx;
+  margin-bottom: 30rpx;
+  margin-left: 20rpx;
+}
+.ring-text-groups > view > view > text {
+  width: 60rpx;
+  text-align: center;
+  margin-bottom: 10rpx;
+}
 </style>
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -31,6 +31,7 @@ const isIOS = computed(() => {
  return systemInfo.osName === "ios";
 });

+const loadImage = ref(false);
 const showModal = ref(false);
 const showTip = ref(false);
 const data = ref({
@@ -75,6 +76,7 @@ const loadData = async () => {
  else if (result2.checkInCount >= 5) hot = 3;
  else if (result2.checkInCount === 7) hot = 4;
  uni.$emit("update-hot", hot);
+  loadImage.value = true;
  const generateHeatmapAsync = async () => {
    const weekArrows = result2.weekArrows
      .filter((item) => item.x && item.y)
@@ -108,9 +110,11 @@ const loadData = async () => {
        }
      );
      heatMapImageSrc.value = finalPath;
+      loadImage.value = false;
      console.log("热力图图片地址:", finalPath);
    } catch (error) {
      console.error("生成热力图图片失败:", error);
+      loadImage.value = false;
    }
  };

@@ -282,6 +286,9 @@ onShareTimeline(() => {
          :src="heatMapImageSrc"
          mode="aspectFill"
        />
+        <view v-if="loadImage" class="load-image">
+          <text>生成中...</text>
+        </view>
        <canvas
          id="heatMapCanvas"
          canvas-id="heatMapCanvas"
@@ -445,6 +452,17 @@ onShareTimeline(() => {
  top: 0;
  left: 0;
 }
+.load-image {
+  position: absolute;
+  width: 160rpx;
+  top: calc(50% - 65rpx);
+  left: calc(50% - 75rpx);
+  color: #525252;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .reward {
  width: 100%;
  display: flex;
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -121,6 +121,9 @@ onShow(async () => {
  rankData.value = result;
  handleSelect(selectedIndex.value);
  seasonData.value = result.seasonList;
+  if (seasonData.value[0]) {
+    seasonName.value = seasonData.value[0].seasonName;
+  }
  updateData();
  showSeasonList.value = false;
 });
@@ -596,11 +599,13 @@ onShow(async () => {
  top: -44rpx;
  right: -30rpx;
  letter-spacing: 2px;
+  z-index: 10;
 }
 .season-list > view {
  display: flex;
  align-items: center;
  padding: 10px 20px;
+  word-break: keep-all;
 }
 .season-list > view > image {
  width: 12px;