xiangyuan-app/src/pages/home/village/dialogs/ClamVolunteerDialog.vue

<template>
  <CommonDialog v-model:show="show" title="成为志愿者" :showDivider="false" :showCloseButton="false">
    <FlexCol gap="gap.lg" padding="padding.md" width="600rpx">
      <template v-if="step === 'form'">
        <Text textAlign="center" text="请完善身份信息，解锁更多村社专属功能" fontConfig="contentSpeicalText" />
        <Height :height="10" />
        <ProvideVar :vars="{
          FieldBackgroundColor: 'transparent',
        }">
          <BoxMid>
            <DynamicForm
              ref="addFormRef"
              :model="addFormModel"
              :options="addFormDefine"
            />
          </BoxMid>
        </ProvideVar>
        <Height :height="20" />
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton text="返回" @click="show = false" width="220rpx" />
          <FrameButton primary text="提交" @click="addSubmit" :loading="addFormLoading" width="220rpx" />
        </FlexRow>
      </template>
      <template v-else-if="step === 'finished'">
        <Result
          status="success"
          title="提交成功"
          description="等待系统审核，您可稍后再回来，您可以先逛逛社区看看其他村社吧"
        />
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton primary text="完成" @click="show = false; emit('finish')" width="220rpx" />
        </FlexRow>
      </template>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { toast } from '@/components/dialog/CommonRoot';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { useVillageStore } from '@/store/village';
import VillageApi, { VillageClaimInfo } from '@/api/inhert/VillageApi';
import CommonDialog from '@/common/components/CommonDialog.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import Text from '@/components/basic/Text.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Result from '@/components/feedback/Result.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import type { RadioValueProps } from '@/components/dynamic/wrappers/RadioValue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { FieldProps } from '@/components/form/Field.vue';
import type { RuleItem } from 'async-validator';
import { getClaimVillageForm } from '../../light/form/claim';

const show = ref(false);
const props = defineProps<{
  villageId: number;
}>();
const emit = defineEmits(['finish']);

const villageStore = useVillageStore();
const step = ref('form');

const addFormLoading = ref(false);
const addFormRef = ref<IDynamicFormRef>();
const addFormModel = ref<VillageClaimInfo>(new VillageClaimInfo());
const addFormDefine = ref<IDynamicFormOptions>();

async function addSubmit() {
  if (!addFormRef.value || !addFormModel.value)
    return;
  try {
    await addFormRef.value.validate();
  } catch (e) {
    toast({ content: '有必填项未填写，请检查' });
    return;
  }

  try {
    addFormLoading.value = true;
    addFormModel.value.villageId = props.villageId;
    await VillageApi.claimVallage(addFormModel.value as VillageClaimInfo);
    toast({ content: '提交成功' });
    step.value = 'finished';
    villageStore.loadMyJoinedVillages();

    setTimeout(() => {
      villageStore.reloadVillageInfo();
    }, 500);
  } catch (e) {
    showError(e);
  } finally {
    addFormLoading.value = false;
  }
}

defineExpose({
  show: () => {
    show.value = true;
    step.value = 'form';
    addFormModel.value = new VillageClaimInfo();
    addFormModel.value.type = 'volunteer';
    addFormModel.value.villageId = props.villageId;
    addFormDefine.value = getClaimVillageForm({
      formRef: addFormRef,
    });
  },
});
</script>