📦 编辑简介功能

src/api/light/LightVillageApi.ts

@@ -114,6 +114,7 @@ export class VillageListItem extends DataModel<VillageListItem> {
   images = [] as string[];
   /** 村落名称 */
   name = '';
+  desc = '';
   title = '';
   /** 排名 */
   rank = 0;
@@ -429,6 +430,14 @@ export class LightVillageApi extends AppServerRequestModule<DataModel> {
     });
   }
 
+  async updateVillageInfo(id: number, desc: string, image: string) {
+    return await this.post<KeyValue>('/village/village/save', '更新村社基本信息', {
+      id: id,
+      image: image,
+      desc: desc,
+    });
+  }
+
   async createVillage(data: {
     name: string,
     longitude: string,

src/pages.json

@@ -247,6 +247,20 @@
       }
     },
     {
+      "path": "pages/home/village/introd/edit",
+      "style": {
+        "navigationBarTitleText": "编辑村落简介",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/home/village/gallery/choose",
+      "style": {
+        "navigationBarTitleText": "选择村社相册",
+        "navigationStyle": "custom"
+      }
+    }
+    {
       "path": "pages/home/village/post/management-topic",
       "style": {
         "navigationBarTitleText": "话题管理",

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

@@ -0,0 +1,95 @@
+<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="chooseImage(item.image)"
+            />
+            <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>
+        </FlexRow>
+        <template #empty>
+          <Empty description="还没有任何村社照片，您可以在村社首页相册上传哦">
+          </Empty>
+        </template>
+      </SimplePageListLoader>
+    </FlexCol>
+  </CommonTopBanner>
+</template>
+
+<script setup lang="ts">
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
+import { backAndCallOnPageBack, callPrevOnPageBack } from '@/components/utils/PageAction';
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
+import Text from '@/components/basic/Text.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.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 Empty from '@/components/feedback/Empty.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,
+    //userId: authStore.userId,
+    page,
+    pageSize,
+  });
+});
+
+const galleryItemWidth = 350;
+const galleryItemHeight = 230;
+
+function chooseImage(url: string) {
+  backAndCallOnPageBack('choosedImage', { url })
+}
+
+defineExpose({
+  onPageBack: (name: string, data: Record<string, unknown>) => {
+    if (data.needRefresh) {
+      galleryLoader.reload();
+      callPrevOnPageBack('refreshVillageGrallery', { needRefresh: true }, 1);
+    }
+  },
+});
+</script>

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

@@ -15,9 +15,10 @@
 
       <!-- 标题 -->
       <FlexRow justify="space-between" align="flex-end" width="100%">
-        <FlexCol gap="gap.md">
+        <FlexRow gap="gap.md">
           <Text :text="villageInfoLoader.content.value?.title" fontConfig="primaryTitle" />
-        </FlexCol>
+          <IconButton icon="edit-filling" :size="40" @click="handleGoEdit()" />
+        </FlexRow>
         <FlexRow center gap="gap.lg">
           <BubbleTip
             v-model:show="showFollowTip"
@@ -534,6 +535,27 @@ async function handleGoOfficalManage() {
     topic: recommendTagName.value,
   });
 }
