计分本添加排行榜

src/apis.js

@@ -525,3 +525,24 @@ export const removePointRecord = async (id) => {
 export const getPhoneNumberAPI = (data) => {
   return request("POST", "/index/getPhone", data);
 };
+
+export const getPointBookRankListAPI = (page = 1, pageSize = 10) => {
+  return request(
+    "GET",
+    `/user/score/sheet/week/shoot/rank/list?pageNum=${page}&pageSize=${pageSize}`
+  );
+};
+
+export const clickLikeAPI = (userId, ifLike) => {
+  return request("POST", "/user/score/sheet/week/shoot/rank/like", {
+    userId,
+    ifLike,
+  });
+};
+
+export const getMyLikeList = (page = 1, pageSize = 10) => {
+  return request(
+    "GET",
+    `/user/score/sheet/week/shoot/rank/like/list?pageNum=${page}&pageSize=${pageSize}`
+  );
+};

src/components/PointRankItem.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { ref, watch } from "vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user, device, online } = storeToRefs(useStore());
+
+import { clickLikeAPI } from "@/apis";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  borderWidth: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const like = ref(props.data.ifLike);
+const likeCount = ref(props.data.likeTotal || 0);
+
+watch(
+  () => props.data,
+  (newVal) => {
+    like.value = newVal.ifLike;
+    likeCount.value = newVal.likeTotal || 0;
+  }
+);
+
+const onClick = async () => {
+  if (user.value.id === props.data.id) {
+    return uni.navigateTo({
+      url: "/pages/my-like-list",
+    });
+  }
+  like.value = !like.value;
+  await clickLikeAPI(props.data.id, like.value);
+  if (like.value) likeCount.value++;
+  else likeCount.value--;
+};
+</script>
+
+<template>
+  <view class="rank-item" :style="{ borderWidth: borderWidth + 'rpx' }">
+    <image v-if="data.rank === 1" src="../static/point-no1.png" />
+    <image v-else-if="data.rank === 2" src="../static/point-no2.png" />
+    <image v-else-if="data.rank === 3" src="../static/point-no3.png" />
+    <text v-else>{{ data.rank || "" }}</text>
+    <view>
+      <Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
+      <view>
+        <text>{{ data.name }}</text>
+        <view>
+          <text>{{ data.totalDay }}天</text>
+          <view />
+          <text>平均{{ Number(data.averageRing.toFixed(1)) }}环</text>
+        </view>
+      </view>
+    </view>
+    <view class="item-info">
+      <text>{{ data.weekArrow }}</text>
+      <text>箭</text>
+    </view>
+    <view class="item-info" :style="{ justifyContent: 'flex-end' }">
+      <text>{{ Math.round(data.weekArrow * 1.6) }}</text>
+      <text>千卡</text>
+    </view>
+    <button hover-class="none" @click="onClick">
+      <text>{{ likeCount }}</text>
+      <image
+        :src="`../static/like-${like ? 'on' : 'off'}.png`"
+        mode="widthFix"
+      />
+    </button>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.rank-item {
+  margin: 0 20rpx;
+  border-bottom: $uni-border;
+  display: flex;
+  align-items: center;
+  background: $uni-white;
+  height: 120rpx;
+}
+.rank-item > text:nth-child(1) {
+  width: 52rpx;
+  font-size: 30rpx;
+  color: #333333;
+  text-align: center;
+}
+.rank-item > image:nth-child(1) {
+  width: 52rpx;
+  height: 56rpx;
+}
+.rank-item > view:nth-child(2) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-left: 20rpx;
+}
+.rank-item > view:nth-child(2) > view:last-child {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  font-size: 22rpx;
+  color: #aaaaaa;
+  margin-left: 20rpx;
+}
+.rank-item > view:nth-child(2) > view:last-child > text:first-child {
+  font-size: 26rpx;
+  color: #333333;
+  margin-bottom: 5rpx;
+}
+.rank-item > view:nth-child(2) > view:last-child > view {
+  display: flex;
+  align-items: center;
+}
+.rank-item > view:nth-child(2) > view:last-child > view > view {
+  height: 20rpx;
+  width: 1rpx;
+  margin: 0 10rpx;
+  background-color: #b3b3b3;
+}
+.item-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: #777777;
+  width: 18%;
+}
+.item-info > text:first-child {
+  font-size: 26rpx;
+  color: #333333;
+  margin-right: 5rpx;
+}
+.rank-item > button:nth-child(5) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 22rpx;
+  color: #777777;
+  margin-left: 20rpx;
+  margin-right: 10rpx;
+}
+.rank-item > button:nth-child(5) > image {
+  width: 24rpx;
+  height: 22rpx;
+  margin-top: 10rpx;
+}
+</style>

