📦 村落相册重新对接优化

src/api/light/GalleryApi.ts

@@ -0,0 +1,170 @@
+import { DataModel, transformArrayDataModel, type KeyValue } from '@imengyu/js-request-transform';
+import { RequestApiConfig, type RequestOptions } from '@imengyu/imengyu-utils';
+import { AppServerRequestModule } from '../RequestModules';
+import { transformSomeToArray } from '../Utils';
+
+export class GalleryItem extends DataModel<GalleryItem> {
+  constructor() {
+    super(GalleryItem, '相册图片');
+    this.setNameMapperCase('Camel', 'Snake');
+    this._convertTable = {
+      id: { clientSide: 'number', serverSide: 'number', clientSideRequired: true },
+      userId: { clientSide: 'number', serverSide: 'number' },
+      villageId: { clientSide: 'number', serverSide: 'number' },
+      groupId: { clientSide: 'number', serverSide: 'number' },
+      status: { clientSide: 'number', serverSide: 'number' },
+    };
+    this._convertKeyType = (key) => {
+      if (key === 'createtime' || key === 'updatetime' || key === 'deletetime')
+        return { clientSide: 'date', serverSide: 'string' };
+      return undefined;
+    };
+  }
+
+  id!: number;
+  /** 名称 */
+  name = '';
+  /** 图片 */
+  image = '';
+  /** 说明 */
+  desc = '';
+  /** 用户ID */
+  userId = 0;
+  /** 村社ID */
+  villageId = 0;
+  /** 分组ID */
+  groupId = 0;
+  /** 状态: -1=驳回, 0=待审核, 1=通过 */
+  status = 0;
+  statusText = '';
+  /** 图片列表 */
+  images = [] as string[];
+  /** 附件列表 */
+  annex = [] as string[];
+  /** 创建时间 */
+  createtime = null as Date | null;
+  /** 更新时间 */
+  updatetime = null as Date | null;
+  /** 删除时间 */
+  deletetime = null as Date | null;
+}
+
+export class GalleryApi extends AppServerRequestModule<DataModel> {
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * 相册图片列表
+   * POST /village/village/albumList
+   */
+  async getAlbumList(params?: {
+    villageId?: number;
+    userId?: number;
+    page?: number;
+    pageSize?: number;
+    keywords?: string;
+  }) {
+    const res = await this.post<{
+      data: any[];
+      total: number;
+    }>('/village/village/albumList', '相册图片列表', {
+      village_id: params?.villageId,
+      user_id: params?.userId,
+      page: params?.page,
+      pageSize: params?.pageSize,
+      keywords: params?.keywords,
+    });
+    return {
+      total: res.requireData().total,
+      list: transformArrayDataModel<GalleryItem>(GalleryItem, transformSomeToArray(res.requireData().data), '相册图片', true),
+    };
+  }
+
+  /**
+   * 新增/修改相册图片
+   * POST /village/village/saveVillageImage
+   */
+  async saveVillageImageWithFile(params: {
+    /** 修改时必填 */
+    id?: number;
+    /** 图片文件路径（新增时必填） */
+    filePath: string;
+    /** 村落ID */
+    villageId: number;
+    /** 说明 */
+    desc?: string;
+    /** 名称 */
+    name?: string;
+  }, receiveTask?: (task: UniApp.UploadTask) => void) {
+    let url = RequestApiConfig.getConfig().BaseUrl + '/village/village/saveVillageImage';
+    const req: RequestOptions = {
+      method: 'POST',
+      headers: {},
+    };
+    if (this.config.requestInterceptor) {
+      const { newReq, newUrl } = await this.config.requestInterceptor(url, req);
+      url = newUrl;
+      Object.assign(req, newReq);
+    }
+    return new Promise<KeyValue>((resolve, reject) => {
+      const task = uni.uploadFile({
+        url,
+        name: 'file',
+        header: req.headers,
+        filePath: params.filePath,
+        formData: {
+          id: params.id ?? '',
+          village_id: params.villageId,
+          desc: params.desc ?? '',
+          name: params.name ?? '',
+        },
+        success: (result) => {
+          const data = JSON.parse(result.data);
+          if (data.code !== 1) {
+            reject(new Error(data.msg ?? 'code: ' + data.code));
+            return;
+          }
+          resolve(data.data);
+        },
+        fail: (err) => reject(err),
+      });
+      receiveTask?.(task);
+    });
+  }
+
+  /**
+   * 新增/修改相册图片
+   * POST /village/village/saveVillageImage
+   */
+  async saveVillageImage(params: {
+    /** 修改时必填 */
+    id?: number;
+    /** 村落ID */
+    villageId: number;
+    /** 说明 */
+    desc?: string;
+    /** 名称 */
+    name?: string;
+  }) {
+    return await this.post<KeyValue>('/village/village/saveVillageImage', '保存相册图片', {
+      id: params.id,
+      village_id: params.villageId,
+      desc: params.desc,
+      name: params.name,
+    });
+  }
+
+  /**
+   * 删除相册图片
+   * POST /village/village/delVillageImage
+   */
+  async delVillageImage(id: number) {
+    return await this.post<KeyValue>('/village/village/delVillageImage', '删除相册图片', {
+      id,
+    });
+  }
+}
+
+export default new GalleryApi();

