minnan-website/src/views/details/ArtifactDetailView.vue

<template>
  <!-- 文物详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0 small-h">
      <SimplePageContentLoader :loader="loader">
        <div v-if="loader.content.value" class="content news-detail">
          <h1>{{ loader.content.value.title }}</h1>
          <p class="small-info">
            {{ loader.content.value.address }} 
          </p>

          <!-- 轮播 -->
          <Carousel 
            :itemsToShow="1"
            wrapAround
            :autoPlay="5000"
            class="carousel"
          >
            <Slide v-for="(image, key) in loader.content.value.images" :key="key">
              <img :src="image" />
            </Slide>
            <template #addons>
              <Navigation />
              <Pagination />
            </template>
          </Carousel>

          <div class="info-list mb-2">
            <div class="entry">
              <div class="label">开放时间：</div>
              <div class="value">{{ loader.content.value.openStatusText }}</div>
            </div>
            <div class="entry">
              <div class="label">年代：</div>
              <div class="value">{{ loader.content.value.age }}</div>
            </div>
            <div class="entry">
              <div class="label">文物类型：</div>
              <div class="value">{{ loader.content.value.crTypeText }}</div>
            </div>
            <div class="entry">
              <div class="label">所属区域：</div>
              <div class="value">{{ loader.content.value.regionText }}</div>
            </div>
            <div class="entry">
              <div class="label">级别：</div>
              <div class="value">{{ loader.content.value.levelText }}</div>
            </div>
            <div class="entry">
              <div class="label">保护范围：</div>
              <div class="value">
                <SimpleRichHtml 
                  :contents="[loader.content.value.protectedArea as string]" 
                />
              </div>
            </div>
          </div>

          <SimpleRichHtml 
            class="news-content"
            :contents="[
              loader.content.value.intro,
              loader.content.value.value,
              loader.content.value.content,
            ]" 
          />
          <ContentNode />

          <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>
      </SimplePageContentLoader>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import type { GetContentDetailItem } from '@/api/CommonContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
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 loader = useSimpleDataLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  return await UnmoveableContent.getContentDetail(params.id);
});

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

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

<style lang="scss">

</style>