|
|
@@ -0,0 +1,114 @@
|
|
|
+<template>
|
|
|
+ <CommonTopBanner title="乡源人数">
|
|
|
+ <FlexCol gap="gap.lg" padding="space.md">
|
|
|
+ <Touchable
|
|
|
+ v-for="(item, index) in villageUserRankListLoader.content.value"
|
|
|
+ :key="item.id"
|
|
|
+ direction="column"
|
|
|
+ @click="goDetails(item)"
|
|
|
+ >
|
|
|
+ <BackgroundBox
|
|
|
+ backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDark.png"
|
|
|
+ :backgroundCutBorder="[6,6,6,6]"
|
|
|
+ :backgroundCutBorderSize="[10,10,10,10]"
|
|
|
+ :padding="[25,25]"
|
|
|
+ direction="row"
|
|
|
+ justify="space-between"
|
|
|
+ align="center"
|
|
|
+ gap="gap.md"
|
|
|
+
|
|
|
+ >
|
|
|
+ <FlexRow align="center" gap="gap.lg">
|
|
|
+ <BackgroundBox
|
|
|
+ backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxOrder.png"
|
|
|
+ width="120rpx"
|
|
|
+ height="90rpx"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <Text :text="index + 4" fontConfig="h5" color="white" />
|
|
|
+ </BackgroundBox>
|
|
|
+ <Avatar
|
|
|
+ :url="item.image"
|
|
|
+ defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png"
|
|
|
+ :size="70"
|
|
|
+ mode="aspectFill"
|
|
|
+ radius="radius.md"
|
|
|
+ />
|
|
|
+ <Text :text="item.title" fontConfig="contentText" />
|
|
|
+ </FlexRow>
|
|
|
+ <FlexRow center gap="gap.md">
|
|
|
+ <Tag v-if="item.isAdmin" text="管理员" size="small" />
|
|
|
+ <BackgroundBox
|
|
|
+ backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
|
|
|
+ :backgroundCutBorder="[10,10,10,10]"
|
|
|
+ :backgroundCutBorderSize="[10,10,10,10]"
|
|
|
+ :padding="[15,10]"
|
|
|
+ center
|
|
|
+ direction="row"
|
|
|
+ gap="gap.md"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <Image src="https://xy.wenlvti.net/app_static/images/village/IconFruit.png" width="30rpx" height="30rpx" mode="aspectFill" />
|
|
|
+ <Text :text="item.score" fontConfig="contentText" />
|
|
|
+ </BackgroundBox>
|
|
|
+ </FlexRow>
|
|
|
+ </BackgroundBox>
|
|
|
+ </Touchable>
|
|
|
+ </FlexCol>
|
|
|
+ </CommonTopBanner>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
|
|
|
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
|
|
|
+import { ArrayUtils } from '@imengyu/imengyu-utils';
|
|
|
+import { navTo } from '@/components/utils/PageAction';
|
|
|
+import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
+import LightVillageApi from '@/api/light/LightVillageApi';
|
|
|
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
|
|
|
+import Text from '@/components/basic/Text.vue';
|
|
|
+import Avatar from '@/components/display/Avatar.vue';
|
|
|
+import Tag from '@/components/display/Tag.vue';
|
|
|
+import Image from '@/components/basic/Image.vue';
|
|
|
+import FlexRow from '@/components/layout/FlexRow.vue';
|
|
|
+import Touchable from '@/components/feedback/Touchable.vue';
|
|
|
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
|
|
|
+
|
|
|
+const { querys } = useLoadQuerys({
|
|
|
+ regionId: 0,
|
|
|
+ villageId: 0,
|
|
|
+}, () => {
|
|
|
+ villageUserRankListLoader.reload();
|
|
|
+});
|
|
|
+
|
|
|
+const villageUserRankListLoader = useSimpleDataLoader(async () => {
|
|
|
+ //TODO: 获取指定村落乡源人列表
|
|
|
+ const res = (await LightVillageApi.getVolunteerRankList({
|
|
|
+ region_id: querys.value.regionId || undefined,
|
|
|
+ village_id: querys.value.villageId || undefined,
|
|
|
+ num: 30,
|
|
|
+ }))
|
|
|
+ .map((item, i) => ({
|
|
|
+ id: item.id,
|
|
|
+ image: item.image ?? '',
|
|
|
+ title: item.name,
|
|
|
+ rank: i + 1,
|
|
|
+ score: item.points,
|
|
|
+ isAdmin: item.type === 'admin',
|
|
|
+ }));
|
|
|
+ return res
|
|
|
+});
|
|
|
+
|
|
|
+function goDetails(item: {
|
|
|
+ id: number;
|
|
|
+ image: string;
|
|
|
+ title: string;
|
|
|
+ rank: number;
|
|
|
+ score: number;
|
|
|
+}) {
|
|
|
+ console.log(item);
|
|
|
+
|
|
|
+ navTo('../volunteer/detail', { id: item.id });
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|