minnan-website/src/views/NewsDetailView.vue

<template>
  <!-- 资讯详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0">
      <SimplePageContentLoader :loader="newsLoader">
        <div v-if="newsLoader.content.value" class="content news-detail">
          <h1>{{ newsLoader.content.value.title }}</h1>
          <div class="row p-2 p-md-3 p-lg-4">
            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
              <span class="small-info">作者：{{ newsLoader.content.value.author || '管理员' }}</span>
            </div>
            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
              <span class="small-info">时间：{{ DateUtils.formatDate(newsLoader.content.value.publish_at, DateUtils.FormatStrings.YearCommon) }}</span>
            </div>
            <div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
              <span class="small-info">浏览量：{{ newsLoader.content.value.views }}</span>
            </div>
          </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" 
          />
          <!-- 轮播 -->
          <Carousel 
            v-else
            :itemsToShow="1"
            wrapAround
            :autoPlay="5000"
            class="carousel"
          >
            <Slide v-for="(image, key) in newsLoader.content.value.images" :key="key">
              <img :src="image" />
            </Slide>
            <template #addons>
              <Navigation />
              <Pagination />
            </template>
          </Carousel>

          <SimpleRichHtml 
            class="news-content mt-3"
            :contents="[
              newsLoader.content.value.intro,
              newsLoader.content.value.value,
              newsLoader.content.value.content,
            ]" 
          />

          <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>
          
          <!-- <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';

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>