xiangyuan-app/src/pages/dig/admin.vue

<template>
  <FlexCol :padding="30">
    <FlexRow justify="space-between">
      <SearchBar
        v-model="searchText"
        placeholder="搜一搜" 
        :innerStyle="{ width: '460rpx' }"
        @confirm="search"
      />
      <NButton type="primary" @click="newData">+ 新增</NButton>
    </FlexRow>
    <FlexCol :gap="20" :margin="[20,0,0,0]">

      <button class="remove-button-style" open-type="share">
        <Touchable 
          direction="column"
          center 
          :padding="20"
          :height="300"
          :innerStyle="{
            backgroundImage: `url('https://mn.wenlvti.net/app_static/xiangyuan/images/share-btn.jpg')`,
            backgroundSize: 'cover',
          }"
          @click=""
        >
          <FlexCol position="relative">
            <Icon icon="smile-filling" color="primary" :size="156" />
            <Icon icon="share" color="warning" :size="56" :innerStyle="{ position: 'absolute', bottom: 0, right: '-40rpx' }" />
          </FlexCol>
          <Height :height="20" />
          <Text :fontSize="26" color="primary" text="分享给志愿者注册，加入志愿者队伍" />
        </Touchable>
      </button>

      <FlexRow 
        v-for="item in listLoader.list.value"
        :key="item.id" 
        backgroundColor="white" 
        radius="20"
        :padding="20"
        :gap="20"
        @click="goDetail(item.id)"
      >
        <Image :src="item.image" width="150rpx" height="150rpx" round radius="30" />
        <FlexCol>
          <Text :fontSize="36" bold :text="`${item.name} ${item.sex === 0 ? '男' : '女'}`" />
          <Text :fontSize="26" :text="`手机：${item.mobile}`" />
          <Text :fontSize="26" :text="`地址：${item.address || ''}`" />
          <Text :fontSize="26" :text="`可采编：${item.collectModuleText || '暂无'}`" />
        </FlexCol>
      </FlexRow>
    </FlexCol>
    <SimplePageListLoader :loader="listLoader" :noEmpty="true">
      <template #empty>
        <Empty image="search" text="暂无数据，点击按钮新增数据">
          <Button type="primary" @click="newData">+ 新增数据</Button>
        </Empty>
      </template>
    </SimplePageListLoader>
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import VillageApi from '@/api/inhert/VillageApi';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import NButton from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Empty from '@/components/feedback/Empty.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Height from '@/components/layout/space/Height.vue';
import { onShareAppMessage } from '@dcloudio/uni-app';

const { querys } = useLoadQuerys({ 
  id: 0,  
  name: '',
  points: 0,
  level: 0,
  villageVolunteerId: 0,
}, () => {
  listLoader.loadData(undefined, true);
});

const searchText = ref('');
const listLoader = useSimplePageListLoader(8, async (page, pageSize, params) => {
  if (page === 1) {
    let res = await VillageApi.getVillageVolunteerList(querys.value.id);
    if (searchText.value)
      res = res.filter((p) => p.name.includes(searchText.value));
    return {
      page,
      total: res.length,
      list: res.map((item) => ({
        ...item,
        title: `${item.name} ${item.sex === 0 ? '男' : '女'} 手机号：${item.mobile} 地址：${item.address || ''}`,
        desc: `可采编：${item.collectModuleText || '暂无'}`,
      })),
    }
  }
  return {
    page,
    total: 0,
    list: [],
  }
});

function newData() {
  navTo('./admin/volunteer', { 
    id: -1,
    villageId: querys.value.id,  
    villageVolunteerId: querys.value.villageVolunteerId,  
  });
}
function goDetail(id: number) {
}
function search() {
  listLoader.loadData(undefined, true);
}

onShareAppMessage(() => ({
  title: '邀请你成为村社挖掘志愿者',
  desc: '分享给你的志愿者可以采编村社文化资源信息，加入志愿者队伍，为村社贡献力量。',
  path: '/pages/dig/sharereg/share-reg-page',
  imageUrl: 'https://mn.wenlvti.net/app_static/xiangyuan/images/share-post.jpg',
}))
</script>