websoft-cms/pages/product/index.vue

<template>
  <PageBanner :layout="layout" :title="`${form?.categoryName}`" :desc="`${form?.comments}`" />
  <CardList :param="{type: 0,official: true}" :list="list" :disabled="disabled" @done="onSearch" />
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {Navigation} from "~/api/cms/navigation/model";
import type {Company, CompanyParam} from "~/api/system/company/model";
import CardList from './components/CardList.vue';

const route = useRoute();

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

// 获取状态
const form = ref<Navigation>();

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

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

// 请求数据
const reload = async (path: string) => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<Company>>>('/system/company/pageAll',{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 = '暂无相关结果'
    }
  }
}

const { data: nav } = await useServerRequest<ApiResult<Navigation>>(`/cms/cms-navigation/${getIdBySpm(5)}`)
if(nav.value?.data){
  form.value = nav.value?.data;
  useHead({
    title: `${form.value.title} - WEBSOFT`,
    bodyAttrs: {
      class: "page-container",
    }
  });
}
// 页面布局
if(form.value?.layout){
  layout.value = JSON.parse(form.value?.layout)
}



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