xiangyuan-app/src/pages/home/discover/details.vue

<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>