shoot-miniprograms/src/pages/point-book-rank.vue

<script setup>
import { ref, onMounted } from "vue";
import ScrollList from "@/components/ScrollList.vue";
import PointRankItem from "@/components/PointRankItem.vue";
import { getPointBookRankListAPI } from "@/apis";
import { capsuleHeight } from "@/util";
import { wxShare } from "@/util";
import { sharePointData } from "@/canvas";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());

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;
  loading.value = true;
  await sharePointData("shareCanvas", mine.value);
  await wxShare("shareCanvas");
  loading.value = false;
};
</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>整整消耗了{{ Math.round(list[0].weekArrow * 1.6) }}大卡!</text>
      </block>
    </view>
    <view class="rank-title-bar">
      <text>排行</text>
      <text>用户</text>
      <text>本周箭数</text>
      <text>消耗</text>
    </view>
    <view class="data-list" :style="{ marginBottom: '20rpx' }" v-if="user.id">
      <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>
    <button
      hover-class="none"
      class="share-btn"
      @click="shareImage"
      v-if="user.id"
    >
      <image src="../static/share-icon.png" mode="widthFix" />
    </button>
    <canvas
      class="share-canvas"
      id="shareCanvas"
      type="2d"
      style="width: 375px; height: 460px"
    ></canvas>
  </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: calc(100% - 80rpx);
  line-height: 80rpx;
  padding: 0 40rpx;
}
.rank-title-bar > text:nth-child(1) {
  width: 60rpx;
}
.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: 24%;
}
.data-list {
  background: $uni-white;
  border-radius: 25rpx;
  margin: 0 25rpx;
}
.share-btn {
  position: fixed;
  right: 25rpx;
  bottom: 25rpx;
}
.share-btn > image {
  width: 116rpx;
  height: 116rpx;
}
</style>