src/components/utils/PageAction.ts

@@ -76,11 +76,11 @@ function navTo(url: string, data: Record<string, unknown> = {}) {
  * @param name 方法名
  * @param data 要传递的数据
  */
-function callPrevOnPageBack(name: string, data: Record<string, unknown>) {
+function callPrevOnPageBack(name: string, data: Record<string, unknown>, index: number = 0) {
   var pages = getCurrentPages(); // 获取页面栈
-  var prevPage = pages[pages.length - 2] as { $vm: Record<string, unknown> }; // 上一个页面
+  var prevPage = pages[pages.length - 2 - index] as { $vm: Record<string, unknown> }; // 上一个页面
 
-  if (typeof prevPage.$vm.onPageBack === 'function')
+  if (prevPage && typeof prevPage.$vm.onPageBack === 'function')
     prevPage.$vm.onPageBack(name, data);
 }
 /**
@@ -92,7 +92,7 @@ function backAndCallOnPageBack(name: string, data: Record<string, unknown>) {
   var pages = getCurrentPages(); // 获取页面栈
   var prevPage = pages[pages.length - 2] as { $vm: Record<string, unknown> }; // 上一个页面
 
-  if (typeof prevPage.$vm.onPageBack === 'function')
+  if (prevPage && typeof prevPage.$vm.onPageBack === 'function')
     prevPage.$vm.onPageBack(name, data);
 
   uni.navigateBack({ delta: 1 });

src/pages.json

@@ -188,6 +188,22 @@
       }
     },
     {
+      "path": "pages/home/village/gallery/index",
+      "style": {
+        "navigationBarTitleText": "村社相册",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/home/village/gallery/upload",
+      "style": {
+        "navigationBarTitleText": "上传照片",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
       "path": "pages/home/village/gov/index",
       "style": {
         "navigationBarTitleText": "政贤连心",

src/pages/home/village/components/VillageGallery.vue

@@ -1,97 +1,110 @@
 <template>
-  <FlexRow justify="space-between">
-    <Image 
-      v-for="index of 3" 
-      :key="index" 
-      :src="images[index - 1]" 
-      radius="radius.md"
-      :width="200"
-      :height="140"
-      mode="aspectFill"
-      defaultImage=""
-      touchable
+  <FlexCol>
+    <swiper
+      class="village-gallery-swiper"
+      :indicator-dots="pageCount > 1"
+      indicator-color="rgba(0,0,0,0.2)"
+      indicator-active-color="#e19579"
     >
-      <template #empty>
-        <Touchable
-          direction="column" 
-          position="absolute" 
-          inset="0" 
-          center
-          backgroundColor="background.primary"
-          @click="uploadImage(index)"
-        >
-          <Icon name="add" size="fontSize.md" />
-          <Text text="上传封面" fontConfig="secondText" />
-        </Touchable>
-      </template>
-      <!-- <FlexCol 
-        v-if="index === 3 && images.length >= 3" 
-        position="absolute" inset="0" 
-        center 
-        backgroundColor="mask.default"
-      >
-        <Text :text="`更多相册`" fontSize="fontSize.lg" color="white" />
-      </FlexCol> -->
-    </Image>
-  </FlexRow>
-
+      <swiper-item v-for="(group, gi) in pagedImages" :key="gi">
+        <FlexRow justify="space-between" gap="gap.sm">
+          <Image
+            v-for="(item, index) in group"
+            :key="item.id"
+            :src="item.image"
+            radius="radius.md"
+            :width="200"
+            :height="140"
+            mode="aspectFill"
+            defaultImage=""
+            touchable
+            @click="goGallery"
+          />
+          <FlexCol
+            v-for="n in (3 - group.length)"
+            :key="'placeholder-' + n"
+            :width="200"
+            :height="140"
+          />
+        </FlexRow>
+      </swiper-item>
+      <swiper-item v-if="pagedImages.length === 0" >
+        <FlexRow justify="space-between" gap="gap.sm">
+          <Touchable
+            v-for="n in 3"
+            :key="'placeholder-' + n"
+            direction="column"
+            radius="radius.md"
+            :width="200"
+            :height="140"
+            center
+            backgroundColor="background.primary"
+            @click="goGallery"
+          >
+            <Icon name="add" size="fontSize.md" />
+            <Text text="上传图片" fontConfig="secondText" />
+          </Touchable>
+        </FlexRow>
+      </swiper-item>
+    </swiper>
+  </FlexCol>
 </template>
 
 <script setup lang="ts">
 import FlexRow from '@/components/layout/FlexRow.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
 import Image from '@/components/basic/Image.vue';
+import { computed } from 'vue';
+import GalleryApi, { type GalleryItem } from '@/api/light/GalleryApi';
+import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
+import { navTo } from '@/components/utils/PageAction';
 import Touchable from '@/components/feedback/Touchable.vue';
 import Icon from '@/components/basic/Icon.vue';
 import Text from '@/components/basic/Text.vue';
-import CommonContent from '@/api/CommonContent';
-import { showError } from '@/common/composeabe/ErrorDisplay';
-import { toast } from '@/components/utils/DialogAction';
-import LightVillageApi from '@/api/light/LightVillageApi';
-import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   villageId: number;
-  images?: string[];
 }>(), {
-  images: () => [],
 });
-const emit = defineEmits<{
-  (e: 'update:images', images: string[]): void;
-}>();
 
-const images = computed(() => {
-  return props.images.map(image => {
-    if (image === 'https://xycdn.wenlvti.net')
-      return '';
-    return image
+const emit = defineEmits(['goGallery']);
+
+const imageLoader = useSimpleDataLoader(async () => {
+  return await GalleryApi.getAlbumList({
+    villageId: props.villageId,
+    page: 1,
+    pageSize: 18,
   });
 });
 
-async function uploadImage(index: number) {
-  const tempFilePath = await new Promise<string>((resolve, reject) => {
-    uni.chooseImage({
-      count: 1,
-      sizeType: ['original', 'compressed'],
-      sourceType: ['album', 'camera'],
-      success: (res) => {
-        resolve(res.tempFilePaths[0]);
-      },
-    });
-  });
+function goGallery() {
+  emit('goGallery');
+}
 
-  try {
-    const image = await CommonContent.uploadImages(tempFilePath);
-    if (image) {
-      if (props.images.length >= index)
-        props.images[index - 1] = image;
-      else
-        props.images.push(image);
-    }
-    toast('上传成功');
-    await LightVillageApi.updateVillageGallery(props.villageId, props.images);
-    emit('update:images', props.images);
-  } catch (error) {
-    showError(error);
+const pagedImages = computed(() => {
+  const list = imageLoader.content.value?.list ?? [];
+  const pages: GalleryItem[][] = [];
+  for (let i = 0; i < list.length; i += 3) {
+    pages.push(list.slice(i, i + 3));
   }
+  return pages;
+});
+
+const pageCount = computed(() => pagedImages.value.length);
+
+
+function refresh() {
+  imageLoader.reload();
+}
+
+defineExpose({
+  refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.village-gallery-swiper {
+  width: 100%;
+  height: 140rpx;
 }
-</script>
+</style>

src/pages/home/village/gallery/index.vue

@@ -0,0 +1,116 @@
+<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.sm">
+          <Image
+            v-for="item in galleryLoader.list.value"
+            :key="item.id"
+            :src="item.image"
+            radius="radius.md"
+            :width="galleryItemSize"
+            :height="galleryItemSize"
+            mode="aspectFill"
+            touchable
+            @click="previewImage(item.image)"
+          />
+          <Touchable
+            direction="column"
+            radius="radius.md"
+            :width="galleryItemSize"
+            :height="galleryItemSize"
+            center
+            backgroundColor="background.primary"
+            @click="uploadImage"
+          >
+            <Icon name="add" size="fontSize.md" />
+            <Text text="上传图片" fontConfig="secondText" />
+          </Touchable>
+        </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 { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
+import { computed } from 'vue';
+import { backAndCallOnPageBack, callPrevOnPageBack, navTo } from '@/components/utils/PageAction';
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
+import { confirm } from '@/components/dialog/CommonRoot';
+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 Icon from '@/components/basic/Icon.vue';
+import Button from '@/components/basic/Button.vue';
+import Text from '@/components/basic/Text.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import Empty from '@/components/feedback/Empty.vue';
+import Height from '@/components/layout/space/Height.vue';
+import GalleryApi from '@/api/light/GalleryApi';
+
+const { querys } = useLoadQuerys({
+  villageId: 0,
+  maxCount: 3,
+});
+
+const galleryLoader = useSimplePageListLoader(30, async (page, pageSize) => {
+  return await GalleryApi.getAlbumList({
+    villageId: querys.value.villageId,
+    page,
+    pageSize,
+  });
+});
+
+const galleryItemSize = computed(() => {
+  const screenWidth = uni.getSystemInfoSync().windowWidth;
+  const padding = uni.upx2px(40);
+  const gap = uni.upx2px(16);
+  return Math.floor((screenWidth - padding - gap * 2) / 3);
+});
+
+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 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>

src/pages/home/village/gallery/upload.vue

@@ -0,0 +1,116 @@
+<template>
+  <CommonTopBanner title="上传照片">
+    <FlexCol gap="gap.lg" padding="padding.md">
+
+      <BoxMid center>
+        <Image
+          v-if="selectedImage"
+          :src="selectedImage"
+          radius="radius.md"
+          width="660rpx"
+          height="400rpx"
+          mode="aspectFill"
+          touchable
+          @click="uploadImage"
+        />
+        <Touchable
+          v-else
+          direction="column"
+          radius="radius.md"
+          width="660rpx"
+          height="200rpx"
+          center
+          backgroundColor="background.primary"
+          @click="uploadImage"
+        >
+          <Icon name="add" size="fontSize.md" />
+          <Text text="上传图片" fontConfig="secondText" />
+        </Touchable>
+      </BoxMid>
+        
+      <BoxMid gap="gap.md">
+        <ProvideVar :vars="{
+          FieldBackgroundColor: 'transparent',
+        }">
+          <Field label="图片说明" v-model="desc" placeholder="图片的简要说明" :maxLength="200" :showWordLimit="true" />
+        </ProvideVar>
+        <Text fontConfig="subText">上传提示：上传清晰的环境照片，可以帮助他人了解这里</Text>
+      </BoxMid>
+
+      <FlexRow center>
+        <FrameButton primary text="提交" width="400rpx" @click="submit()" />
+      </FlexRow>
+    </FlexCol>
+  </CommonTopBanner>
+</template>
+
+<script setup lang="ts">
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import Image from '@/components/basic/Image.vue';
+import Icon from '@/components/basic/Icon.vue';;
+import Text from '@/components/basic/Text.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import GalleryApi from '@/api/light/GalleryApi';
+import { showError } from '@/common/composeabe/ErrorDisplay';
+import { toast } from '@/components/utils/DialogAction';
+import { ref } from 'vue';
+import BoxMid from '@/common/components/box/BoxMid.vue';
+import FrameButton from '@/common/components/FrameButton.vue';
+import Field from '@/components/form/Field.vue';
+import { backAndCallOnPageBack } from '@/components/utils/PageAction';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import ProvideVar from '@/components/theme/ProvideVar.vue';
+
+const { querys } = useLoadQuerys({
+  villageId: 0,
+  id: 0,
+  desc: '',
+  image: '',
+}, (querys) => {
+  if (querys.image && querys.id) {
+    selectedImage.value = querys.image;
+    desc.value = querys.desc;
+  }
+});
+
+const selectedImage = ref<string | null>(null);
+const desc = ref('');
+
+async function uploadImage() {
+  const tempFilePath = await new Promise<string>((resolve, reject) => {
+    uni.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => resolve(res.tempFilePaths[0]),
+      fail: (err) => reject(err),
+    });
+  });
+  selectedImage.value = tempFilePath;
+}
+async function submit() {
+  if (!selectedImage.value) {
+    showError('请先选择一张图片哦');
+    return;
+  }
+  try {
+    uni.showLoading({ title: '上传中...' });
+    await GalleryApi.saveVillageImageWithFile({
+      id: querys.value.id > 0 ? querys.value.id : undefined,
+      filePath: selectedImage.value,
+      villageId: querys.value.villageId,
+      desc: desc.value,
+    });
+    toast('上传成功');
+    backAndCallOnPageBack('list', {
+      needRefresh: true,
+    });
+  } catch (error) {
+    showError(error);
+  } finally {
+    uni.hideLoading();
+  }
+}
+</script>

src/pages/home/village/index.vue

@@ -43,10 +43,14 @@
         </FlexRow>
         <Card 
           v-if="tab === 'card'" 
+          ref="cardRef"
           @goTree="tab = 'tree'" 
           @goJoin="joinDialog?.show()"
         />
-        <Tree v-if="tab === 'tree'" />
+        <Tree 
+          v-if="tab === 'tree'" 
+          ref="treeRef"
+        />
       </template>
       <Height :height="150" />
     </FlexCol>
@@ -106,6 +110,9 @@ const { isFollowed, onFollow, onUnFollow } = useFollow();
 
 const showMyFollowPopup = ref(false);
 const joinDialog = ref<InstanceType<typeof JoinDialog>>();
+  
+const cardRef = ref<InstanceType<typeof Card>>(); 
+const treeRef = ref<InstanceType<typeof Tree>>();
 
 const props = withDefaults(defineProps<{
   showSwitch?: boolean;
@@ -154,6 +161,10 @@ onMounted(async () => {
 });
 
 defineExpose({
+  onPageBack: (name: string, data: Record<string, unknown>) => {
+    cardRef.value?.onPageBack(name, data);
+    treeRef.value?.onPageBack(name, data);
+  },
   goTreePage: () => {
     tab.value = 'tree';
   },

src/pages/home/village/introd/card.vue

@@ -56,7 +56,7 @@
             radius="radius.lgr" 
             :padding="[10, 30]" 
             backgroundColor="white" 
-            @click="($refs.applyGoodsDialog as any).show()"
+            @click="upgradeRef?.show()"
           >
             升级村社
           </Button>
@@ -66,15 +66,18 @@
       <!-- 图片 -->
       <VillageGallery
         v-if="villageInfoLoader.content.value"
+        ref="villageGalleryRef"
         :villageId="villageStore.currentVillage?.id ?? 0" 
-        :images="villageInfoLoader.content.value.images" 
-        @update:images="villageInfoLoader.reload()"
+        @goGallery=""
       />
 
       <!-- 地址 -->
-      <FlexRow align="center" gap="gap.sm">
-        <Icon name="https://xy.wenlvti.net/app_static/images/village/IconMap.png" size="fontSize.md" />
-        <Text :text="villageInfoLoader.content.value?.address" fontConfig="contentText" />
+      <FlexRow justify="space-between" align="center">
+        <FlexRow align="center" gap="gap.sm">
+          <Icon name="https://xy.wenlvti.net/app_static/images/village/IconMap.png" size="fontSize.md" />
+          <Text :text="villageInfoLoader.content.value?.address" fontConfig="contentText" />
+        </FlexRow>
+        <Button size="mini" icon="picture" text="村社相册" @click="handleGoGallery" />
       </FlexRow>
       <VillageMiniMap 
         v-if="villageInfoLoader.content.value"
@@ -229,7 +232,7 @@
     @publishsuccess="onPublishSuccess"
   />
   <UpgradeDialog 
-    ref="applyGoodsDialog" 
+    ref="upgradeRef"
     v-if="villageStore.currentVillage"
     :villageId="villageStore.currentVillage.id"
   />
@@ -247,7 +250,6 @@ import { useFollow } from '../composeabe/Follow';
 import { ArrayUtils } from '@imengyu/imengyu-utils';
 import { navTo } from '@/components/utils/PageAction';
 import HomeTitle from '@/common/components/parts/HomeTitle.vue';
-import Button from '@/components/basic/Button.vue';
 import Icon from '@/components/basic/Icon.vue';
 import Text from '@/components/basic/Text.vue';
 import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
@@ -269,6 +271,7 @@ import VillageGallery from '../components/VillageGallery.vue';
 import WxButton from '@/components/basic/WxButton.vue';
 import Height from '@/components/layout/space/Height.vue';
 import IconButton from '@/components/basic/IconButton.vue';
+import Button from '@/components/basic/Button.vue';
 
 const authStore = useAuthStore();
 const { getIsVolunteer } = useUserTools();
@@ -286,7 +289,7 @@ const villageInfoLoader = useSimpleDataLoader(async () => {
     title: village?.name || '',
     desc: village?.desc || '',
     address: village?.address,
-    sizeText: village?.sizeText || 0,
+    sizeText: village?.storageLimit || 0,
     level: village?.level.toString() || '',
     levelText: village?.levelText || '',
     rankText: village?.rank.toString() || '',
@@ -332,8 +335,6 @@ watch(rankActiveTag, () => {
   villageUserRankListLoader.reload();
 });
 
-
-
 const recommendTagName = computed(() => {
   return '亮乡源·' + villageInfoLoader.content.value?.title + '·' + listActiveTag.value;
 });
@@ -372,9 +373,28 @@ function handleGoPublish() {
     });
   }, '欢迎使用AI助手，登录后以便使用更多功能哦！');
 }
+function handleGoGallery() {
+  navTo('/pages/home/village/gallery/index', { 
+    villageId: villageStore.currentVillage?.id ?? 0 ,
+    maxCount: villageStore.currentVillage?.imageLimit || 3,
+  });
+}
+
+const upgradeRef = ref<InstanceType<typeof UpgradeDialog>>();
+const villageGalleryRef = ref<InstanceType<typeof VillageGallery>>();
 
 watch(() => villageStore.currentVillage, () => {
   villageInfoLoader.reload();
   villageUserRankListLoader.reload();
 }, { immediate: true });
+
+defineExpose({
+  onPageBack: (name: string, data: Record<string, unknown>) => {
+    if (name === 'refreshVillageGrallery' && data.needRefresh) {
+      villageGalleryRef.value?.refresh();
+    } else if (name === 'showVillageUpgrade') {
+      upgradeRef.value?.show();
+    }
+  },
+});
 </script>

src/pages/home/village/introd/tree.vue

@@ -365,4 +365,8 @@ onMounted(() => {
 onBeforeMount(() => {
   refreshFruitTimer.stop();
 });
+defineExpose({
+  onPageBack: (name: string, data: Record<string, unknown>) => {;
+  },
+});
 </script>

src/pages/index.vue

@@ -148,6 +148,8 @@ defineExpose({
       }
     } else if (name === 'paySuccessAndRefresh') {
       paySuccessAndRefresh();
+    } else {
+      villageIndex.value?.onPageBack(name, data);
     }
   }
 })
@@ -159,7 +161,7 @@ onShareTimeline(() => {
 })
 onMounted(() => {
   if (isDevEnv) {
-    tabIndex.value = 3;
+    tabIndex.value = 1;
   }
 })
 </script>