数据显示修改

src/apis.js

@@ -231,9 +231,10 @@ export const destroyRoomAPI = (roomNumber) => {
   });
 };
 
-export const exitRoomAPI = (number) => {
+export const exitRoomAPI = (number, userId) => {
   return request("POST", "/user/room/exitRoom", {
     number,
+    userId,
   });
 };
 
@@ -525,10 +526,10 @@ export const getPhoneNumberAPI = (data) => {
   return request("POST", "/index/getPhone", data);
 };
 
-export const getPointBookRankListAPI = (page = 1, pageSize = 10) => {
+export const getPointBookRankListAPI = (page = 1) => {
   return request(
     "GET",
-    `/user/score/sheet/week/shoot/rank/list?pageNum=${page}&pageSize=${pageSize}`
+    `/user/score/sheet/week/shoot/rank/list?pageNum=${page}&pageSize=100`
   );
 };
 

src/components/AppBackground.vue

@@ -49,6 +49,12 @@ onMounted(() => {
       src="../static/app-bg5.png"
       mode="widthFix"
     />
+    <image
+      class="bg-image"
+      v-if="type === 5"
+      src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
+      mode="widthFix"
+    />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>

src/pages/point-book-rank.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import ScrollList from "@/components/ScrollList.vue";
+import Container from "@/components/Container.vue";
 import PointRankItem from "@/components/PointRankItem.vue";
 import { getPointBookRankListAPI } from "@/apis";
 import { capsuleHeight } from "@/util";
-import { wxShare } from "@/util";
+import { wxShare, debounce } from "@/util";
 import { sharePointData } from "@/canvas";
 
 import useStore from "@/store";
@@ -15,46 +15,22 @@ const list = ref([]);
 const mine = ref({
   averageRing: 0,
 });
-const loading = ref(false);
-
-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;
-};
 
 const shareImage = async () => {
-  if (loading.value || !mine.value.id) return;
+  if (!mine.value.id) return;
-  loading.value = true;
   await sharePointData("shareCanvas", mine.value);
   await wxShare("shareCanvas");
-  loading.value = false;
 };
+
+onMounted(async () => {
+  const result = await getPointBookRankListAPI();
+  mine.value = result.my;
+  list.value = result.list;
+});
 </script>
 
 <template>
-  <scroll-view scroll-y="false" class="container">
+  <Container :bgType="5" bgColor="#F5F5F5" :whiteBackArrow="false">
-    <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" />
@@ -81,18 +57,10 @@ const shareImage = async () => {
     >
       <PointRankItem :data="mine" :borderWidth="0" />
     </view>
-    <view
+    <view class="data-list">
-      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>
+    <view :style="{ height: '30rpx' }"></view>
     <button
       hover-class="none"
       class="share-btn"
@@ -107,7 +75,7 @@ const shareImage = async () => {
       type="2d"
       style="width: 375px; height: 460px"
     ></canvas>
-  </scroll-view>
+  </Container>
 </template>
 
 <style scoped lang="scss">
@@ -117,27 +85,6 @@ const shareImage = async () => {
   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;