minnan-website/pages/village/content.vue

<template>
  <div class="main-background main-background main-background-type2">
    <div class="nav-placeholder"></div>
    <section class="main-section">
      <div class="content">
        <SimplePageContentLoader :loader="newsLoader">
          <div class="d-flex flex-column details"> 
            <div class="nav-back-title">
              <img :src="BackArrow" @click="back" />
              <h2>{{ newsLoader.content.value?.title }}</h2>
            </div>
            <SimpleRichHtml 
              class="news-content mt-3"
              :contents="[
                newsLoader.content.value?.intro ?? '',
                newsLoader.content.value?.value ?? '',
                newsLoader.content.value?.content ?? '',
              ]" 
            />
            
            <ContentNode />
          </div>
        </SimplePageContentLoader>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useLoadQuerys } from '@/composeable/PageQuerys';
import BackArrow from '@/assets/images/BackArrow.png';
import CommonContent, { GetContentDetailItem } from '@/api/CommonContent';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
import ContentNode from '@/components/content/ContentNode.vue';

const router = useRouter();
const route = useRoute();

function back() {
  router.back();
}

watch(() => route.query.id, (newVal) => {
  newsLoader.loadData(undefined);
});

const newsLoader = useSimpleDataLoader<GetContentDetailItem, { id: number, modelId: number }>(async (p) => {
  if (!p)
    throw new Error('参数错误');
  return (await CommonContent.getContentDetail<GetContentDetailItem>(p.id, p.modelId ? p.modelId : undefined));
}, false)

useLoadQuerys({
  id: 0,
  modelId: 0,
}, async (p) => {
  if (p.id <= 0) {
    router.push({ path: '404' });
    return;
  }
  newsLoader.loadData(p);
})
</script>

<style>
</style>