minnan/src/pages/article/details.vue

<template>
  <FlexCol backgroundColor="background.page">
    <FlexCol position="absolute" :top="0" :left="0" :right="0" :zIndex="100">
      <StatusBarSpace backgroundColor="transparent" />
      <NavBar leftButton="back" :iconProps="{ color: 'white' }" textColor="white" />
    </FlexCol>
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <view class="d-flex flex-col">
          <ImageSwiper 
            v-if="loader.content.value.images.length > 0"
            :images="loader.content.value.images"
            height="500rpx"
          />
          <Image 
            v-else-if="loader.content.value.image"
            width="100%"
            height="500rpx"
            :radius="15"
            :src="loader.content.value.image"
            :defaultImage="AppCofig.defaultImage"
            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 text-nowrap">{{ DataDateUtils.formatDate(loader.content.value.publishAt, 'YYYY-MM-dd') }}</text>
            </view>
          </view>
          <view v-if="archiveInfo.hasArchive" class="mt-3">
            <Box2LineImageRightShadow
              class="w-100"
              titleColor="title-text"
              title2
              :image="archiveInfo.archiveIcon"
              :title="loader.content.value.title"
              desc="点击查看完整文档"
              @click="goArchive(loader.content.value.id)"
            />
          </view>
          <view class="p-3 radius-ll bg-light mt-3">
            <Parse
              v-if="loader.content.value.content"
              :content="loader.content.value.content"
            />
            <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.thumbnail || item.image || AppCofig.defaultImage"
              :title="item.title"
              :desc="item.desc"
              :wideImage="true"
              @click="goDetails(item.id)"
            />
          </view>

          <ContentNote />
          <LikeFooter :content="loader.content.value">
            <template #left>
              <ArticleCorrect :content="loader.content.value" />
            </template>
          </LikeFooter>
        </view>
      </template>
    </SimplePageContentLoader>
    <Footer text="到底了~" />
  </FlexCol>
</template>

<script setup lang="ts">
import type { GetContentDetailItem } from "@/api/CommonContent";
import { onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
import { DataDateUtils } from "@imengyu/js-request-transform";
import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
import { useSwiperImagePreview } from "@/common/composeabe/SwiperImagePreview";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import NewsIndexContent from "@/api/news/NewsIndexContent";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import ContentNote from "../parts/ContentNote.vue";
import Parse from "@/components/display/parse/Parse.vue";
import { computed } from "vue";
import { useSimpleDataLoader } from "@/common/composeabe/SimpleDataLoader";
import { navTo } from "@/components/utils/PageAction";
import CommonContent, { GetContentListParams } from "@/api/CommonContent";
import Box2LineImageRightShadow from "../parts/Box2LineImageRightShadow.vue";
import AppCofig from "@/common/config/AppCofig";
import LikeFooter from "../parts/LikeFooter.vue";
import Image from "@/components/basic/Image.vue";
import ArticleCorrect from "../parts/ArticleCorrect.vue";
import ImageSwiper from "../parts/ImageSwiper.vue";
import IconExcel from '@/components/images/files/excel.png';
import IconPowerpoint from '@/components/images/files/powerpoint.png';
import IconUnknown from '@/components/images/files/unknown.png';
import IconWord from '@/components/images/files/word.png';
import IconPdf from '@/components/images/files/pdf.png';
import { StringUtils } from "@imengyu/imengyu-utils";
import Icon from "@/components/basic/Icon.vue";
import FlexCol from "@/components/layout/FlexCol.vue";
import Footer from "@/components/display/Footer.vue";
import NavBar from "@/components/nav/NavBar.vue";
import StatusBarSpace from "@/components/layout/space/StatusBarSpace.vue";

const loader = useSimplePageContentLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  const res = await NewsIndexContent.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 archiveInfo = computed(() => {
  const hasArchive = Boolean(loader.content.value?.archives);
  let fileIcon = IconUnknown;
  const ext = StringUtils.path.getFileExt(loader.content.value?.archives || '');
  switch (ext) {
    case 'excel': 
    case 'xls': 
    case 'xlsx': 
      fileIcon = IconExcel;
      break;
    case 'powerpoint': 
    case 'ppt': 
    case 'pptx': 
      fileIcon = IconPowerpoint;
      break;
    case 'word': 
    case 'docx': 
    case 'doc': 
    case 'txt': 
    case 'rtf': 
      fileIcon = IconWord;
      break;
    case 'pdf': 
      fileIcon = IconPdf;
      break;
  }
  return {
    hasArchive,
    archiveIcon: hasArchive ? fileIcon : IconUnknown,
  }
})

const recommendListLoader = useSimpleDataLoader(async () => {
  if (!querys.value.modelId)
    return []
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(querys.value.modelId)
    .setMainBodyColumnId(querys.value.mainBodyColumnId)
  , 1, 10)).list
    .filter((p) => p.id !== querys.value.id)
    .map((p) => ({
      ...p,
      desc: `${p.from ? `来源：${p.from}` : ''}\n${p.desc || ''}`,
    }));
});

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

const { querys } = useLoadQuerys({ 
  id: 0,
  mainBodyColumnId: 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>