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

<template>
  <CommonRoot>
    <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',
            }"
          >
            <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"
          justify="space-between"
          align="center"
          :padding="20"
          :gap="20"
        >
          <FlexRow :gap="20">
            <Image 
              :src="item.image"
              width="100rpx"
              height="100rpx"
              :defaultImage="UserHead"
              :failedImage="UserHead"
              round 
            />
            <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>
          
          <BubbleBox 
            :innerStyle="{ left: '0' }"
            position="bottom"
            :items="[
              {
                icon: 'edit-filling',
                text: '编辑信息',
                onClick: () => goDetail(item.id),
              },
              {
                icon: 'browse',
                text: '修改密码',
                onClick: () => goDetail(item.id, true),
              },
              {
                icon: 'trash',
                text: '删除账号',
                textColor: 'danger',
                onClick: () => doDeleteUser(item as unknown as VolunteerInfo),
              },
            ]"
          >
            <NButton type="primary" icon="edit-filling" :radius="40" />
          </BubbleBox>
        </FlexRow>
      </FlexCol>
      <SimplePageListLoader :loader="listLoader" :noEmpty="true">
        <template #empty>
          <Empty image="search" text="暂无数据，点击按钮新增数据">
            <NButton type="primary" @click="newData">+ 新增数据</NButton>
          </Empty>
        </template>
      </SimplePageListLoader>
    </FlexCol>
  </CommonRoot>
</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 { onShareAppMessage } from '@dcloudio/uni-app';
import { alert, confirm, toast } from '@/components/dialog/CommonRoot';
import VillageApi, { VolunteerInfo } 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 BubbleBox from '@/components/feedback/BubbleBox.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import UserHead from '@/static/images/user/avatar.png';

const { querys } = useLoadQuerys({ 
  id: 0,  
  name: '',
  points: 0,
  level: 0,
  villageId: 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, onlyPassword: boolean = false) {
  navTo('./admin/volunteer', { 
    id,
    villageId: querys.value.id,  
    villageVolunteerId: querys.value.villageVolunteerId,  
    onlyPassword,
  });
}
function doDeleteUser(item: VolunteerInfo) {
  confirm({
    title: '确认要删除用户？',
    content: `请注意：删除${item.name}后将无法继续登录，请确认此账号不再继续使用。`,
    confirmColor: 'danger',
    confirmCountDown: 10,
    width: 560,
  }).then((res) => {
    if (res) {
      VillageApi.deleteVolunteer(item.id, querys.value.villageId).then(() => {
        listLoader.loadData(undefined, true);
        toast({ content: '删除成功' })
      }).catch((e) => {
        alert({
          title: '删除失败',
          content: '请联系管理员处理。' + e,
          icon: 'delete-filling',
        })
      });
    }
  });
}
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>