xiangyuan-app/src/pages/dig/forms/list.vue

<template>
  <FlexCol :padding="30">
    <FlexRow justify="space-between">
      <SearchBar
        v-model="searchText"
        placeholder="搜一搜" 
        :innerStyle="{ width: '460rpx' }"
        @confirm="search"
      />
      <Button type="primary" @click="newData">+ 新增</Button>
    </FlexRow>
    <Height :height="20" />
    <FlexCol :gap="20">
      <Touchable 
        v-for="item in listLoader.list.value"
        :key="item.id" 
        :gap="20"
        :padding="[15,20]"
        :radius="15"
        align="center"
        backgroundColor="white"
        direction="row"
        touchable
        @click="goDetail(item.id)"
      >
        <Image 
          :src="item.image"
          defaultImage="https://mn.wenlvti.net/app_static/minnan/EmptyImage.png"
          failedImage="https://mn.wenlvti.net/app_static/minnan/EmptyImage.png"
          :showFailed="false"
          :width="100"
          :height="100"
          :radius="10"
          mode="aspectFill"
          round
        />
        <FlexCol>
          <H4 :size="36">{{ item.title }}</H4>
          <Text :size="23">{{ item.date }}</Text>
        </FlexCol>
      </Touchable>
    </FlexCol>
    <SimplePageListLoader :loader="listLoader" :noEmpty="true">
      <template #empty>
        <Empty image="search" text="这里还没有数据，快来编写完善吧！">
          <Button type="primary" :text="`+ 新增${subTitle}数据`" @click="newData" />
        </Empty>
      </template>
    </SimplePageListLoader>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { ref } from 'vue';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import Image from '@/components/basic/Image.vue';
import Empty from '@/components/feedback/Empty.vue';
import Button from '@/components/basic/Button.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import { navTo } from '@/components/utils/PageAction';
import Height from '@/components/layout/space/Height.vue';
import H4 from '@/components/typography/H4.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import { useCollectStore } from '@/store/collect';
import { onPullDownRefresh } from '@dcloudio/uni-app';

const subTitle = ref('');
const searchText = ref('');
const collectStore = useCollectStore();
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  title: string,
  date: string
}, {
  villageId: number,  
  villageVolunteerId: number,
  subType: string,
  subId: number,
  subKey: string,
}>(8, async (page, pageSize, params) => {
  if (!params )
    throw new Error("未传入参数，当前页面需要参数");
  if (!params.subType)
    throw new Error("params.subType");
  if (!params.villageId)
    throw new Error("params.villageId");
  if (!params.villageVolunteerId)
    throw new Error("params.villageId");
  let res = (page == 1 ? await VillageInfoApi.getList(
    collectStore.getCollectModuleId(params.subType),
    params.subType,
    params.subKey ? params.subId : undefined,
    params.subKey,
    params.villageId,
    params.villageVolunteerId,
  ) : [])
  if (searchText.value)
    res = res.filter((p) => p.title.includes(searchText.value));
  const list = res.map((item) => {
    return {
      id: item.id,
      image: item.image,
      title: item.title,
      date: DataDateUtils.formatDate(item.updatedAt, 'YYYY-MM-dd'),
    }
  })
  return {
    list: list,
    total: list.length,
  };
});

function newData() {
  navTo('common', { 
    id: -1,
    villageId: querys.value.villageId,  
    villageVolunteerId: querys.value.villageVolunteerId,  
    subType: querys.value.subType,  
    subId: querys.value.subId,  
  });
}
function goDetail(id: number) {
  navTo('common', { 
    id,
    villageId: querys.value.villageId,
    villageVolunteerId: querys.value.villageVolunteerId,
    catalogId: querys.value.catalogId,
    subType: querys.value.subType,
    subKey: querys.value.subKey,
    subId: querys.value.subId,
    subTitle: querys.value.subTitle,
  });
}
function search() {
  listLoader.loadData(undefined, true);
}

const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
  catalogId: 0,
  subType: '',
  subKey: '',
  subId: 0,
  subTitle: '',
}, async (querys) => {
  if (querys.subTitle) {
    subTitle.value = querys.subTitle;
    uni.setNavigationBarTitle({  title: subTitle.value + '列表', })
  }
  listLoader.loadData(querys)
});

onPullDownRefresh(() => {
  listLoader.loadData(undefined, true);
});

defineExpose({
  onPageBack(name: string, param: any) {
    if (param && param.needRefresh)
      listLoader.loadData(undefined, true);
  }
})
</script>