minnan-tv/src/views/Intangible/List.vue

<template>
  <main class="main-content main-bg main-bg1">
    <Header show-back />
    <div class="inner fill pt-0">
      <SimplePageListContentLoader class="list d-flex flex-col mt-3 flex-fill" :loader="loader">
        <GridList 
          class="flex-fill"
          :list="loader.list.value"
          :defaultImage="AppCofig.defaultImage" 
          :playAudio="detailPageName === 'Play'"
          @itemClick="handleClick"
        />
        <SimplePageListContentPager :loader="loader" />
      </SimplePageListContentLoader>
    </div>
  </main>
</template>

<script setup lang="ts">
import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch, type PropType } from 'vue';
import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
import SimplePageListContentPager from '@/components/SimplePageListContentPager.vue';
import GridList from '@/components/small/GridList.vue';
import Header from '@/components/parts/Header.vue';
import AppCofig from '@/common/config/AppCofig';

const emit = defineEmits(['itemClick']);
const route = useRoute();
const router = useRouter();
const loader = useSimplePagerDataLoader(16, async (page, size) => {
  let modelId = parseInt(route.query.modelId as string)
  let mainBodyColumnId = parseInt(route.query.mainBodyColumnId as string) as any;
  if (isNaN(mainBodyColumnId))
    mainBodyColumnId = undefined;
  return CommonContent.getContentList(new GetContentListParams()
    .setModelId(modelId)
    .setMainBodyColumnId(mainBodyColumnId as number)
  , page, size)
});
const detailPageName = computed(() => {
  let detailPageName = route.query.detailPageName as string;
  if (!detailPageName)
    detailPageName = 'ArticleDetail';
  return detailPageName;
})

function handleClick(item: GetContentListItem) {
  router.push({
    name: detailPageName.value,
    query: {
      id: item.id,
    }
  })
}
</script>

<style lang="scss" scoped>
.list {
  position: absolute;
  top: 2rem;
  left: 10%;
  right: 10%;
  bottom: 2rem;
}
</style>