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

<template>
  <FlexCol :gap="20" :padding="20">
    <Box title="导览" icon="/static/images/home/icon-compass.png">
      <ProvideVar :vars="{
        GridItemIconSize: 90,
        GridItemBackgroundColor: 'transparent',
        GridItemPaddingHorizontal: 0,
      }">
        <Grid :borderGrid="false" :mainAxisCount="4">
          <GridItem title="全部" icon="/static/images/icons/icon-all.png" touchable @click="goList('')" />
          <GridItem title="历史文化" icon="/static/images/icons/icon-history.png" touchable @click="goList('历史文化')" />
          <GridItem title="环境格局" icon="/static/images/icons/icon-envirounment.png" touchable @click="goList('环境格局')" />
          <GridItem title="传统建筑" icon="/static/images/icons/icon-buliding.png" touchable @click="goList('传统建筑')" />
          <GridItem title="民俗文化" icon="/static/images/icons/icon-location.png" touchable @click="goList('民俗文化')" />
          <GridItem title="地道美食" icon="/static/images/icons/icon-foods.png" touchable @click="goList('美食物产')" />
          <GridItem title="物产资源" icon="/static/images/icons/icon-resource.png" touchable @click="goList('历史人物')" />
          <GridItem title="旅游线路" icon="/static/images/icons/icon-route.png" touchable @click="goList('旅游线路')" />
        </Grid>
      </ProvideVar>
    </Box>
    <Box title="最新推荐" icon="/static/images/home/icon-article.png">  
      <SimplePageContentLoader :loader="discoverLoader">
        <FlexCol :gap="25">
          <ImageBlock2 
            v-for="(item, i) in discoverLoader.content.value"
            :key="i"
            :src="item.image"
            :title="item.title"
            :desc="item.desc"
            :imageHeight="400"
            :imageRadius="15"
            width="100%"
            @click="goDetails(item)"
          > 
            <template #extra>
              <Tag scheme="light" :text="item.villageName" type="primary" />
            </template>
          </ImageBlock2>
        </FlexCol>
      </SimplePageContentLoader>
    </Box>
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import Box from '@/common/components/parts/Box.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import AppCofig from '@/common/config/AppCofig';
import Tag from '@/components/display/Tag.vue';
import ImageBlock2 from '@/components/display/block/ImageBlock2.vue';

function goList(keywords: string) {
  navTo('/pages/home/discover/list', {
    keywords,
    title: keywords,
  });
}
function goDetails(item: any) {
  navTo('/pages/home/discover/details', {
    id: item.id,
    collectModelId: item.collectModuleId,
    collectModelInternalName: item.collectModuleInternalName,
  });
}

const discoverLoader = useSimpleDataLoader(async () => {
  return (await VillageInfoApi.getListForDiscover(1, 30)).list.map((item) => {
    return {
      ...item,
      image: (item.thumbnail || item.image) as string,
      desc: item.desc || '',
      title: item.title,
    }
  })
});
</script>