minnan-tv/src/views/Intangible/village/list.vue

<template>
  <Page>
    <div class="content">
      <!-- 传统村落 -->
      <TabCommonList
        :loader="loadData"
        class="h-100"
      />
    </div>
  </Page>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import TabCommonList from '@/views/Content/TabCommonList.vue';
import Page from '@/components/parts/Page.vue';

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

async function showDetail(item: any) {
  router.push({ path: '/village/content', query: { id: item.id } });
}
async function loadData(
  page: number, 
  pageSize: number,
) {

  const res = await CommonContent.getContentList(new GetContentListParams()
    .setModelId(Number(route.query.model_id))
    .setMainBodyColumnId(Number(route.query.main_body_column_id))
    .setSelfValues({
      region: Number(route.query.region),
    })
  , page, pageSize);

  return { 
    page: page,
    total: res.total,
    list: res.list
  }
}

watch(route, (newVal) => {
  list.value.reload();
})
</script>

<style scoped>
.content {
  position: absolute;
  top: 100px;
  left:  15%;
  right: 15%;
  bottom: 5%;
}
</style>