imengyu
/
minnan-website


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<template>
  <!-- 资讯详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- SEO -->
    <Head>
      <Title>{{ newsLoader.content.value?.title }}</Title>
      <Meta name="description" :content="newsLoader.content.value?.desc" />
    </Head>
    <!-- 新闻 -->
    <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 gap-3" >
            <span v-if="newsLoader.content.value.from" class="small-info">来源：{{ newsLoader.content.value.from }}</span>
            <span v-if="newsLoader.content.value.regionText" class="small-info">区域：{{ newsLoader.content.value.regionText }}</span>
            <span class="small-info">时间：{{ DateUtils.formatDate(newsLoader.content.value.publishAt, DateUtils.FormatStrings.ShortDate) }}</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" 
          />

          <iframe 
            v-if="newsLoader.content.value.archives" 
            class="w-100 mt-3"
            :style="{ height: '90vh' }" 
            :src="(newsLoader.content.value.archives as string)" 
          />

          <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 large',
                  //!newsLoader.content.value.content ? 'large' : '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 '@imengyu/imengyu-utils';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import ContentNode from '@/components/content/ContentNode.vue';

const route = useRoute();
const router = useRouter();
const newsLoader = await useSSrSimpleDataLoader('detail', async () => {
  const id = Number(route.query.id);
  const modelId = route.query.modelId ? Number(route.query.modelId) : undefined;
  if (!id)
    throw new Error('参数错误');
  const z = (await NewsIndexContent.getContentDetail<GetContentDetailItem>(id, modelId)).toJSON();
  //console.log(z);
  return z;
}, false)

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