|
|
@@ -0,0 +1,134 @@
|
|
|
+<template>
|
|
|
+ <view class="d-flex flex-column bg-base pb-45">
|
|
|
+ <SimplePageContentLoader :loader="loader">
|
|
|
+ <template v-if="loader.content.value">
|
|
|
+ <view class="d-flex flex-col">
|
|
|
+ <swiper
|
|
|
+ v-if="loader.content.value.images.length > 0"
|
|
|
+ circular
|
|
|
+ :indicator-dots="true"
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="3000"
|
|
|
+ :duration="1000"
|
|
|
+ class="height-500"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(item, key) in loader.content.value.images" :key="key">
|
|
|
+ <view class="item">
|
|
|
+ <image
|
|
|
+ :src="item"
|
|
|
+ class="w-100 height-500 radius-base"
|
|
|
+ mode="aspectFill"
|
|
|
+ @click="onPreviewImage(key)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <image
|
|
|
+ v-else-if="loader.content.value.image"
|
|
|
+ class="w-100 radius-base"
|
|
|
+ :src="loader.content.value.image"
|
|
|
+ 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">
|
|
|
+ <Parse
|
|
|
+ v-if="loader.content.value.content"
|
|
|
+ :content="loader.content.value.content"
|
|
|
+ :tagStyle="commonParserStyle"
|
|
|
+ />
|
|
|
+ <text v-if="emptyContent">暂无简介</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 推荐 -->
|
|
|
+ <view v-if="recommendListLoader.content.value?.length" class="d-flex flex-col p-3">
|
|
|
+ <text class="size-base text-bold mb-3">相关推荐</text>
|
|
|
+ <Box2LineImageRightShadow
|
|
|
+ class="w-100"
|
|
|
+ titleColor="title-text"
|
|
|
+ v-for="item in recommendListLoader.content.value"
|
|
|
+ :key="item.id"
|
|
|
+ :image="item.image || AppCofig.defaultImage"
|
|
|
+ :title="item.title"
|
|
|
+ :desc="item.desc"
|
|
|
+ :badge="item.badge"
|
|
|
+ :wideImage="true"
|
|
|
+ @click="goDetails(item.id)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </SimplePageContentLoader>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed } from "vue";
|
|
|
+import { useSimpleDataLoader } from "@/common/composeabe/SimpleDataLoader";
|
|
|
+import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
|
|
|
+import { useSwiperImagePreview } from "@/common/composeabe/SwiperImagePreview";
|
|
|
+import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
|
|
|
+import { navTo } from "@/components/utils/PageAction";
|
|
|
+import { onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
|
|
|
+import { DataDateUtils } from "@imengyu/js-request-transform";
|
|
|
+import commonParserStyle from "@/common/style/commonParserStyle";
|
|
|
+import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
|
|
|
+import Parse from "@/components/display/parse/Parse.vue";
|
|
|
+import Box2LineImageRightShadow from "@/common/components/parts/Box2LineImageRightShadow.vue";
|
|
|
+import AppCofig from "@/common/config/AppCofig";
|
|
|
+import VillageInfoApi from "@/api/inhert/VillageInfoApi";
|
|
|
+
|
|
|
+const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || []);
|
|
|
+const emptyContent = computed(() => (loader.content.value?.content || '').trim() === '');
|
|
|
+
|
|
|
+const loader = useSimplePageContentLoader(async () => {
|
|
|
+ const res = await VillageInfoApi.getInfoForDiscover(
|
|
|
+ querys.value.collectModelId,
|
|
|
+ querys.value.id,
|
|
|
+ );
|
|
|
+ uni.setNavigationBarTitle({ title: res.title });
|
|
|
+ return res;
|
|
|
+});
|
|
|
+const recommendListLoader = useSimpleDataLoader(async () => {
|
|
|
+ if (!querys.value.collectModelId)
|
|
|
+ return []
|
|
|
+ return (await VillageInfoApi.getListForDiscover(querys.value.collectModelId, 1, 5))
|
|
|
+ .list
|
|
|
+ .filter((p) => p.id !== querys.value.id);
|
|
|
+});
|
|
|
+
|
|
|
+const { querys } = useLoadQuerys({
|
|
|
+ id: 0,
|
|
|
+ collectModelId: 0,
|
|
|
+ collectModelInternalName: '',
|
|
|
+}, (t) => loader.loadData(t));
|
|
|
+
|
|
|
+function goDetails(id: number) {
|
|
|
+ navTo('details', {
|
|
|
+ id,
|
|
|
+ collectModelId: querys.value.collectModelId,
|
|
|
+ collectModelInternalName: querys.value.collectModelInternalName
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function getPageShareData() {
|
|
|
+ if (!loader.content.value)
|
|
|
+ return { title: '文章详情', imageUrl: '' }
|
|
|
+ return {
|
|
|
+ title: loader.content.value.title,
|
|
|
+ imageUrl: loader.content.value.images[0],
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onShareTimeline(() => {
|
|
|
+ return getPageShareData();
|
|
|
+})
|
|
|
+onShareAppMessage(() => {
|
|
|
+ return getPageShareData();
|
|
|
+})
|
|
|
+</script>
|