xiangyuan-app/src/pages/home/village/follow/list.vue

<template>
  <CommonTopBanner title="关注人数">
    <SimplePageListLoader :loader="villageUserRankListLoader">
      <FlexCol gap="gap.lg" padding="space.md">
        <Touchable
          v-for="(item, index) in villageUserRankListLoader.list.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">
              <Avatar 
                :url="item.avatar"
                defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteerNew.png"
                :size="70" 
                mode="aspectFill" 
                radius="radius.md" 
              />
              <Text :text="item.nickname" fontConfig="contentText" />
            </FlexRow>
            <FlexRow center gap="gap.md">
              <Tag v-if="item.isAdmin" text="管理员" size="small" />
            </FlexRow>
          </BackgroundBox>
        </Touchable>
      </FlexCol>
    </SimplePageListLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { navTo } from '@/components/utils/PageAction';
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 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';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import FollowVillageApi from '@/api/light/FollowVillageApi';

const { querys } = useLoadQuerys({
  villageId: 0,
}, () => {
  villageUserRankListLoader.reload();
}); 

const villageUserRankListLoader = useSimplePageListLoader(20, async (page, pageSize) => {
  return (await FollowVillageApi.getFollowedUsers({
    page, pageSize, 
    villageId: querys.value.villageId
  }))
});

function goDetails(item: {
  id: number;
}) {
  navTo('../volunteer/detail', { id: item.id });
}

</script>