xiangyuan-app/src/pages/home/village/gallery/index.vue

<template>
  <CommonTopBanner title="村社相册">
    <FlexCol gap="gap.md" padding="padding.md">
      <SimplePageListLoader :loader="galleryLoader">
        <FlexRow 
          v-if="galleryLoader.list.value && galleryLoader.list.value.length > 0" 
          wrap 
          gap="gap.md"
        >
          <FlexCol
            v-for="item in galleryLoader.list.value"
            :key="item.id"
            :width="galleryItemWidth"
            :height="galleryItemHeight"
            position="relative"
            radius="radius.md"
            overflow="hidden"
          >
            <Image
              :src="item.image"
              :width="galleryItemWidth"
              :height="galleryItemHeight"
              mode="aspectFill"
              touchable
              @click="previewImage(item.image)"
            />
            <IconButton 
              v-if="item.userId === authStore.userId"
              icon="edit-filling" 
              shape="round" 
              :size="30"
              :buttonSize="50"
              color="white"
              backgroundColor="rgba(0,0,0,0.4)"
              :buttonStyle="{
                position: 'absolute',
                right: '20rpx',
                top: '20rpx',
              }"
              @click="editImage(item)" 
            />
            <BackgroundBox
              position="absolute"
              :inset="{ l: 0, r: 0, b: 0 }"
              :padding="[20, 15]"
              color1="transparent"
              color2="rgba(0,0,0,0.5)"
              direction="column"
            >
              <Text :text="item.desc || '相片'" color="white" fontConfig="contentText" :lines="1" />
              <!-- <FlexRow justify="space-between" align="center">
                <Avatar :url="item.user.avatar" :size="40" />
                <Text :text="item.user.nickname" fontConfig="contentText" />
              </FlexRow> -->
            </BackgroundBox>
          </FlexCol>
          
          <VillageGalleryUpload
            :width="galleryItemWidth"
            :height="galleryItemHeight"
            @click="uploadImage"
          />
        </FlexRow>
        <template #empty>
          <Empty description="还没有任何村社照片，快来上传吧">
            <Height :height="20" />
            <Button type="primary" icon="add" @click="uploadImage">上传图片</Button>
          </Empty>
        </template>
      </SimplePageListLoader>
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useAuthStore } from '@/store/auth';
import { backAndCallOnPageBack, callPrevOnPageBack, navTo } from '@/components/utils/PageAction';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { confirm } from '@/components/dialog/CommonRoot';
import Text from '@/components/basic/Text.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import IconButton from '@/components/basic/IconButton.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import Image from '@/components/basic/Image.vue';
import Button from '@/components/basic/Button.vue';
import Empty from '@/components/feedback/Empty.vue';
import Height from '@/components/layout/space/Height.vue';
import GalleryApi, { type GalleryItem } from '@/api/light/GalleryApi';
import VillageGalleryUpload from '../components/VillageGalleryUpload.vue';
import Avatar from '@/components/display/Avatar.vue';

const { querys } = useLoadQuerys({
  villageId: 0,
  maxCount: 3,
});

const authStore = useAuthStore();

const galleryLoader = useSimplePageListLoader(30, async (page, pageSize) => {
  return await GalleryApi.getAlbumList({
    villageId: querys.value.villageId,
    userId: authStore.userId,
    page,
    pageSize,
  });
});

const galleryItemWidth = 350;
const galleryItemHeight = 230;

const isOverMaxCount = computed(() => galleryLoader.total.value >= querys.value.maxCount);

function previewImage(url: string) {
  const urls = galleryLoader.list.value?.map(item => item.image) ?? [];
  uni.previewImage({
    current: url,
    urls,
  });
}

function editImage(item: GalleryItem) {
  navTo(`/pages/home/village/gallery/upload`, { 
    id: item.id,
    villageId: querys.value.villageId,
    desc: item.desc,
    image: item.image,
  });
}

function uploadImage() {
  if (isOverMaxCount.value) {
    confirm({
      content: '您最多只能上传' + querys.value.maxCount + '张图片哦，升级村社等级可以获得更多照片上传权益',
      icon: 'prompt',
      confirmText: '去升级',
    }).then((res) => {
      if (res) {
        backAndCallOnPageBack('showVillageUpgrade', {});
      }
    });
    return;
  }
  navTo('./upload', { 
    villageId: querys.value.villageId 
  });
}

defineExpose({
  onPageBack: (name: string, data: Record<string, unknown>) => {
    if (data.needRefresh) {
      galleryLoader.reload();
      callPrevOnPageBack('refreshVillageGrallery', { needRefresh: true }, -1);
    }
  },
});
</script>