gjjd-pc/pages/news/index.vue

<template>
  <PageBanner />
  <CardList :list="list" :disabled="disabled" @done="onSearch" />

</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
import CardList from './components/CardList.vue';

const route = useRoute();

// 页面信息
const runtimeConfig = useRuntimeConfig();
const list = ref<CmsArticle[]>([]);
const page = ref<number>(1);
const resultText = ref('');
const disabled = ref<boolean>(false);

// 搜索表单
const where = reactive<CmsArticleParam>({
  keywords: ''
});

const handleClick = (e:any) => {
  console.log(e.index)
}

const onSearch = () => {
  if(!disabled.value){
    page.value++;
    reload(route.path);
  }
}

// 请求数据
const reload = async (path: string) => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page',{baseURL: runtimeConfig.public.apiServer, params: {
      page: page.value,
      limit: 8,
      categoryId: getIdBySpm(5),
      keywords: where.keywords
    }})
  if(response.value?.data){
    if (list.value.length < response.value?.data.count) {
      disabled.value = false;
      if (response.value?.data.list) {
        list.value = list.value.concat(response.value?.data.list);
      }
    }else {
      disabled.value = true;
    }
    if(response.value.data.count == 0){
      resultText.value = '暂无相关结果'
    }
  }
}

useHead({
  title: `社区 - ${localStorage.getItem('SiteName')}`,
  bodyAttrs: {
    class: "page-container",
  }
});

watch(
    () => route.path,
    (path) => {
      reload(path);
    },
    { immediate: true }
);
</script>