mingnan-website/src/views/NewsDetailView.vue

<template>
  <!-- 资讯详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0 small-h">
      <SimplePageContentLoader :loader="newsLoader">
        <div v-if="newsLoader.content.value" class="content news-detail">
          <div class="d-flex flex-row justify-content-start">
            <div class="back-button2" @click="back">
              <img src="@/assets/images/news/IconBack.png" />
              <span>返回列表</span>
            </div>
          </div>

          <h1>{{ newsLoader.content.value.title }}</h1>
          <div class="d-flex flex-row justify-content-center">
            <span v-if="newsLoader.content.value.from" class="small-info">转自：{{ newsLoader.content.value.from }}</span>
            <span class="small-info">时间：{{ DateUtils.formatDate(newsLoader.content.value.publishAt, DateUtils.FormatStrings.YearCommonShort) }}</span>
          </div>
   
          <video 
            v-if="newsLoader.content.value.audio"
            class="news-video mt-3"
            controls
            :src="newsLoader.content.value.audio" 
          />
          <video 
            v-else-if="newsLoader.content.value.video"
            class="news-video mt-3"
            controls
            :src="newsLoader.content.value.video" 
          />

          <SimpleRichHtml 
            class="news-content mt-3"
            :contents="[
              newsLoader.content.value.intro,
              newsLoader.content.value.value,
              newsLoader.content.value.content,
            ]" 
          >
            <template #prepend>
              
              <!-- 轮播 -->
              <Carousel 
                v-if="!newsLoader.content.value.video && !newsLoader.content.value.audio && newsLoader.content.value.images.length > 0"
                :itemsToShow="1"
                wrapAround
                :autoPlay="5000"
                class="carousel float"
              >
                <Slide v-for="(image, key) in newsLoader.content.value.images" :key="key">
                  <img :src="image" />
                </Slide>
                <template #addons>
                  <Navigation />
                  <Pagination />
                </template>
              </Carousel>
            </template>
          </SimpleRichHtml>

          <div class="row d-flex justify-content-center">
            <div class="back-button" @click="back">
              <img src="@/assets/images/news/IconBack.png" />
              <span>返回列表</span>
            </div>
          </div>
          <ContentNode />

          <!-- <div class="row pt-3 pt-md-4 pt-lg-5">
            <div class="col-12 col-md-6 col-lg-6 col-xl-6 d-flex justify-content-start">
              <span class="small-info">上一篇：????</span>
            </div>
            <div class="col-12 col-md-6 col-lg-6 col-xl-6 d-flex justify-content-end">
              <span class="small-info">下一篇：????</span>
            </div>
          </div> -->

        </div>
      </SimplePageContentLoader>
    </section>


  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import type { GetContentDetailItem } from '@/api/CommonContent';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import DateUtils from '@/common/utils/DateUtils';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
import { useLoadQuerys } from '@/composeable/PageQuerys';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import ContentNode from '@/components/content/ContentNode.vue';

const router = useRouter();
const newsLoader = useSimpleDataLoader<GetContentDetailItem, { 
  id: number,
  modelId: number,
}>(async (p) => {
  if (!p)
    throw new Error('参数错误');
  return (await NewsIndexContent.getContentDetail<GetContentDetailItem>(p.id, p.modelId ? p.modelId : undefined));
}, false)

useLoadQuerys({
  id: 0,
  modelId: 0,
}, async (p) => {
  if (p.id <= 0) {
    router.push({ name: 'NotFound' });
    return;
  }
  newsLoader.loadData(p);
})

function back() {
  router.back();
}
</script>