|
|
@@ -11,40 +11,74 @@
|
|
|
overflow: 'hidden',
|
|
|
}"
|
|
|
/>
|
|
|
-
|
|
|
- <HomeTitle title="主题导览" />
|
|
|
- <ProvideVar :vars="{
|
|
|
- GridItemIconSize: 90,
|
|
|
- GridItemBackgroundColor: 'transparent',
|
|
|
- GridItemPaddingHorizontal: 0,
|
|
|
- }">
|
|
|
- <Grid :borderGrid="false" :mainAxisCount="3">
|
|
|
- <GridItem title="全部" icon="https://xy.wenlvti.net/app_static/images/discover/IconAll.png" touchable @click="goList(354, '知识库 · 全部')" />
|
|
|
- <GridItem title="优秀案例" icon="https://xy.wenlvti.net/app_static/images/discover/IconExamples.png" touchable @click="goList(359, '知识库 · 优秀案例')" />
|
|
|
- <GridItem title="经验分享" icon="https://xy.wenlvti.net/app_static/images/discover/IconShare.png" touchable @click="goList(358, '知识库 · 经验分享' )" />
|
|
|
- <GridItem title="常见问题" icon="https://xy.wenlvti.net/app_static/images/discover/IconQuestions.png" touchable @click="goList(357, '知识库 · 常见问题')" />
|
|
|
- <GridItem title="挖掘技巧" icon="https://xy.wenlvti.net/app_static/images/discover/IconTrick.png" touchable @click="goList(356, '知识库 · 挖掘技巧')" />
|
|
|
- <GridItem title="认知基础" icon="https://xy.wenlvti.net/app_static/images/discover/IconBase.png" touchable @click="goList(355, '知识库 · 认知基础')" />
|
|
|
- </Grid>
|
|
|
- </ProvideVar>
|
|
|
-
|
|
|
- <HomeTitle title="最新推荐" />
|
|
|
- <SimplePageContentLoader :loader="discoverLoader">
|
|
|
- <FlexCol :gap="25">
|
|
|
- <ImageBlock3
|
|
|
- v-for="(item, i) in discoverLoader.content.value"
|
|
|
- :key="i"
|
|
|
- backgroundColor="transparent"
|
|
|
+
|
|
|
+ <HomeTitle title="乡村排名" showMore @moreClicked="navTo('/pages/home/village/rank/village')" />
|
|
|
+ <FlexCol gap="gap.lg">
|
|
|
+ <Touchable
|
|
|
+ v-for="item in villageRankListLoader.content.value" :key="item.id"
|
|
|
+ backgroundColor="background.tertiary"
|
|
|
+ radius="radius.md"
|
|
|
+ :padding="[20, 30]"
|
|
|
+ gap="gap.lg"
|
|
|
+ align="center"
|
|
|
+ @click="handleGoVillageDetails(item as any)"
|
|
|
+ >
|
|
|
+ <Image
|
|
|
:src="item.image"
|
|
|
- :title="item.title"
|
|
|
- :desc="item.desc"
|
|
|
- :imageRadius="15"
|
|
|
- :imageWidth="200"
|
|
|
- :imageHeight="140"
|
|
|
- @click="goDetail(item)"
|
|
|
+ defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
|
|
|
+ :width="280"
|
|
|
+ :height="80"
|
|
|
+ :round="false"
|
|
|
+ :radius="10"
|
|
|
/>
|
|
|
- </FlexCol>
|
|
|
- </SimplePageContentLoader>
|
|
|
+ <Text :text="item.title" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
|
|
|
+ </Touchable>
|
|
|
+ </FlexCol>
|
|
|
+
|
|
|
+ <HomeTitle title="志愿者排名" showMore :lightCount="3" @moreClicked="navTo('/pages/home/village/rank/volunteer')" />
|
|
|
+ <FlexCol gap="gap.lg">
|
|
|
+ <Touchable
|
|
|
+ v-for="item in villageRankListLoader.content.value" :key="item.id"
|
|
|
+ backgroundColor="background.tertiary"
|
|
|
+ radius="radius.md"
|
|
|
+ :padding="[20, 30]"
|
|
|
+ gap="gap.lg"
|
|
|
+ align="center"
|
|
|
+ @click="navTo('/pages/home/village/volunteer/detail', { id: $event.id })"
|
|
|
+ >
|
|
|
+ <Image
|
|
|
+ :src="item.image"
|
|
|
+ defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.jpg"
|
|
|
+ :width="80"
|
|
|
+ :height="80"
|
|
|
+ :round="true"
|
|
|
+ />
|
|
|
+ <Text :text="item.title" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
|
|
|
+ </Touchable>
|
|
|
+ </FlexCol>
|
|
|
+
|
|
|
+ <HomeTitle title="乡源好物" showMore @moreClicked="navTo('/pages/home/village/rank/village')" />
|
|
|
+
|
|
|
+ <HomeTitle title="最新推荐" />
|
|
|
+ <SimplePageListLoader :loader="discoverLoader">
|
|
|
+ <MasonryGrid>
|
|
|
+ <MasonryGridItem
|
|
|
+ v-for="(item, i) in discoverLoader.list.value"
|
|
|
+ :key="i"
|
|
|
+ :width="340"
|
|
|
+ >
|
|
|
+ <IndexCommonImageItem
|
|
|
+ :image="item.image"
|
|
|
+ :title="item.title"
|
|
|
+ :desc="item.content ?? ''"
|
|
|
+ :userName="item.villageVolunteerName ?? ''"
|
|
|
+ :likes="0"
|
|
|
+ :isLike="false"
|
|
|
+ @click="handleGoRecommendDetails(item)"
|
|
|
+ />
|
|
|
+ </MasonryGridItem>
|
|
|
+ </MasonryGrid>
|
|
|
+ </SimplePageListLoader>
|
|
|
|
|
|
<Loadmore status="nomore" />
|
|
|
<Height :height="150" />
|
|
|
@@ -53,44 +87,64 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { navTo } from '@/components/utils/PageAction';
|
|
|
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
|
|
|
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
|
|
|
+import { useVillageStore } from '@/store/village';
|
|
|
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
|
|
|
-import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
|
|
|
import Loadmore from '@/components/display/loading/Loadmore.vue';
|
|
|
import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
import Height from '@/components/layout/space/Height.vue';
|
|
|
-import ProvideVar from '@/components/theme/ProvideVar.vue';
|
|
|
-import Grid from '@/components/layout/grid/Grid.vue';
|
|
|
-import GridItem from '@/components/layout/grid/GridItem.vue';
|
|
|
-import Image from '@/components/basic/Image.vue';
|
|
|
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
|
|
|
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
|
|
|
-import ImageBlock3 from '@/components/display/block/ImageBlock3.vue';
|
|
|
-import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
|
|
|
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
|
|
|
+import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
|
|
|
+import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
|
|
|
+import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
|
|
|
+import VillageInfoApi, { type CommonInfoModel } from '@/api/inhert/VillageInfoApi';
|
|
|
+import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
|
|
|
+import LightVillageApi, { type VillageListItem } from '@/api/light/LightVillageApi';
|
|
|
+import Avatar from '@/components/display/Avatar.vue';
|
|
|
+import Touchable from '@/components/feedback/Touchable.vue';
|
|
|
+import Text from '@/components/basic/Text.vue';
|
|
|
+import Image from '@/components/basic/Image.vue';
|
|
|
+import { waitTimeOut } from '@imengyu/imengyu-utils';
|
|
|
|
|
|
-const appConfiguration = injectAppConfiguration();
|
|
|
+const emit = defineEmits([ 'goVillage' ]);
|
|
|
|
|
|
-const discoverLoader = useSimpleDataLoader(async () => {
|
|
|
- return (await CommonContent.getContentList(new GetContentListParams()
|
|
|
- .setModelId(18)
|
|
|
- .setMainBodyColumnId(354)
|
|
|
- , 1, 30)).list
|
|
|
+const villageStore = useVillageStore();
|
|
|
+const appConfiguration = injectAppConfiguration();
|
|
|
+const discoverLoader = useSimplePageListLoader(15, async (page, pageSize) => {
|
|
|
+ return await VillageInfoApi.getListForDiscover(page, pageSize);
|
|
|
});
|
|
|
-
|
|
|
-function goDetail(item: GetContentListItem) {
|
|
|
- navTo('/pages/article/details', {
|
|
|
- modelId: item.modelId,
|
|
|
- mainBodyColumnId: item.mainBodyColumnId,
|
|
|
+const villageRankListLoader = useSimpleDataLoader(async () => {
|
|
|
+ const res = await LightVillageApi.getVillageRankList({ num: 10 });
|
|
|
+ return res.map((item, i) => ({
|
|
|
+ image: item.image ?? '',
|
|
|
+ title: item.name,
|
|
|
+ rank: i + 1,
|
|
|
id: item.id,
|
|
|
- });
|
|
|
+ }));
|
|
|
+});
|
|
|
+const villageUserRankListLoader = useSimpleDataLoader(async () => {
|
|
|
+ const res = (await LightVillageApi.getVolunteerRankList({ num: 10 }))
|
|
|
+ .map((item, i) => ({
|
|
|
+ id: item.id,
|
|
|
+ image: item.image ?? '',
|
|
|
+ title: item.name,
|
|
|
+ rank: i + 1,
|
|
|
+ score: item.points,
|
|
|
+ }));
|
|
|
+ return res
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+function handleGoRecommendDetails(item: CommonInfoModel) {
|
|
|
+ navTo(`/pages/home/discover/details`, { id: item.id });
|
|
|
}
|
|
|
-function goList(mainBodyColumnId: number|undefined, title: string, search?: string) {
|
|
|
- navTo('/pages/article/common/list', {
|
|
|
- modelId: 18,
|
|
|
- mainBodyColumnId,
|
|
|
- title,
|
|
|
- search: search || '',
|
|
|
- });
|
|
|
+async function handleGoVillageDetails(item: VillageListItem) {
|
|
|
+ const details = await LightVillageApi.getVillageDetails(item.id);
|
|
|
+ villageStore.setCurrentVillage(details);
|
|
|
+ await waitTimeOut(100);
|
|
|
+ emit('goVillage')
|
|
|
}
|
|
|
</script>
|