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

<template>
  <CommonTopBanner title="志愿者详情">
    <SimplePageContentLoader :loader="infoLoader">
      <Construction text="现在是接口缺少部分数据" />
      <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 + '级'" />
            </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" fontConfig="lightGoldTitle" />
            </FlexRow>

          </FlexCol>
        </BackgroundBox>

        <FlexRow wrap justify="space-around" gap="gap.md">
          <BackgroundBox 
            v-for="(item, k) in infoGrids"
            :key="k"
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
            :backgroundCutBorder="32"
            :backgroundCutBorderSize="36"
            :padding="24"
            :innerStyle="{ width: 'calc(50% - 58rpx)' }"
            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>
          </BackgroundBox>
        </FlexRow>

        <HomeTitle title="最新动态" />
        <FlexCol gap="gap.lg">
          <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="item.head"
              :size="80"
              :round="false"
              :radius="10"
            />
            <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
          </FlexRow>
        </FlexCol>
      </FlexCol>
    </SimplePageContentLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
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 { computed } from 'vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Width from '@/components/layout/space/Width.vue';
import Construction from '@/common/components/Construction.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?.userId as number,
    },
    {
      label: '点赞/评论',
      unit: '/次',
      value: infoLoader.content.value?.userId as number,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconLikes.png',
    },
    {
      label: '乡源果累计',
      unit: '/个',
      value: infoLoader.content.value?.userId as number,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconFruts.png',
    },
    {
      label: '已关注村社',
      unit: '/个',
      value: infoLoader.content.value?.userId as number,
      logo: 'https://xy.wenlvti.net/app_static/images/home/volunteer/IconFollows.png',
    },
  ];
});
const activityLoader = useSimpleDataLoader(async () => {
  return [
    {
      id: 1,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
      content: '测试数据，没有接口！：福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '一级',
    },
    {
      id: 2,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '五级',
    },
    {
      id: 3,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '十级',
    },

  ];
});
</script>