src/components/RewardUs.vue

@@ -148,7 +148,7 @@ onMounted(async () => {
 .container > image:first-child {
   width: 200rpx;
   position: absolute;
-  top: -114rpx;
+  top: -112rpx;
 }
 .container > text:nth-child(2) {
   font-weight: 500;

src/pages.json

@@ -3,15 +3,21 @@
     {
       "path": "pages/index"
     },
+    {
+      "path": "pages/point-book"
+    },
+    {
+      "path": "pages/point-book-rank"
+    },
+    {
+      "path": "pages/my-like-list"
+    },
     {
       "path": "pages/audio-test"
     },
     {
       "path": "pages/calibration"
     },
-    {
-      "path": "pages/point-book"
-    },
     {
       "path": "pages/about-us"
     },

src/pages/my-like-list.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
+import ScrollList from "@/components/ScrollList.vue";
+import { getMyLikeList } from "@/apis";
+
+const list = ref([]);
+
+const onListLoading = async (page) => {
+  const result = await getMyLikeList(page);
+  if (page === 1) list.value = result.list;
+  else list.value = list.value.concat(result.list);
+  return result.list.length;
+};
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="赞我的朋友"
+  >
+    <view class="container">
+      <ScrollList :onLoading="onListLoading">
+        <block v-for="item in list" :key="item.id">
+          <view class="like-item">
+            <Avatar :src="item.avatar" mode="widthFix" />
+            <text>{{ item.name }}</text>
+          </view>
+          <view class="like-bottom-line" />
+        </block>
+      </ScrollList>
+    </view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+}
+.like-item {
+  background: $uni-white;
+  height: 140rpx;
+  width: 100%;
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #5c6582;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 25rpx;
+}
+.like-item > text {
+  margin-left: 25rpx;
+}
+.like-bottom-line {
+  width: calc(100% - 50rpx);
+  margin: 0 25rpx;
+  height: 1rpx;
+  background: #e5e5e5;
+}
+</style>

src/pages/point-book-rank.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref } from "vue";
+import ScrollList from "@/components/ScrollList.vue";
+import PointRankItem from "@/components/PointRankItem.vue";
+import { getPointBookRankListAPI } from "@/apis";
+import { capsuleHeight } from "@/util";
+
+const list = ref([]);
+const mine = ref({
+  averageRing: 0,
+});
+
+const onLoad = async (page) => {
+  const result = await getPointBookRankListAPI(page);
+  mine.value = result.my;
+  if (page === 1) list.value = result.list;
+  else list.value = list.value.concat(result.list);
+  return result.list.length;
+};
+</script>
+
+<template>
+  <scroll-view scroll-y="false" class="container">
+    <image
+      class="page-bg"
+      src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
+      mode="widthFix"
+    />
+    <view
+      class="header"
+      :style="{
+        paddingTop: capsuleHeight + 'px',
+      }"
+    >
+      <navigator open-type="navigateBack">
+        <image
+          class="header-back"
+          src="../static/back-black.png"
+          mode="widthFix"
+        />
+      </navigator>
+    </view>
+    <view class="top-part">
+      <view>
+        <image src="../static/point-champion.png" mode="widthFix" />
+        <image
+          :src="
+            list[0] && list[0].avatar
+              ? list[0].avatar
+              : '../static/user-icon.png'
+          "
+          mode="widthFix"
+        />
+      </view>
+      <block v-if="list[0]">
+        <text>{{ list[0].name }}占领了封面</text>
+        <text
+          >整整消耗了{{
+            Number(list[0].weekArrow * (1.6).toFixed(0))
+          }}大卡!</text
+        >
+      </block>
+    </view>
+    <view class="rank-title-bar">
+      <text>排行</text>
+      <text>用户</text>
+      <text>本周箭数</text>
+      <text>消耗</text>
+    </view>
+    <view class="data-list" :style="{ marginBottom: '20rpx' }">
+      <PointRankItem :data="mine" :borderWidth="0" />
+    </view>
+    <view
+      class="data-list"
+      :style="{
+        height: `calc(100vh - ${
+          capsuleHeight + 50
+        }px - 450rpx - 80rpx - 140rpx)`,
+      }"
+    >
+      <ScrollList :onLoading="onLoad">
+        <PointRankItem v-for="item in list" :key="item.id" :data="item" />
+      </ScrollList>
+    </view>
+  </scroll-view>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.page-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+.header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+.header-back {
+  width: 22px;
+  height: 22px;
+  margin: 0px 15px;
+  margin-top: 5px;
+  position: relative;
+}
+.top-part {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 26rpx;
+  color: #333333;
+  height: 450rpx;
+}
+.top-part > view:first-child {
+  width: 310rpx;
+  height: 310rpx;
+  position: relative;
+}
+.top-part > view:first-child > image:first-child {
+  width: 100%;
+}
+.top-part > view:first-child > image:nth-child(2) {
+  position: absolute;
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  top: calc(50% - 70rpx);
+  left: calc(50% - 70rpx);
+}
+.top-part > text {
+  margin-bottom: 15rpx;
+}
+.rank-title-bar {
+  font-size: 24rpx;
+  color: #777777;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  line-height: 80rpx;
+}
+.rank-title-bar > text:nth-child(1) {
+  width: 15%;
+}
+.rank-title-bar > text:nth-child(2) {
+  flex: 1;
+}
+.rank-title-bar > text:nth-child(3) {
+  width: 18%;
+}
+.rank-title-bar > text:nth-child(4) {
+  width: 27%;
+}
+.data-list {
+  background: $uni-white;
+  border-radius: 25rpx;
+  margin: 0 25rpx;
+}
+</style>

