xiangyuan-app/src/pages/home/components/VillageMyFollow.vue

<template>
  <FlexCol padding="space.md">
    <HomeTitle title="我的关注" />
    <RequireLogin unLoginMessage="登录后查看我的关注村社" @loginSuccess="myFollowLoader.reload()">
      <SimplePageListLoader :loader="myFollowLoader">
        <FlexCol gap="gap.md">
          <ImageBlock3
            v-for="(item, i) in myFollowLoader.list.value"
            :key="i"
            backgroundColor="transparent"
            :src="item.image"
            :title="item.name"
            :desc="item.address"
            :imageRadius="15"
            :imageWidth="200"
            :imageHeight="140"
            @click="emit('goDetails', item)"
          />
        </FlexCol>
      </SimplePageListLoader>
    </RequireLogin>
  </FlexCol>
</template>

<script setup lang="ts">
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import FlexCol from '@/components/layout/FlexCol.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue';
import FollowVillageApi from '@/api/light/FollowVillageApi';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import RequireLogin from '@/common/components/RequireLogin.vue';
import type { VillageListItem } from '@/api/light/LightVillageApi';

const emit = defineEmits<{
  (e: 'goDetails', item: VillageListItem): void;
}>();

const myFollowLoader = useSimplePageListLoader(20, async (page, pageSize) => {
  return (await FollowVillageApi.getFollowVillageList({ page: page, pageSize: pageSize }));
});
</script>