xiangyuan-app/src/pages/home/components/VillageRankList.vue

<template>
  <Empty v-if="list.length === 0" description="暂无排名数据" />
  <FlexRow :gap="20">
    <Touchable 
      v-for="(item) in list" 
      :key="item.id" 
      :width="item.rank == 1 ? '40%' : '28.5%'" 
      position="relative" 
      justify="space-between"
      radius="radius.md"
      overflow="hidden"
      direction="column"
      @click="handleGoDetails(item)"
    >
      <Image 
        :src="item.image" 
        width="100%" 
        :height="280" 
        mode="aspectFill" 
        radius="radius.md" 
        defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
      />
      <FlexRow
        position="absolute"
        :left="0"
        :bottom="0" 
        :right="0"
        :padding="10"
        center
        backgroundColor="rgba(0, 0, 0, 0.5)"
      >
        <Text :text="item.title" fontConfig="h4" color="white" />
      </FlexRow>
      <FlexCol 
        position="absolute"
        :left="15"
        :top="15" 
        center
        :width="60"
        :height="80"
        :innerStyle="{
          backgroundSize: '100% auto',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundImage: item.rank == 1 ?
            `url('https://xy.wenlvti.net/app_static/images/home/RankBadge1.png')` :
            `url('https://xy.wenlvti.net/app_static/images/home/RankBadgeN.png')`,
        }"
      >
        <Text v-if="item.rank > 1" fontConfig="h4" :text="item.rank" color="white" />
      </FlexCol>
    </Touchable>
  </FlexRow>
</template>

<script setup lang="ts">
import LightVillageApi from '@/api/light/LightVillageApi';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Empty from '@/components/feedback/Empty.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { navTo } from '@/components/utils/PageAction';
import { useVillageStore } from '@/store/village';
import { waitTimeOut } from '@imengyu/imengyu-utils';

const props = withDefaults(defineProps<{
  list?: {
    id: number;
    image: string;
    title: string;
    rank: number;
  }[];
  jumpToSingle?: boolean;
}>(), {
  jumpToSingle: true,
  list: () => [
    {
      id: 1,
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
      title: '乡村1',
      rank: 1,
    },
    {
      id: 2,
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
      title: '乡村2',
      rank: 2,
    },
    {
      id: 3,
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
      title: '乡村3',
      rank: 3,
    },
  ],
});

const emit = defineEmits([ 'goDetails' ]);

const villageStore = useVillageStore();

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