xiangyuan-app/src/pages/home/village/rank/village.vue

<template>
  <FlexCol gap="gap.lg" padding="space.md">

    <BackgroundBox
      v-for="(item, index) in villageRankListLoader.content.value"
      :key="item.id"
      backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxLong.png"
      :backgroundCutBorder="[10,10,10,10]"
      :backgroundCutBorderSize="[10,10,10,10]"
    >
      <Touchable
        direction="row"
        justify="space-between"
        align="center"
        gap="gap.md"
        :padding="[25,25]"
        @click="handleGoDetails(item)"
      >
        <FlexRow align="center" gap="gap.lg">
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
            width="60rpx"
            height="60rpx"
            center
          >
            <Text :text="index + 1" fontConfig="h4" color="white" />
          </BackgroundBox>
          <Image 
            :src="item.image" 
            width="170rpx"
            height="120rpx"
            mode="aspectFill"
            radius="radius.md"
          />
          <Text :text="item.title" fontConfig="contentText" />
        </FlexRow>
        <FlexRow center gap="gap.md">
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
            :backgroundCutBorder="[10,10,10,10]"
            :backgroundCutBorderSize="[10,10,10,10]"
            :padding="[15,10]"
            center
            direction="row"
            gap="gap.md"
            width="100"
          >
            <Image src="https://xy.wenlvti.net/app_static/images/village/IconLight.png" width="30rpx" height="30rpx" mode="aspectFill" />
            <Text :text="item.points" fontConfig="contentText" />
          </BackgroundBox>
        </FlexRow>
      </Touchable>
    </BackgroundBox>
  </FlexCol>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useVillageStore } from '@/store/village';
import { navTo } from '@/components/utils/PageAction';
import FlexCol from '@/components/layout/FlexCol.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import { waitTimeOut } from '@imengyu/imengyu-utils';

const { querys } = useLoadQuerys({
  regionId: 0,
}, () => {
  villageRankListLoader.reload();
});

const villageRankListLoader = useSimpleDataLoader(async () => {
  const res = await LightVillageApi.getVillageRankList({ 
    region_id: querys.value.regionId || undefined, 
    num: 30
  });
  return res.map((item, i) => ({
    image: item.image ?? '',
    title: item.name,
    rank: i + 1,
    id: item.id,
    points: item.points,
  }));
});

const villageStore = useVillageStore();

async function handleGoDetails(item: { id: number }) {
  const details = await LightVillageApi.getVillageDetails(item.id);
  villageStore.setCurrentVillage(details);
  await waitTimeOut(100);
  navTo('/pages/home/village/index');
}
</script>