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

<template>
  <FlexCol :gap="20" :padding="30" :innerStyle="{
    marginTop: '-130px',
    backgroundImage: 'url(/static/images/home/BannerHome.png)',
    backgroundSize: '100% auto',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'top center',
    backgroundColor: themeContext.resolveThemeColor('background.primary'),
  }">
    <Height height="200px" />
    <FlexCol :gap="20" align="center">
      <SearchBar v-model="searchKeywords" placeholder="搜索" :innerStyle="{
        backgroundColor: 'white',
        borderRadius: '20rpx',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: themeContext.resolveThemeColor('primary'),
        width: '650rpx',
      }" />
      <Image 
        src="/static/images/home/BannerIndex.png" 
        width="700rpx" 
        mode="widthFix" 
        :innerStyle="{
          borderRadius: '20rpx',
          clipPath: 'ellipse(100% 90% at 50% 0%)'
        }"
      />
    </FlexCol>

    <VillageMiniMap />
    <FlexRow justify="space-between" :padding="[10, 16]">
      <Button icon="/static/images/home/IconSwitch.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">切换城市</Button>
      <Button icon="/static/images/home/IconSwitch.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">我的关注</Button>
      <Button icon="/static/images/home/IconLight.png" :radius="40" :padding="[10, 30]" :iconProps="{ innerStyle: { marginRight: '10rpx' }}">点亮村社</Button>
    </FlexRow>

    <HomeTitle title="乡村排名" showMore />
    <VillageRankList />

    <HomeTitle title="志愿者排名" showMore :lightCount="3" />
    <VillageUserRankList />

    <HomeTitle title="精选记忆" showMore />
    <MasonryGrid>
      <MasonryGridItem
        v-for="(item, i) in recommendLoader.content.value"
        :key="i"
        :width="340"
      >
        <ImageBlock2
          :src="item.image"
          :title="item.title"
          :desc="item.desc"
          :width="340"
          :imageWidth="340"
          :imageRadius="15"
          backgroundColor="transparent"
        >
          <template #footer> 
            <FlexRow justify="space-between" align="center" :padding="[10,0]" :margin="[10,0,0,0]">
              <FlexRow align="center" :gap="10">
                <Avatar :url="item.image" :size="40" />
                <Text :text="item.userName" :fontSize="24" color="gray" />
              </FlexRow>
              <FlexRow align="center" :gap="10">
                <Icon icon="favorite" :color="item.isLike ? 'primary' : 'gray'" :size="30" />
                <Text :text="item.likes" :fontSize="30" :color="item.isLike ? 'primary' : 'gray'" />
              </FlexRow>
            </FlexRow>
          </template>
        </ImageBlock2>
      </MasonryGridItem>
    </MasonryGrid>

    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTheme } from '@/components/theme/ThemeDefine';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import Image from '@/components/basic/Image.vue';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import VillageMiniMap from './components/VillageMiniMap.vue';
import Button from '@/components/basic/Button.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import VillageRankList from './components/VillageRankList.vue';
import VillageUserRankList from './components/VillageUserRankList.vue';
import ImageBlock2 from '@/components/display/block/ImageBlock2.vue';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import Avatar from '@/components/display/Avatar.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';

const themeContext = useTheme();
const searchKeywords = ref('');

const recommendLoader = useSimpleDataLoader(async () => {
   const res = (await VillageInfoApi.getListForDiscover(
    1, 20, 
    '', 
  ));
  return res.list.concat(res.list,res.list, res.list, res.list).sort(() => Math.random() - 0.5).map((item) => ({
    ...item,
    isLike: Math.random() > 0.5,
    likes: Math.floor(Math.random() * 1000),
    userName: '用户' + Math.floor(Math.random() * 1000000),
    badge: item.villageName || '',
  }))
});

</script>