+async function handleGoEdit() {
+  /* assertNotNull(villageStore.currentVillage?.id)
+  const isAdmin = (authStore.isAdmin || await OfficialApi.checkTopicRule(villageStore.currentVillage.id));
+  if (!isAdmin) {
+    const goUpgrade = await confirm({
+      title: '提示',
+      content: '您还不是管理员，您可以联系村社管理员将你添加为管理员，若当前村社暂无管理员，您可以点击“去升级”将您升级为管理员。',
+      confirmText: '去升级',
+      cancelText: '取消',
+    });
+    if (goUpgrade) {
+      navTo('/pages/home/village/upgrade/my-upgrade-management', {
+        villageId: villageStore.currentVillage.id,
+      });
+    }
+    return;
+  } */
+  navTo('/pages/home/village/introd/edit', {
+    villageId: villageStore.currentVillage.id,
+  });
+}
 async function handleGoDigManage() {
   assertNotNull(villageStore.currentVillage?.id)
   const isAdmin = (authStore.isAdmin || await OfficialApi.checkTopicRule(villageStore.currentVillage.id));

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

@@ -0,0 +1,123 @@
+<template>
+  <CommonTopBanner title="编辑村庄简介">
+    <FlexCol padding="padding.md" gap="gap.md">
+      <Field v-model="currentVillageName" placeholder="请输入家乡名称，例如：大庆村" />
+      <Field 
+        v-model="currentVillageDesc" 
+        placeholder="输入家乡的介绍，可以让大家了解更多" 
+        multiline 
+        showWordLimit 
+        :maxLength="300" 
+        :inputStyle="{ height: '100px' }"
+      />
+      <FlexCol 
+        position="relative"
+        borderColor="border.default" 
+        borderWidth="1px"
+        borderStyle="solid"
+        backgroundColor="background.primary"
+        radius="radius.md" 
+        overflow="hidden"
+      >
+        <template v-if="currentVillageImage">
+          <Image 
+            v-if="currentVillageImage"
+            :src="currentVillageImage"
+            width="100%"
+            height="300px"
+            mode="aspectFill"
+          />
+          <Touchable position="absolute" :inset="0" direction="column" center gap="gap.sm" @click="handleChooseImage">
+            <FlexCol radius="radius.md" padding="padding.md" backgroundColor="mask.default">
+              <Text text="点击修改村社封面" fontConfig="lightTitle" color="white" />
+            </FlexCol>
+          </Touchable>
+        </template>
+        <Touchable v-else 
+          center
+          :padding="[100, 50]" 
+          @click="handleChooseImage"
+        >
+          <Text text="暂无村社封面，点击设置封面" fontConfig="lightTitle" />
+        </Touchable>
+      </FlexCol>
+      <FlexCol gap="gap.md">
+        <Button text="返回上一步" @click="back" />
+        <Button text="保存修改" type="primary" @click="handleConfirm()" />
+      </FlexCol>
+    </FlexCol>
+  </CommonTopBanner>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { showError } from '@/common/composeabe/ErrorDisplay';
+import { toast, alert } from '@/components/dialog/CommonRoot';
+import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
+import { back, backAndCallOnPageBack, navTo } from '@/components/utils/PageAction';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import Button from '@/components/basic/Button.vue';
+import Field from '@/components/form/Field.vue';
+import LightVillageApi from '@/api/light/LightVillageApi';
+import Image from '@/components/basic/Image.vue';
+import Text from '@/components/basic/Text.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+
+const { querys } = useLoadQuerys({
+  villageId: 0,
+  areaCode: 0,
+  longitude: 0,
+  latitude: 0,
+}, async (query) => {
+  const res = await LightVillageApi.getVillageDetails(query.villageId);
+  currentVillageName.value = res.name;
+  currentVillageDesc.value = res.desc;
+  currentVillageImage.value = res.image;
+});
+
+const currentVillageName = ref('')
+const currentVillageDesc = ref('')
+const currentVillageImage = ref('')
+
+async function handleConfirm() {
+  if (!currentVillageName.value) {
+    toast('请输入家乡名称');
+    return;
+  }
+  uni.showLoading();
+  try {
+
+    await LightVillageApi.updateVillageInfo(
+      querys.value.villageId, 
+      currentVillageDesc.value, 
+      currentVillageImage.value
+    );
+
+    await alert({
+      title: '提示',
+      content: '修改村社简介成功！',
+    });
+    backAndCallOnPageBack('goVillage', {
+      id: querys.value.villageId,
+    });
+  } catch (e) {
+    showError(e);
+  } finally {
+    uni.hideLoading();  
+  }
+}
+function handleChooseImage() {
+  navTo('/pages/home/village/gallery/choose', { 
+    villageId: querys.value.villageId,
+  });
+}
+
+defineExpose({
+  onPageBack: (name: string, data: Record<string, unknown>) => {
+    if (name === 'choosedImage') {
+      currentVillageImage.value = data.url as string;
+    }
+  },
+});
+</script>