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

<template>
  <FlexCol :gap="20" :padding="20">
    <FlexCol :radius="15" overflow="hidden">
      <ImageSwiper 
        :height="300"
        :images="[
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/1.webp',
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/2.jpg',
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/3.jpg',
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/4.jpg',
          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/5.jpg',
        ]"
      />
    </FlexCol>
    <Box title="村社分布" icon="/static/images/home/icon-pin-distance.png">
      <map 
        id="prevMap"
        map-id="prevMap"
        class="w-100 height-400 radius-base overflow-hidden"
        :markers="mapLoader.content.value || []"
        :scale="10"
        :longitude="AppCofig.defaultLonLat[0]"
        :latitude="AppCofig.defaultLonLat[1]"
        @markertap="goVillageDetails($event)"
      />
    </Box>
    <Box title="线上史馆展示" icon="/static/images/home/icon-ancient-gate.png">
      <SimplePageContentLoader :loader="recommendLoader">
        <FlexRow justify="space-between" align="center" wrap :gap="25">
          <Touchable 
            v-for="(item, i) in recommendLoader.content.value"
            :key="i"
            :gap="20"
            flex="0 0 48%"
            align="center"
            direction="column"
            @click="goVillageDetails(item)"
          > 
            <Image 
              :src="item.thumbnail || item.image" 
              width="100%" 
              height="200rpx" 
              :radius="15" 
              mode="aspectFill" 
              round
            />
            <Text :text="item.title" />
          </Touchable>
        </FlexRow>
      </SimplePageContentLoader>
    </Box>
    <Box title="发现" icon="/static/images/home/icon-compass.png" showMore @moreClicked="$emit('goDiscover')">  
      <SimplePageContentLoader :loader="discoverLoader">
        <FlexCol :gap="25">
          <Touchable 
            v-for="(item, i) in discoverLoader.content.value"
            :key="i"
            justify="space-between"
            align="center"
            direction="row"
            @click="goDiscoverDetails(item)"
          > 
            <FlexCol flex="1" :gap="20">
              <Text :text="item.title" fontConfig="h5" />
              <Text :text="item.desc" fontConfig="subText" />
            </FlexCol>
            <Width :width="25" />
            <Image 
              :src="item.image" 
              :failedImage="AppCofig.defaultImage"
              :width="120" 
              :height="120" 
              :radius="15" 
              mode="aspectFill" 
              round
            />
          </Touchable>
        </FlexCol>
      </SimplePageContentLoader>
    </Box>
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { getCurrentInstance } from 'vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import VillageApi from '@/api/inhert/VillageApi';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import Box from '@/common/components/parts/Box.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import AppCofig from '@/common/config/AppCofig';
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 FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';

const instance = getCurrentInstance();
const mapCtx = uni.createMapContext('prevMap', instance);
const mapLoader = useSimpleDataLoader(async () => {
  const res = (await VillageApi.getVallageList(undefined, 1)).map((p, i) => ({
    ...p,
    id: p.id ?? i,
    title: p.villageName,
    longitude: Number(p.longitude),
    latitude: Number(p.latitude),
    width: 30,
    height: 30,
    iconPath: p.thumbnail || p.image,
  }));
  setTimeout(() => {
    mapCtx.includePoints({
      points: res.map(p => {
        if (!p.longitude || !p.latitude) {
          p.longitude = AppCofig.defaultLonLat[0];
          p.latitude = AppCofig.defaultLonLat[1];
        }
        return {
          latitude: p.latitude,
          longitude: p.longitude,
        }
      }),
      padding: [20, 20, 20, 20],
    });
  }, 200);
  return res;
});

function goVillageDetails(e: any) {
  const id = typeof e.markerId == 'number' ? e.markerId : e.id;
  uni.setStorageSync('VillageTemp', JSON.stringify(mapLoader.content.value?.find(p => p.id == id)));
  setTimeout(() => {
    navTo('/pages/home/village/details', { id: id });
  }, 200);
}

const recommendLoader = useSimpleDataLoader(async () => {
  //const category = (await CommonContent.getCategoryList(151)).find(p => p.title == '省级');
  return (await VillageApi.getVallageList(undefined, 1));
});

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

function goDiscoverDetails(item: any) {
  navTo('/pages/home/discover/details', {
    id: item.id,
    collectModelId: item.collectModuleId,
    collectModelInternalName: item.collectModuleInternalName,
  });
}

</script>