153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import Container from "@/components/Container.vue";
|
|
import PointRankItem from "@/components/PointRankItem.vue";
|
|
import { getPointBookRankListAPI } from "@/apis";
|
|
import { capsuleHeight } from "@/util";
|
|
import { wxShare, debounce } 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 shareImage = async () => {
|
|
if (!mine.value.id) return;
|
|
await sharePointData("shareCanvas", mine.value);
|
|
await wxShare("shareCanvas");
|
|
};
|
|
|
|
onMounted(async () => {
|
|
const result = await getPointBookRankListAPI();
|
|
mine.value = result.my;
|
|
list.value = result.list;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container :bgType="5" bgColor="#F5F5F5" :whiteBackArrow="false">
|
|
<view class="top-part">
|
|
<view>
|
|
<image src="../static/point-champion.png" mode="widthFix" />
|
|
<image
|
|
:src="list[0] && list[0].avatar ? list[0].avatar : ''"
|
|
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 && mine"
|
|
>
|
|
<PointRankItem :data="mine" :borderWidth="0" />
|
|
</view>
|
|
<view class="data-list">
|
|
<PointRankItem v-for="item in list" :key="item.id" :data="item" />
|
|
</view>
|
|
<view :style="{ height: '30rpx' }"></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>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.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>
|