xiangyuan-app/src/pages/home/discover/index.vue

<template>
  <FlexCol :gap="20" :padding="30">
    <HomeLargeTitle title="发现" />
    <ImageSwiper
      :images="appConfiguration?.banners.discover"
      width="100%"
      :height="400"
      radius="radius.md"
      :innerStyle="{
        border: '1px solid #fff',
        overflow: 'hidden',
      }"
    />

    <HomeTitle title="乡村排名" showMore @moreClicked="navTo('/pages/home/village/rank/village')" />
    <FlexCol gap="gap.lg">
      <Touchable
        v-for="item in villageRankListLoader.content.value" :key="item.id"
        backgroundColor="background.tertiary"
        radius="radius.md"
        :padding="[20, 30]"
        gap="gap.lg"
        align="center"
        @click="handleGoVillageDetails(item as any)"
      > 
        <Image
          :src="item.image"
          defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
          :width="280"
          :height="80"
          :round="false"
          :radius="10"
        />
        <Text :text="item.title" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
      </Touchable>
    </FlexCol>

    <HomeTitle title="志愿者排名" showMore :lightCount="3" @moreClicked="navTo('/pages/home/village/rank/volunteer')" />
    <FlexCol gap="gap.lg">
      <Touchable
        v-for="item in villageRankListLoader.content.value" :key="item.id"
        backgroundColor="background.tertiary"
        radius="radius.md"
        :padding="[20, 30]"
        gap="gap.lg"
        align="center"
        @click="navTo('/pages/home/village/volunteer/detail', { id: $event.id })"
      > 
        <Image
          :src="item.image"
          defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.jpg"
          :width="80"
          :height="80"
          :round="true"
        />
        <Text :text="item.title" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
      </Touchable>
    </FlexCol>

    <HomeTitle title="乡源好物" showMore @moreClicked="navTo('/pages/home/village/rank/village')" />

    <HomeTitle title="最新推荐" />
    <SimplePageListLoader :loader="discoverLoader">
      <MasonryGrid>
        <MasonryGridItem
          v-for="(item, i) in discoverLoader.list.value"
          :key="i"
          :width="340"
        >
          <IndexCommonImageItem
            :image="item.image"
            :title="item.title"
            :desc="item.content ?? ''"
            :userName="item.villageVolunteerName ?? ''"
            :likes="0"
            :isLike="false"
            @click="handleGoRecommendDetails(item)"
          />
        </MasonryGridItem>
      </MasonryGrid>
    </SimplePageListLoader>
    
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useVillageStore } from '@/store/village';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
import VillageInfoApi, { type CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
import LightVillageApi, { type VillageListItem } from '@/api/light/LightVillageApi';
import Avatar from '@/components/display/Avatar.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import { waitTimeOut } from '@imengyu/imengyu-utils';

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

const villageStore = useVillageStore();
const appConfiguration = injectAppConfiguration();
const discoverLoader = useSimplePageListLoader(15, async (page, pageSize) => {
  return await VillageInfoApi.getListForDiscover(page, pageSize);
});
const villageRankListLoader = useSimpleDataLoader(async () => {
  const res = await LightVillageApi.getVillageRankList({ num: 10 });
  return res.map((item, i) => ({
    image: item.image ?? '',
    title: item.name,
    rank: i + 1,
    id: item.id,
  }));
});
const villageUserRankListLoader = useSimpleDataLoader(async () => {
  const res = (await LightVillageApi.getVolunteerRankList({ num: 10 }))
    .map((item, i) => ({
      id: item.id,
      image: item.image ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
    }));
  return res
});


function handleGoRecommendDetails(item: CommonInfoModel) {
  navTo(`/pages/home/discover/details`, { id: item.id });
}
async function handleGoVillageDetails(item: VillageListItem) {
  const details = await LightVillageApi.getVillageDetails(item.id);
  villageStore.setCurrentVillage(details);
  await waitTimeOut(100);
  emit('goVillage')
}
</script>