minnan-website/pages/village/list.vue

<template>
  <div class="main-background main-background main-background-type2">
    <div class="nav-placeholder"></div>
    <section class="main-section">
      <div class="content">
        <div class="details w-100">
          <!-- 传统村落 -->
          <CommonListBlock
            ref="list"
            :title="'传统村落'"
            showNav
            :dropDownNames="[]"
            :pageSize="8"
            :rowCount="1"
            :rowType="3"
            :load="loadData"
            :showDetail="showDetail"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import CommonListBlock from '@/components/content/CommonListBlock.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,
  selectedTag: number,
  searchText: string,
  dropDownValues: number[]
) {

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

  return { 
    page: page,
    total: res.total,
    data: res.list.map((item, index) => {
      return {
        id: item.id,
        title: item.title,
        desc: item.desc,
        image: item.thumbnail || item.image,
        addItems: [
          { name: '传承项目', text: item.title },
        ],
      };
    }),
  }
}

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

<style>
</style>