minnan-website/src/views/details/TabDetailView.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">
          <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>{{ loader.content.value.title }}</h1>
          <p class="small-info">
            {{ loader.content.value.address }} 
          </p>

          <!-- Tab -->
          <TagBar
            class="mb-3"
            :tags="contentProps.tabs.filter(p => p.visible).map((p, i) => ({ id: i, name: p.text })) || []"
            :margin="[30, 70]" 
            v-model:selectedTag="currentTabIndex"
          />

          <!-- 基础信息 -->
          <div v-if="currentTabIndex==0">
            <!-- 轮播 -->
            <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>

            <slot name="extraInfo" :content="loader.content.value" />

            <SimpleRichHtml 
              class="news-content"
              :contents="[
                loader.content.value.intro,
                loader.content.value.value,
                loader.content.value.content,
              ]" 
            />
          </div>
          <!-- 图片 -->
          <div v-else-if="currentTabIndex==1">
            <ImageGrid
              v-if="loader.content.value.images && loader.content.value.images.length > 0"
              :data="loader.content.value.images"
              imageHeight="300px"
              @itemClick="handleShowImage"
            >
            </ImageGrid>    
            <a-empty v-else />
          </div>
          <!-- 视频 -->
          <div v-else-if="currentTabIndex==2">
            <video 
              v-if="loader.content.value.video"
              class="news-video mt-3"
              controls
              :src="loader.content.value.video" 
            />
            <video 
              v-if="loader.content.value.audio"
              class="news-video mt-3"
              controls
              :src="loader.content.value.audio" 
            />
            <a-empty v-if="!loader.content.value.video && !loader.content.value.audio" />
          </div>
          <!-- 其他 -->
          <div v-else>
            <slot name="extraTab" :currentTabIndex="currentTabIndex" :content="loader.content.value" />
          </div>

          <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>
    <a-image
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible: imagePreviewVisible,
        onVisibleChange: (v: boolean) => imagePreviewVisible = v,
      }"
      :src="imagePreviewSrc"
    />
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import type { GetContentDetailItem } from '@/api/CommonContent';
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';
import { computed, ref, type PropType } from 'vue';
import TagBar from '@/components/content/TagBar.vue';
import ImageGrid from '@/components/content/ImageGrid.vue';

const props = defineProps({
  load: {
    type: Function as PropType<(id: number) => Promise<GetContentDetailItem>>,
    default: null,
  }
})

const imagePreviewVisible = ref(false);
const imagePreviewSrc = ref('');

function handleShowImage(url: string) {
  imagePreviewVisible.value = true;
  imagePreviewSrc.value = url;
}

const router = useRouter();
const loader = useSimpleDataLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  if (!props.load)
    throw new Error("!props.load");
  return props.load(params.id);
});

const currentTabIndex = ref(0);
const contentProps = computed(() => {
  return loader.content.value?.contentProps as {
    tabs: { 
      text: string,
      visible: boolean,
    }[],
  } ?? {
    tabs: [],
  };
})

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>