xiangyuan-app/src/pages/home/village/recommed/around.vue

<template>
  <FlexCol padding="space.sm">
    <FlexRow center>
      <HomeTitle title="优秀村社" />
      <Width :width="60" />
    </FlexRow>
    <SimplePageListLoader :loader="recommendLoader">
      <MasonryGrid :items="recommendLoader.list.value" itemKey="id">
        <template #default="{ item }">
          <IndexCommonImageItem
            :title="item.name"
            :image="item.image"
            defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
            @click="emit('selectVillage', item)"
          />
        </template>
      </MasonryGrid>
    </SimplePageListLoader>
  </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 MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';

const emit = defineEmits(['selectVillage']);

const recommendLoader = useSimplePageListLoader(15, async (page, pageSize, params) => {  
  const res = page === 1 ? await LightVillageApi.getVillageRankList({ 
    num: pageSize,
  }): [];
  return {
    total: res.length,
    list: res
  }
});
</script>