|
|
@@ -0,0 +1,66 @@
|
|
|
+<template>
|
|
|
+ <CommonTopBanner title="分享好友奖励">
|
|
|
+ <FlexCol padding="padding.md">
|
|
|
+ <SimplePageListLoader :loader="listLoader">
|
|
|
+ <FlexCol gap="gap.md">
|
|
|
+ <BoxMid
|
|
|
+ v-for="item in listLoader.list.value"
|
|
|
+ :key="item.id"
|
|
|
+ direction="row"
|
|
|
+ :padding="[16, 30]"
|
|
|
+ >
|
|
|
+ <Touchable
|
|
|
+ :gap="20"
|
|
|
+ :padding="[15,20]"
|
|
|
+ touchable
|
|
|
+ flex="1"
|
|
|
+ direction="row"
|
|
|
+ justify="space-between"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <FlexRow gap="gap.md" align="center">
|
|
|
+ <Icon :icon="item.image || 'space'" :size="100" />
|
|
|
+ <Width :size="5" />
|
|
|
+ <FlexCol gap="gap.md">
|
|
|
+ <Text fontConfig="lightImportantTitle" fontFamily="SongtiSCBlack">{{ item.name }}</Text>
|
|
|
+ <Text fontSize="fontSize.sm" :text="item.desc" />
|
|
|
+ </FlexCol>
|
|
|
+ </FlexRow>
|
|
|
+ <FlexCol gap="gap.xl" align="center">
|
|
|
+ <Button v-if="item.rewardFruit > 0" icon="https://xy.wenlvti.net/app_static/images/village/IconFruit.png" size="mini" :text="`+${item.rewardFruit}乡源果`" />
|
|
|
+ <Button v-if="item.rewardLight > 0" icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" size="mini" :text="`+${item.rewardLight}乡源光`" />
|
|
|
+ <Button v-if="item.rewardWater > 0" icon="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" size="mini" :text="`+${item.rewardWater}浇水次数`" />
|
|
|
+ </FlexCol>
|
|
|
+ </Touchable>
|
|
|
+ </BoxMid>
|
|
|
+ </FlexCol>
|
|
|
+ </SimplePageListLoader>
|
|
|
+ </FlexCol>
|
|
|
+ </CommonTopBanner>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
|
|
|
+import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
|
|
|
+import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
+import Text from '@/components/basic/Text.vue';
|
|
|
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
|
|
|
+import TreeApi from '@/api/light/TreeApi';
|
|
|
+import BoxMid from '@/common/components/box/BoxMid.vue';
|
|
|
+import Touchable from '@/components/feedback/Touchable.vue';
|
|
|
+import FlexRow from '@/components/layout/FlexRow.vue';
|
|
|
+import Button from '@/components/basic/Button.vue';
|
|
|
+import Icon from '@/components/basic/Icon.vue';
|
|
|
+import Width from '@/components/layout/space/Width.vue';
|
|
|
+
|
|
|
+const listLoader = useSimplePageListLoader(20, async (page, pageSize) => {
|
|
|
+ const res = await TreeApi.getTaskList({
|
|
|
+ page,
|
|
|
+ pageSize,
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ list: res.list,
|
|
|
+ total: res.total,
|
|
|
+ };
|
|
|
+});
|
|
|
+</script>
|