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

<template>
  <FlexCol :padding="30">
    <SearchBar
      v-model="searchText"
      placeholder="搜一搜" 
      @search="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" 
          :padding="[15,20]"
          :radius="15"
          justify="space-between"
          align="center"
          backgroundColor="white"
          direction="row"
          touchable
          @click="goDetail(item)"
        >
          <FlexRow align="center" :gap="20">
            <Image 
              :src="item.image"
              :showFailed="false"
              :width="150"
              :height="150"
              :radius="10"
              mode="aspectFill"
              round
            />
            <FlexCol>
              <H4 :size="36">{{ item.title }}</H4>
              <Height :height="10" />
              <Text :size="23" :text="`栏目： ${item.catalogName || item.collectModuleName || ''}`" />
              <Text :size="23" :text="`时间： ${DataDateUtils.formatDate(item.updatedAt, 'YYYY-MM-dd')}`" />
              <FlexRow align="center">
                <Text :size="23" :text="`状态：`" />
                <Tag 
                  size="small"
                  :text="(item.statusText as string)" 
                  :type="selectObjectByType(item.status as string, '0', {
                    '-1': 'danger',
                    '0': 'default',
                    '1': 'warning',
                    '2': 'primary',
                    '3': 'primary',
                    '4': 'success',
                  })" 
                />
              </FlexRow>
            </FlexCol>
          </FlexRow>
          <Icon icon="arrow-right-bold" color="primary" :size="36" />
        </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 { selectObjectByType } from '@/components/theme/ThemeTools';
import { navTo } from '@/components/utils/PageAction';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import VillageInfoApi, { CommonInfoModel } 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';
import FlexRow from '@/components/layout/FlexRow.vue';
import Tag from '@/components/display/Tag.vue';
import Icon from '@/components/basic/Icon.vue';
import { waitTimeOut } from '@imengyu/imengyu-utils';

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

const listLoader = useSimplePageListLoader<CommonInfoModel>(8, async (page, pageSize) => {
  let res = await VillageInfoApi.getList(
    undefined,
    '',
    undefined,
    undefined,
    querys.value.villageId,
    querys.value.villageVolunteerId,
    undefined,
    page,
    pageSize,
  )
  if (searchText.value)
    res = res.filter((p) => p.title.includes(searchText.value));
  return {
    list: res,
    total: res.length,
  };
});
function goDetail(item: CommonInfoModel) {
  navTo('common', { 
    id: item.id,
    villageId: querys.value.villageId,
    villageVolunteerId: querys.value.villageVolunteerId,
    catalogId: item.catalogId,
    subType:  collectStore.getCollectModuleInternalNameById(item.collectModuleId),
    subKey: '',
    subId: -1,
    subTitle: item.catalogName || item.collectModuleName || '',
  });
}
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>