xiangyuan-app/src/pages/home/village/introd/edit.vue

<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>