mingnan-website/src/views/village/content.vue

<template>
  <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 ?? '',
        ]" 
      />
    </div>
  </SimplePageContentLoader>
</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';

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({ name: 'NotFound' });
    return;
  }
  newsLoader.loadData(p);
})
</script>

<style>
</style>