|
|
@@ -1,50 +1,55 @@
|
|
|
<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]"
|
|
|
- :padding="[25,25]"
|
|
|
- direction="row"
|
|
|
- justify="space-between"
|
|
|
- align="center"
|
|
|
- gap="gap.md"
|
|
|
>
|
|
|
- <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
|
|
|
+ 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>
|
|
|
@@ -52,12 +57,16 @@
|
|
|
<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,
|
|
|
@@ -78,4 +87,13 @@ const villageRankListLoader = useSimpleDataLoader(async () => {
|
|
|
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>
|