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

<template>
  <FlexCol :padding="30">
    <SearchBar
      v-model="searchText"
      placeholder="搜一搜" 
      @confirm="search"
    />
    <Height :height="20" />
    <SimplePageListLoader :loader="listLoader" :noEmpty="true">
      <template #empty>
        <Empty image="search" description="这里还没提交过投稿，快来去写吧！">
        </Empty>
      </template>
      <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"
            :showFailed="false"
            :width="100"
            :height="100"
            :radius="10"
            mode="aspectFill"
            round
          />
          <FlexCol>
            <H4 :size="36">{{ item.title }}</H4>
            <Text :size="23">{{ item.desc }}</Text>
          </FlexCol>
        </Touchable>
      </FlexCol>
    </SimplePageListLoader>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useCollectStore } from '@/store/collect';
import { useAuthStore } from '@/store/auth';
import { navTo } from '@/components/utils/PageAction';
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 SearchBar from '@/components/form/SearchBar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';
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';

const searchText = ref('');
const authStore = useAuthStore();

const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  title: string,
  desc: string
}, {
  villageId: number,  
  villageVolunteerId: number,
}>(8, async (page, pageSize, params) => {
  if (!params )
    throw new Error("未传入参数，当前页面需要参数");
  let res = await VillageInfoApi.getList(
    undefined,
    '',
    undefined,
    undefined,
    params.villageId,
    params.villageVolunteerId,
    undefined,
    page,
    pageSize,
  )
  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,
      desc: DataDateUtils.formatDate(item.updatedAt, 'YYYY-MM-dd') + (
        authStore.isAdmin ? (' 投稿人：' + item.villageVolunteerName) : ''
      )
    }
  })
  return {
    list: list,
    total: list.length,
  };
});
function goDetail(id: number) {
  navTo('common', { 
    id,
    villageId: querys.value.villageId,
    villageVolunteerId: querys.value.villageVolunteerId,
  });
}
function search() {
  listLoader.loadData(undefined, true);
}

const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
}, async (querys) => {
  listLoader.loadData(querys)
});

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

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