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

<template>
  <FlexCol :innerStyle="{
    backgroundImage: 'url(https://xy.wenlvti.net/app_static/images/dig/TopBanner.png)',
    backgroundSize: '100% auto',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'top center',
    minHeight: '100vh',
  }">
    <StatusBarSpace />
    <NavBar title="村落排名" leftButton="back" />
    <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/BoxDark.png"
        :backgroundCutBorder="[6,6,6,6]"
        :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>
  </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 { backAndCallOnPageBack, 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';
import NavBar from '@/components/nav/NavBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';

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);
  backAndCallOnPageBack('villageRank', {
    type: 'goVillage'
  })
}
</script>