xiangyuan-app/src/pages/article/details.vue

<template>
  <FlexCol :padding="[0,0,50,0]">
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <FlexCol :gap="20">
          <swiper 
            v-if="loader.content.value.images.length > 0"
            circular 
            :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            :style="{ height: '500rpx' }"
          >
            <swiper-item v-for="(item, key) in loader.content.value.images" :key="key">
              <Image 
                :src="item" 
                width="100%"
                :height="500"
                :radius="20"
                mode="aspectFill"
                touchable
                @click="onPreviewImage(key)"
              />
            </swiper-item>
          </swiper>
          <Image 
            v-else-if="loader.content.value.image"
            :radius="20"
            :src="loader.content.value.image"
            mode="widthFix"
            width="100%"
          />
          <FlexCol :padding="20" :gap="14">
            <H2>{{ loader.content.value.title }}</H2>
            <FlexRow>
              <Text v-if="loader.content.value.from" :text="`来源：${loader.content.value.from}`" fontConfig="subText" />
              <Text :text="DataDateUtils.formatDate(loader.content.value.publishAt, 'YYYY-MM-dd')" fontConfig="subText" />
            </FlexRow>
          </FlexCol>
          <FlexCol :padding="20" :radius="20">
            <Parse
              v-if="loader.content.value.content"
              :content="loader.content.value.content"
            />
            <Text v-if="emptyContent" fontConfig="subText">暂无简介</Text>
          </FlexCol>
          
          <!-- 推荐 -->
          <FlexCol v-if="recommendListLoader.content.value?.length" :padding="20">
            <H4>相关推荐</H4>
            <Box2LineImageRightShadow
              titleColor="black"
              v-for="item in recommendListLoader.content.value"
              :key="item.id"
              :image="item.thumbnail || item.image || AppCofig.defaultImage"
              :title="item.title"
              :desc="item.desc"
              :badge="(item.badge as string)"
              :wideImage="true"
              @click="goDetails(item.id)"
            />
          </FlexCol>

          <!-- 广告 -->
          <ad />
        </FlexCol>
      </template>
    </SimplePageContentLoader>
  </FlexCol>
</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 type { GetContentDetailItem } from "@/api/CommonContent";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import Parse from "@/components/display/parse/Parse.vue";
import CommonContent, { GetContentListParams } from "@/api/CommonContent";
import Box2LineImageRightShadow from "@/common/components/parts/Box2LineImageRightShadow.vue";
import AppCofig from "@/common/config/AppCofig";
import FlexCol from "@/components/layout/FlexCol.vue";
import Image from "@/components/basic/Image.vue";
import H4 from "@/components/typography/H4.vue";
import Text from "@/components/basic/Text.vue";
import H2 from "@/components/typography/H2.vue";
import FlexRow from "@/components/layout/FlexRow.vue";

const loader = useSimplePageContentLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  const res = await CommonContent.getContentDetail(params.id);
  //console.log(res);
  uni.setNavigationBarTitle({ title: res.title });
  return res;
});

const { onPreviewImage } = useSwiperImagePreview(() => loader.content.value?.images || [])

const emptyContent = computed(() => (loader.content.value?.content || '').trim() === '')

const recommendListLoader = useSimpleDataLoader(async () => {
  if (!querys.value.modelId)
    return []
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(querys.value.modelId)
    .setMainBodyColumnId(querys.value.mainBodyColumnId)
    .setSelfValues({
      mainBodyId: querys.value.mainBodyId,
    })
  , 1, 10)).list.filter((p) => p.id !== querys.value.id);
});


function goDetails(id: number) {
  navTo('/pages/article/details', { 
    id, 
    mainBodyColumnId: querys.value.mainBodyColumnId, 
    modelId: querys.value.modelId,
    mainBodyId: querys.value.mainBodyId,
  });
}

const { querys } = useLoadQuerys({ 
  id: 0,
  mainBodyColumnId: 0,
  mainBodyId: 0,
  modelId: 0,
}, (t) => loader.loadData(t));

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>