src/pages/point-book.vue

@@ -8,13 +8,13 @@ import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 import RewardUs from "@/components/RewardUs.vue";
+import PointRankItem from "@/components/PointRankItem.vue";
 
 import {
   getHomeData,
   getPointBookConfigAPI,
-  getPointBookListAPI,
+  getPointBookRankListAPI,
   getPointBookStatisticsAPI,
-  removePointRecord,
 } from "@/apis";
 
 import { getElementRect } from "@/util";
@@ -44,14 +44,20 @@ const list = ref([]);
 const bowTargetSrc = ref("");
 const heatMapImageSrc = ref(""); // 存储热力图图片地址
 const canvasVisible = ref(false); // 控制canvas显示状态
-const removeId = ref("");
+const strength = ref(0);
 
-const toListPage = () => {
+const toRecordPage = () => {
   uni.navigateTo({
     url: "/pages/point-book-list",
   });
 };
 
+const toRankPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-rank",
+  });
+};
+
 const onSignin = () => {
   showModal.value = true;
 };
@@ -88,10 +94,14 @@ const closeHint = () => {
 };
 
 const loadData = async () => {
-  const result = await getPointBookListAPI(1);
-  list.value = result.slice(0, 3);
+  const result = await getPointBookRankListAPI(1);
+  list.value = result.list.slice(0, 3);
+  if (list.value.every((item) => item.id !== user.value.id)) {
+    list.value = [result.my, ...result.list.slice(0, 3)];
+  }
   const result2 = await getPointBookStatisticsAPI();
   data.value = result2;
+  strength.value = Math.min(10, (5 / 60) * result2.todayTotalArrow);
 
   const rect = await getElementRect(".heat-map");
   let hot = 0;
@@ -146,6 +156,10 @@ const loadData = async () => {
   generateHeatmapAsync();
 };
 
+const strengthText = computed(() => {
+  return strength === 10 ? "重度" : strength <= 6 ? "中度" : "轻度";
+});
+
 watch(
   () => user.value.id,
   (id) => {
@@ -269,33 +283,59 @@ onShareTimeline(() => {
       </view>
       <view class="statistics">
         <view>
-          <text>{{ data.todayTotalArrow || "-" }}</text>
-          <text>今日射箭(箭)</text>
+          <view class="statistics-item">
+            <text>{{ data.todayTotalArrow || "-" }}</text>
+            <text>箭</text>
+            <text>今日射箭</text>
+          </view>
+          <view class="statistics-item" :style="{ padding: '20rpx 0' }">
+            <text>{{ Math.round(data.todayTotalArrow * 1.6) || "-" }}</text>
+            <text>卡</text>
+            <text>今日消耗</text>
+          </view>
+          <view class="statistics-item">
+            <text>{{ strength || "-" }}</text>
+            <text v-show="strength" class="strength">{{ strengthText }}</text>
+            <text>运动强度</text>
+          </view>
         </view>
         <view>
-          <text>{{ data.totalArrow || "-" }}</text>
-          <text>累计射箭(箭)</text>
-        </view>
-        <view>
-          <text>{{ data.totalDay || "-" }}</text>
-          <text>已训练天数(天)</text>
-        </view>
-        <view>
-          <text>{{ data.averageRing || "-" }}</text>
-          <text>平均环数(箭)</text>
-        </view>
-        <view>
-          <text>{{
-            data.yellowRate !== undefined
-              ? Number((data.yellowRate * 100).toFixed(2)) + "%"
-              : "-"
-          }}</text>
-          <text>黄心率</text>
-        </view>
-        <view>
-          <button hover-class="none" @click="startScoring">
-            <image src="../static/start-scoring.png" mode="widthFix" />
-          </button>
+          <view :style="{ paddingBottom: '20rpx' }">
+            <view class="statistics-item">
+              <text>{{ data.totalDay || "-" }}</text>
+              <text>天</text>
+              <text>训练天数</text>
+            </view>
+            <view class="statistics-item">
+              <text>{{ data.totalArrow || "-" }}</text>
+              <text>箭</text>
+              <text>累计射箭</text>
+            </view>
+          </view>
+          <view :style="{ marginTop: '20rpx' }">
+            <view class="statistics-item">
+              <text>{{
+                data.yellowRate !== undefined
+                  ? Number((data.yellowRate * 100).toFixed(2))
+                  : "-"
+              }}</text>
+              <text>%</text>
+              <text>黄心率</text>
+            </view>
+            <view class="statistics-item">
+              <text>{{ data.averageRing || "-" }}</text>
+              <text>箭</text>
+              <text>平均环数</text>
+            </view>
+          </view>
+          <view>
+            <button hover-class="none" @click="toRecordPage" class="image-btn">
+              <image src="../static/record-btn.png" mode="widthFix" />
+            </button>
+            <button hover-class="none" @click="startScoring" class="image-btn">
+              <image src="../static/start-scoring.png" mode="widthFix" />
+            </button>
+          </view>
         </view>
       </view>
       <view class="title" :style="{ marginBottom: 0 }">
@@ -341,20 +381,22 @@ onShareTimeline(() => {
       <view class="title" v-if="user.id">
         <image src="../static/point-book-title2.png" mode="widthFix" />
       </view>
-      <block v-for="(item, index) in list" :key="item.id">
-        <PointRecord :data="item" />
-        <view
-          v-if="index < list.length - 1"
-          :style="{ height: '25rpx' }"
-        ></view>
-      </block>
+      <view class="top-list">
+        <view class="rank-title-bar">
+          <text>排行</text>
+          <text>用户</text>
+          <text>本周箭数</text>
+          <text>消耗</text>
+        </view>
+        <PointRankItem v-for="item in list" :key="item.id" :data="item" />
+      </view>
       <view
         class="see-more"
-        @click="toListPage"
+        @click="toRankPage"
         v-if="list.length"
         :style="{ marginBottom: isIOS ? '10rpx' : 0 }"
       >
-        <text>查看所有记录</text>
+        <text>查看完整榜单</text>
         <image src="../static/enter-arrow-blue.png" mode="widthFix" />
       </view>
     </view>
@@ -382,7 +424,7 @@ onShareTimeline(() => {
   </Container>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   width: calc(100% - 50rpx);
   padding: 25rpx;
@@ -395,38 +437,67 @@ onShareTimeline(() => {
   background: #fff;
   font-size: 22rpx;
   display: flex;
-  flex-wrap: wrap;
-  padding: 25rpx 0;
-  margin-bottom: 10rpx;
+  justify-content: space-between;
+  padding: 40rpx;
+  padding-left: 20rpx;
 }
 .statistics > view {
-  width: 33.33%;
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+.statistics > view:first-child {
+  align-items: center;
   justify-content: center;
+  border-right: $uni-border;
 }
-.statistics > view:nth-child(-n + 3) {
-  margin-bottom: 25rpx;
+.statistics > view:first-child > view {
+  width: 210rpx;
 }
-.statistics > view:nth-child(2),
-.statistics > view:nth-child(5) {
-  border-left: 1rpx solid #eeeeee;
-  border-right: 1rpx solid #eeeeee;
-  box-sizing: border-box;
+.statistics > view:last-child {
+  flex: 1;
 }
-.statistics > view > text {
-  text-align: center;
-  font-size: 22rpx;
-  color: #333333;
+.statistics > view:last-child > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: calc(100% - 20rpx);
+  padding-left: 20rpx;
 }
-.statistics > view > text:first-child {
+.statistics > view:last-child > view:first-child {
+  border-bottom: $uni-border;
+}
+.statistics-item {
+  width: 180rpx;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  color: $uni-text-color;
+  font-size: 24rpx;
+}
+.statistics-item > text:first-child {
   font-weight: 500;
   font-size: 40rpx;
-  margin-bottom: 10rpx;
+  margin-right: 10rpx;
 }
-.statistics > view:last-child > button > image {
-  width: 164rpx;
+.statistics-item > text:nth-child(2) {
+  line-height: 62rpx;
+}
+.statistics-item > text:nth-child(3) {
+  width: 100%;
+  text-align: center;
+}
+.image-btn {
+  width: 170rpx;
+  height: 74rpx;
+  display: flex;
+  align-items: center;
+  overflow: unset;
+  margin-top: 30rpx;
+}
+.image-btn > image {
+  width: 100%;
+  height: 100%;
 }
 .daily-signin {
   display: grid;
@@ -564,4 +635,42 @@ onShareTimeline(() => {
   margin-left: -25rpx;
   margin-bottom: -30vw;
 }
+.top-list {
+  background: $uni-white;
+  border-radius: 25rpx;
+  border: 2rpx solid #fed848;
+  overflow: hidden;
+}
+.rank-title-bar {
+  background: $uni-white;
+  font-size: 24rpx;
+  color: #777777;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  line-height: 80rpx;
+}
+.rank-title-bar > text:nth-child(1) {
+  width: 15%;
+}
+.rank-title-bar > text:nth-child(2) {
+  flex: 1;
+}
+.rank-title-bar > text:nth-child(3) {
+  width: 18%;
+}
+.rank-title-bar > text:nth-child(4) {
+  width: 27%;
+}
+.strength {
+  font-size: 22rpx;
+  color: #777777;
+  border-radius: 8rpx;
+  border: 1rpx solid #777777;
+  height: 20rpx;
+  line-height: 20rpx !important;
+  padding: 8rpx;
+  transform: translateY(8rpx);
+}
 </style>

src/pages/user.vue

@@ -4,9 +4,9 @@ import Container from "@/components/Container.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import UserItem from "@/components/UserItem.vue";
 import Avatar from "@/components/Avatar.vue";
+import { canEenter } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
-import { canEenter } from "@/util";
 const store = useStore();
 const { user, device, online } = storeToRefs(store);
 const { updateUser } = store;

src/uni.scss

@@ -28,13 +28,12 @@ $uni-text-color-placeholder: #808080;
 $uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color: #fff;
+$uni-white: #fff;
 $uni-bg-color-grey: #f8f8f8;
 $uni-bg-color-hover: #f1f1f1; // 点击状态颜色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
 
-/* 边框颜色 */
-$uni-border-color: #c8c7cc;
+$uni-border: 1rpx solid #e3e3e3;
 
 /* 尺寸变量 */
 

src/util.js

@@ -854,3 +854,5 @@ export const canEenter = (user, device, online, page = "") => {
   }
   return true;
 };
+
+export const capsuleHeight = uni.getMenuButtonBoundingClientRect().top - 9;