🎨 优化首页未选择村落显示村落列表

src/pages/home/village/recommed/around.vue

@@ -1,18 +1,23 @@
 <template>
   <FlexCol padding="space.sm">
-    <HomeTitle title="周边村社" />
-    <Construction
-      text="此处在未选择村庄时可以推荐附近优秀村社信息。等待后端添加接口"
-    />
-    <MasonryGrid>
-      <MasonryGridItem
-        v-for="(item, i) in recommendLoader.content.value"
-        :key="i"
-        :width="340"
-      >
-
-      </MasonryGridItem>
-    </MasonryGrid>
+    <HomeTitle title="周边优秀村社" />
+    <SimplePageListLoader :loader="recommendLoader">
+      <MasonryGrid>
+        <MasonryGridItem
+          v-for="(item, i) in recommendLoader.list.value"
+          :key="i"
+          :width="340"
+        >
+          <IndexCommonImageItem 
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
+            @click="emit('selectVillage', item)"
+          />
+        </MasonryGridItem>
+      </MasonryGrid>
+    </SimplePageListLoader>
   </FlexCol>
 </template>
 
@@ -22,19 +27,22 @@ import HomeTitle from '@/common/components/parts/HomeTitle.vue';
 import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
 import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
 import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
-import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
-import { useVillageStore } from '@/store/village';
 import LightVillageApi from '@/api/light/LightVillageApi';
-import CommonContent from '@/api/CommonContent';
-import Result from '@/components/feedback/Result.vue';
-import Construction from '@/common/components/Construction.vue';
-
-const villageStore = useVillageStore();
-const recommendLoader = useSimpleDataLoader(async () => {
-  if (!villageStore.currentRegion)
-    return [];
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
+import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
 
+const emit = defineEmits(['selectVillage']);
 
-  return [];
+const recommendLoader = useSimplePageListLoader(15, async (page, pageSize, params) => {
+  const result = await LightVillageApi.getVillageList(undefined, undefined, undefined, page, pageSize);
+  return {
+    total: result.total,
+    list: result.list.map((item) => ({
+      id: item.id,
+      title: item.title,
+      image: item.image,
+      desc: item.address,
+    }))
+  }
 });
 </script>