laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页接入数据

Browse Source
This commit is contained in:
kron
2026-01-14 15:02:54 +08:00
parent d25181e5f9
commit b9e7a5a758
3 changed files with 78 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/MyRank.vue
View File

@@ -1,19 +1,41 @@
<script setup>
import { ref, onMounted } from "vue";
import { ref, watch } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());
const store = useStore();
const { getLvlName } = store;
const { config, user } = storeToRefs(store);
const props = defineProps({});
onMounted(async () => {});
const nextLvlPoints = ref(0);
watch(
() => [config.value, user.value],
([n_config, n_user]) => {
const rankInfos = n_config.randInfos || [];
if (n_user.id && rankInfos.length) {
rankInfos.some((r, index) => {
if (r.upgrade_scores && r.upgrade_scores > n_user.scores) {
nextLvlPoints.value = r.upgrade_scores;
return true;
}
return false;
});
}
},
{
immediate: true,
deep: true,
}
);
</script>
<template>
<view class="my-rank">
<view>
<image src="../static/user-icon.png" mode="widthFix" />
<image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
<view>
<text class="score color1">积分榜：分</text>
<text class="score color2">Mvp榜：次</text>
@@ -25,24 +47,30 @@ onMounted(async () => {});
<image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
</view>
<view>
<text>lv50</text>
<text>lv{{ user.lvl }}</text>
<view>
<view :style="{ width: '50%' }"></view>
<text>12000/120000</text>
<view
:style="{
width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
}"
></view>
<text>{{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}</text>
</view>
</view>
<view>
<view>
<text>段位</text>
<text>段位</text>
<text>{{ user.rankLvl ? getLvlName(user.rankLvl) : "暂无" }}</text>
</view>
<view>
<text>平均环数</text>
<text>平均环数</text>
<text>{{ user.avg_ring ? user.avg_ring + "环" : "暂无" }}</text>
</view>
<view>
<text>胜率</text>
<text>胜率</text>
<text>{{
user.avg_win ? Number((user.avg_win * 100).toFixed(2)) + "%" : "暂无"
}}</text>
</view>
</view>
</view>

68
src/components/TopRank.vue
View File

@@ -1,7 +1,12 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({});
const props = defineProps({
data: {
type: Array,
default: () => [],
},
});
const titles = ["积分榜", "MVP榜", "十环榜"];
const selected = ref(0);
@@ -42,66 +47,25 @@ onBeforeUnmount(() => {
@change="(e) => (selected = e.detail.current)"
:style="{ width: '100%' }"
>
<swiper-item>
<view class="rank-item">
<swiper-item v-for="(list, index1) in data" :key="index1">
<view v-for="(item, index2) in list" :key="index2" class="rank-item">
<view>
<text>1</text>
<image src="../static/user-icon.png" mode="widthFix" />
<text>{{ index2 + 1 }}</text>
<image
:src="item.avatar || '../static/user-icon-dark.png'"
mode="widthFix"
/>
</view>
<view>
<text>某某某</text>
<text>积分：300</text>
</view>
</view>
<view class="rank-item">
<view>
<text>1</text>
<image src="../static/user-icon.png" mode="widthFix" />
</view>
<view>
<text>某某某</text>
<text>积分：300</text>
</view>
</view>
<view class="rank-item">
<view>
<text>1</text>
<image src="../static/user-icon.png" mode="widthFix" />
</view>
<view>
<text>某某某</text>
<text>积分：300</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="rank-item">
<view>
<text>1</text>
<image src="../static/user-icon.png" mode="widthFix" />
</view>
<view>
<text>某某某</text>
<text>积分：300</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="rank-item">
<view>
<text>1</text>
<image src="../static/user-icon.png" mode="widthFix" />
</view>
<view>
<text>某某某</text>
<text>积分：300</text>
<text>{{ item.name }}</text>
<text>积分：{{ item.totalScore }}</text>
</view>
</view>
</swiper-item>
</swiper>
<view>
<view
v-for="(item, index) in titles"
v-for="(item, index) in data"
:key="index"
:style="{
width: selected === index ? '20rpx' : '6rpx',