xiangyuan-app/src/pages/home/village/volunteer/detail.vue

<template>
  <CommonTopBanner title="志愿者详情">
    <SimplePageContentLoader :loader="infoLoader">
      <FlexCol v-if="infoLoader.content.value" gap="gap.md" padding="padding.md">
        <BackgroundBox 
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxLarge.png"
          :backgroundCutBorder="32"
          :backgroundCutBorderSize="36"
          :padding="40"
          direction="row"
          align="center"
        >
          <Avatar
            :src="infoLoader.content.value.image"
            :size="200"
          />
          <Width :width="60" />
          <FlexCol gap="gap.md">
            <H3>{{ infoLoader.content.value.name }}</H3>
            <FlexRow align="center" gap="gap.md">
              <Text text="个人等级" fontConfig="contentText" />
              <Tag :text="(infoLoader.content.value.level || 0) + '级'" />
            </FlexRow>
            <FlexRow align="center" gap="gap.md">
              <Text text="加入村社" fontConfig="contentText" />
              <Tag :text="(infoLoader.content.value.villageName as string)" />
            </FlexRow>
            <Divider />
            <FlexRow align="center" gap="gap.md">
              <Text text="志愿者文化积分" fontConfig="contentText" />
              <Text :text="infoLoader.content.value.points || 0" fontConfig="lightGoldTitle" />
            </FlexRow>

          </FlexCol>
        </BackgroundBox>

        <FlexRow wrap justify="space-around" gap="gap.md">
          <BoxMid
            v-for="(item, k) in infoGrids"
            :key="k"
            :padding="24"
            :innerStyle="{ width: 'calc(50% - 76rpx)' }"
            direction="row"
            align="center"
            gap="gap.md"
          >
            <Image :src="item.logo" :radius="20" width="100" height="100" mode="aspectFill" />
            <FlexCol>
              <Text :text="item.label" fontConfig="lightImportantTitle" />
              <FlexRow align="center" gap="gap.sm">
                <Text :text="item.value" fontConfig="lightGoldTitle" :fontSize="60" />
                <Text :text="item.unit" fontConfig="contentText" />
              </FlexRow>
            </FlexCol>
          </BoxMid>
        </FlexRow>

        <HomeTitle title="最新动态" />
        <FlexCol gap="gap.lg">
          <Empty v-if="activityLoader.content.value?.length == 0" description="ta很懒，还没有任何动态" />
          <FlexRow 
            v-for="item in activityLoader.content.value" :key="item.id"
            backgroundColor="background.tertiary"
            radius="radius.md"
            :padding="[20, 30]"
            gap="gap.lg"
            align="center"
          > 
            <Avatar 
              :url="infoLoader.content.value?.avatar || ''"
              :size="80"
              :round="false"
              :radius="10"
            />
            <Text :text="item.remark || '没有说明文字！'" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
          </FlexRow>
        </FlexCol>
      </FlexCol>
    </SimplePageContentLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import FlexCol from '@/components/layout/FlexCol.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Text from '@/components/basic/Text.vue';
import Avatar from '@/components/display/Avatar.vue';
import Image from '@/components/basic/Image.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import VillageApi from '@/api/inhert/VillageApi';
import H3 from '@/components/typography/H3.vue';
import Tag from '@/components/display/Tag.vue';
import Divider from '@/components/display/Divider.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Width from '@/components/layout/space/Width.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import TreeApi from '@/api/light/TreeApi';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import Empty from '@/components/feedback/Empty.vue';

const { querys } = useLoadQuerys({
  id: 0,
}, () => {
  infoLoader.reload();
});

const infoLoader = useSimpleDataLoader(async () => {
  return (await VillageApi.getVolunteerInfoByIdAdmin(querys.value.id));
});
const infoGrids = computed(() => {
  return [
    {
      label: '累计发文',
      unit: '/篇',
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconPosts.png',
      value: infoLoader.content.value?.collectCount as number || 0,
    },
    {
      label: '文化积分',
      unit: '/分',
      value: infoLoader.content.value?.points as number || 0,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconLikes.png',
    },
    {
      label: '乡源果累计',
      unit: '/个',
      value: infoLoader.content.value?.fruittotal as number || 0,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconFruts.png',
    },
    {
      label: '已关注村社',
      unit: '/个',
      value: infoLoader.content.value?.followVillageCount || 0,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconFollows.png',
    },
  ];
});
const activityLoader = useSimpleDataLoader(async () => {
  return (await TreeApi.getFruitLogList({
    userId: querys.value.id,
    page: 1,
    pageSize: 6,
  })).list || [];
});
</script>