|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="d-flex flex-column bg-base pb-45">
|
|
|
|
|
|
|
+ <FlexCol :padding="[0,0,50,0]">
|
|
|
<SimplePageContentLoader :loader="loader">
|
|
<SimplePageContentLoader :loader="loader">
|
|
|
<template v-if="loader.content.value">
|
|
<template v-if="loader.content.value">
|
|
|
- <view class="d-flex flex-col">
|
|
|
|
|
|
|
+ <FlexCol :gap="20">
|
|
|
<swiper
|
|
<swiper
|
|
|
v-if="loader.content.value.images.length > 0"
|
|
v-if="loader.content.value.images.length > 0"
|
|
|
circular
|
|
circular
|
|
@@ -10,44 +10,66 @@
|
|
|
:autoplay="true"
|
|
:autoplay="true"
|
|
|
:interval="3000"
|
|
:interval="3000"
|
|
|
:duration="1000"
|
|
:duration="1000"
|
|
|
- class="height-500"
|
|
|
|
|
|
|
+ :style="{ height: '500rpx' }"
|
|
|
>
|
|
>
|
|
|
<swiper-item v-for="(item, key) in loader.content.value.images" :key="key">
|
|
<swiper-item v-for="(item, key) in loader.content.value.images" :key="key">
|
|
|
<view class="item">
|
|
<view class="item">
|
|
|
- <image
|
|
|
|
|
|
|
+ <Image
|
|
|
:src="item"
|
|
:src="item"
|
|
|
- class="w-100 height-500 radius-base"
|
|
|
|
|
|
|
+ width="100%"
|
|
|
|
|
+ :height="500"
|
|
|
|
|
+ :radius="20"
|
|
|
mode="aspectFill"
|
|
mode="aspectFill"
|
|
|
@click="onPreviewImage(key)"
|
|
@click="onPreviewImage(key)"
|
|
|
/>
|
|
/>
|
|
|
</view>
|
|
</view>
|
|
|
</swiper-item>
|
|
</swiper-item>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
- <image
|
|
|
|
|
|
|
+ <Image
|
|
|
v-else-if="loader.content.value.image"
|
|
v-else-if="loader.content.value.image"
|
|
|
- class="w-100 radius-base"
|
|
|
|
|
:src="loader.content.value.image"
|
|
:src="loader.content.value.image"
|
|
|
|
|
+ width="100%"
|
|
|
mode="widthFix"
|
|
mode="widthFix"
|
|
|
/>
|
|
/>
|
|
|
- <view class="d-flex flex-col p-3">
|
|
|
|
|
- <view class="size-ll color-title-text">{{ loader.content.value.title }}</view>
|
|
|
|
|
- <view class="d-flex flex-row mt-2">
|
|
|
|
|
- <text v-if="loader.content.value.from" class="size-s color-text-content-second mr-2 ">来源:{{ loader.content.value.from }}</text>
|
|
|
|
|
- <text class="size-s color-text-content-second">{{ DataDateUtils.formatDate(loader.content.value.publishAt, 'YYYY-MM-dd') }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="p-3 radius-ll bg-light mt-3">
|
|
|
|
|
|
|
+ <FlexCol :padding="30" :gap="20">
|
|
|
|
|
+ <H3 class="size-ll color-title-text">{{ loader.content.value.title }}</H3>
|
|
|
|
|
+ <FlexRow :gap="20">
|
|
|
|
|
+ <Text v-if="loader.content.value.from" color="text.second" :size="28">来源:{{ loader.content.value.from }}</Text>
|
|
|
|
|
+ <Text v-if="loader.content.value.keywords" color="text.second" :size="28">{{ loader.content.value.keywords.join(' ') }}</Text>
|
|
|
|
|
+ <Text color="text.second" :size="28">{{ DataDateUtils.formatDate(loader.content.value.publishAt, 'YYYY-MM-dd') }}</Text>
|
|
|
|
|
+ </FlexRow>
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
+ <Touchable
|
|
|
|
|
+ direction="row" align="center"
|
|
|
|
|
+ justify="space-between" :margin="30"
|
|
|
|
|
+ backgroundColor="white" :radius="20"
|
|
|
|
|
+ >
|
|
|
|
|
+ <FlexRow :padding="20" :gap="20" align="center">
|
|
|
|
|
+ <Image
|
|
|
|
|
+ :src="loader.content.value.image"
|
|
|
|
|
+ width="80"
|
|
|
|
|
+ height="80"
|
|
|
|
|
+ radius="10"
|
|
|
|
|
+ mode="aspectFill"
|
|
|
|
|
+ />
|
|
|
|
|
+ <FlexCol >
|
|
|
|
|
+ <Text bold>{{ loader.content.value.villageName }}</Text>
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
+ </FlexRow>
|
|
|
|
|
+ <Icon icon="arrow-right" />
|
|
|
|
|
+ </Touchable>
|
|
|
|
|
+ <FlexCol :padding="30">
|
|
|
<Parse
|
|
<Parse
|
|
|
v-if="loader.content.value.content"
|
|
v-if="loader.content.value.content"
|
|
|
:content="loader.content.value.content"
|
|
:content="loader.content.value.content"
|
|
|
:tagStyle="commonParserStyle"
|
|
:tagStyle="commonParserStyle"
|
|
|
/>
|
|
/>
|
|
|
- <text v-if="emptyContent">暂无简介</text>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <Text v-if="emptyContent">暂无简介</Text>
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
|
|
|
<!-- 推荐 -->
|
|
<!-- 推荐 -->
|
|
|
- <view v-if="recommendListLoader.content.value?.length" class="d-flex flex-col p-3">
|
|
|
|
|
- <text class="size-base text-bold mb-3">相关推荐</text>
|
|
|
|
|
|
|
+ <FlexCol v-if="recommendListLoader.content.value?.length" :padding="30">
|
|
|
|
|
+ <H5>相关推荐</H5>
|
|
|
<Box2LineImageRightShadow
|
|
<Box2LineImageRightShadow
|
|
|
class="w-100"
|
|
class="w-100"
|
|
|
titleColor="title-text"
|
|
titleColor="title-text"
|
|
@@ -56,15 +78,15 @@
|
|
|
:image="item.image || AppCofig.defaultImage"
|
|
:image="item.image || AppCofig.defaultImage"
|
|
|
:title="item.title"
|
|
:title="item.title"
|
|
|
:desc="item.desc"
|
|
:desc="item.desc"
|
|
|
- :badge="item.badge"
|
|
|
|
|
|
|
+ :badge="item.villageName"
|
|
|
:wideImage="true"
|
|
:wideImage="true"
|
|
|
@click="goDetails(item.id)"
|
|
@click="goDetails(item.id)"
|
|
|
/>
|
|
/>
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
+ </FlexCol>
|
|
|
</template>
|
|
</template>
|
|
|
</SimplePageContentLoader>
|
|
</SimplePageContentLoader>
|
|
|
- </view>
|
|
|
|
|
|
|
+ </FlexCol>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
@@ -82,37 +104,41 @@ import Parse from "@/components/display/parse/Parse.vue";
|
|
|
import Box2LineImageRightShadow from "@/common/components/parts/Box2LineImageRightShadow.vue";
|
|
import Box2LineImageRightShadow from "@/common/components/parts/Box2LineImageRightShadow.vue";
|
|
|
import AppCofig from "@/common/config/AppCofig";
|
|
import AppCofig from "@/common/config/AppCofig";
|
|
|
import VillageInfoApi from "@/api/inhert/VillageInfoApi";
|
|
import VillageInfoApi from "@/api/inhert/VillageInfoApi";
|
|
|
|
|
+import Tag from "@/components/display/Tag.vue";
|
|
|
|
|
+import FlexRow from "@/components/layout/FlexRow.vue";
|
|
|
|
|
+import FlexCol from "@/components/layout/FlexCol.vue";
|
|
|
|
|
+import Icon from "@/components/basic/Icon.vue";
|
|
|
|
|
+import Image from "@/components/basic/Image.vue";
|
|
|
|
|
+import Text from "@/components/basic/Text.vue";
|
|
|
|
|
+import H5 from "@/components/typography/H5.vue";
|
|
|
|
|
+import H3 from "@/components/typography/H3.vue";
|
|
|
|
|
+import Touchable from "@/components/feedback/Touchable.vue";
|
|
|
|
|
|
|
|
const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || []);
|
|
const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || []);
|
|
|
const emptyContent = computed(() => (loader.content.value?.content || '').trim() === '');
|
|
const emptyContent = computed(() => (loader.content.value?.content || '').trim() === '');
|
|
|
|
|
|
|
|
const loader = useSimplePageContentLoader(async () => {
|
|
const loader = useSimplePageContentLoader(async () => {
|
|
|
- const res = await VillageInfoApi.getInfoForDiscover(
|
|
|
|
|
- querys.value.collectModelId,
|
|
|
|
|
- querys.value.id,
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ const res = await VillageInfoApi.getInfoForDiscover(querys.value.id);
|
|
|
uni.setNavigationBarTitle({ title: res.title });
|
|
uni.setNavigationBarTitle({ title: res.title });
|
|
|
return res;
|
|
return res;
|
|
|
});
|
|
});
|
|
|
const recommendListLoader = useSimpleDataLoader(async () => {
|
|
const recommendListLoader = useSimpleDataLoader(async () => {
|
|
|
- if (!querys.value.collectModelId)
|
|
|
|
|
|
|
+ if (!querys.value.keywords)
|
|
|
return []
|
|
return []
|
|
|
- return (await VillageInfoApi.getListForDiscover(querys.value.collectModelId, 1, 5))
|
|
|
|
|
|
|
+ return (await VillageInfoApi.getListForDiscover(1, 5, querys.value.keywords))
|
|
|
.list
|
|
.list
|
|
|
.filter((p) => p.id !== querys.value.id);
|
|
.filter((p) => p.id !== querys.value.id);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const { querys } = useLoadQuerys({
|
|
const { querys } = useLoadQuerys({
|
|
|
id: 0,
|
|
id: 0,
|
|
|
- collectModelId: 0,
|
|
|
|
|
- collectModelInternalName: '',
|
|
|
|
|
|
|
+ keywords: '',
|
|
|
}, (t) => loader.loadData(t));
|
|
}, (t) => loader.loadData(t));
|
|
|
|
|
|
|
|
function goDetails(id: number) {
|
|
function goDetails(id: number) {
|
|
|
navTo('details', {
|
|
navTo('details', {
|
|
|
- id,
|
|
|
|
|
- collectModelId: querys.value.collectModelId,
|
|
|
|
|
- collectModelInternalName: querys.value.collectModelInternalName
|
|
|
|
|
|
|
+ id,
|
|
|
|
|
+ keywords: querys.value.keywords,
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|