imengyu
/
minnan-website


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<template>
  <!-- 文物详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- SEO -->
    <Head>
      <Title>{{ loader.content.value?.title }}</Title>
      <Meta name="description" :content="loader.content.value?.desc" />
    </Head>
    <!-- 新闻 -->
    <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 mb-3">
            <div class="back-button2" @click="back">
              <img src="@/assets/images/news/IconBack.png" />
              <span>返回列表</span>
            </div>
          </div>

          <div class="d-flex flex-row justify-content-start">
            <h1 :class="{ 'title-box': loader.content.value.titleBox }">{{ loader.content.value.title }}</h1>
          </div>
          <p class="d-flex flex-row justify-content-between small-info">
            <span>{{ loader.content.value.address }}</span>
            <span v-if="loader.content.value.regionText">区域：{{ loader.content.value.regionText }}</span>
            <span v-if="loader.content.value.from" >来源：{{ loader.content.value.from }}</span>
          </p>

          <!-- Tab -->
          <TagBar
            class="mb-3"
            :tags="crrentVisibleTabs.map((p, i) => ({ id: p.id, name: p.text })) || []"
            :margin="[30, 70]" 
            v-model:selectedTag="currentTabId"
          />
          <!-- 基础信息 -->
          <div v-show="currentTabId==0">
            <SimpleRichHtml 
              class="news-content"
              :contents="[
                loader.content.value.intro,
                loader.content.value.content,
              ]" 
            >
              <template #prepend>
                <!-- 轮播 -->
                <Carousel 
                  :itemsToShow="1"
                  wrapAround
                  :autoPlay="5000"
                  class="carousel float"
                >
                  <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" />
              </template>
            </SimpleRichHtml>
          </div>
          <!-- 图片 -->
          <div v-show="currentTabId==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-show="currentTabId==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-show="currentTabId==3">
            <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>
          <!-- 其他 -->
          <slot name="extraTab" :currentTabId="currentTabId" :content="loader.content.value" />

          <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 { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRoute, useRouter } from 'vue-router';
import ContentNode from '@/components/content/ContentNode.vue';
import { computed, onMounted, ref, watch, 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 route = useRoute();
const router = useRouter();

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

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

const loader = await useSSrSimpleDataLoader('details' + route.query.id, async () => {
  if (!props.load)
    throw new Error("!props.load");
  return (await props.load(Number(route.query.id))).toJSON();
}, false);

watch(() => route.query.id, (v) => {
  if (!v)
    return;
  loader.loadData(undefined, true);
})

const crrentVisibleTabs = computed(() => contentProps.value.tabs.filter((item) => item.visible));

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

watch(route, () => {
  currentTabId.value = 0;
});
onMounted(() => {
  currentTabId.value = 0;
})

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

<style lang="scss">

</style>