计分本添加排行榜

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>