mingnan/src/pages/user/contribute/submit.vue

<template>
  <view class="d-flex flex-column bg-base">
    <u-loading-page :loading="loading" /> 
    <SimpleDynamicFormUni
      ref="formRef"
      :formDefine="formDefine"
      :formProps="{
        labelPosition: 'top',
        labelWidth: '175',
      }"
      :formModelInit="formModelInit"
    />
    <u-button type="primary" @click="submit">提交</u-button>
    <u-safe-bottom />
  </view>
</template>

<script setup lang="ts">
import ContributeApi, { ContributeItem } from '@/api/user/ContributeApi';
import CheckUtils from '@/common/utils/CheckUtils';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { ref } from 'vue';
import type { FormDefine, FormExport } from '@/common/components/form';
import type { DynamicSelectProps } from '@/common/components/form/components/DynamicSelect.vue';
import SimpleDynamicFormUni from '@/common/components/form/SimpleDynamicFormUni.vue';

const loading = ref(false);

const formRef = ref<FormExport>();
const formDefine : FormDefine = {
  items: [
    {
      name: '',
      children: {
        type: 'group',
        props: {
          class: 'form-block',
        },
        propNestType: 'nest', 
        items: [
          { 
            label: '认领村庄', 
            name: 'village_id',
            type: 'dynamic-select', 
            params: {
              loadData: async () => 
              (await ContributeApi.getCanClaimVallageList())
                .map((p) => ({
                  value: p.id,
                  text: p.villageName,
                }))
              ,
            } as DynamicSelectProps,
            rules: [{
              required: true,
              errorMessage: '请选择要认领的村庄',
            }],
          },
          { 
            label: '姓名', 
            name: 'name', 
            type: 'text', 
            defaultValue: '',
            params: {
              placeholder: '请输入姓名',
            },
            rules:  [{
              required: true,
              errorMessage: '请输入姓名',
            }] 
          },
          { 
            label: '性别', 
            name: 'sex', 
            type: 'select', 
            params: {
              localdata: [
                { value: 1, text: "男" },
                { value: 2, text: "女" },
                { value: 3, text: "不透露" },
              ],
              clear: false,
            },
            rules: [{
              required: true,
              errorMessage: '请选择性别',
            }]
          },
          {
            label: '联系方式',
            name: 'mobile',
            type: 'text', 
            defaultValue: '',
            params: {
              placeholder: '请输入联系方式',
            },
            rules:  [{
              required: true,
              errorMessage: '请输入手机号',
            },{
              required: true,
              validateFunction: (rule: any, value: any,data: any,callback: (e: any) => void) => {
                if (!CheckUtils.checkIsChinesePhoneNumber(value)) {
                  callback('手机号格式不正确')
                  return false
                }
                return true
              }
            }]
          },
          {
            label: '地址',
            name: 'address',
            type: 'text', 
            defaultValue: '',
            params: {
              placeholder: '请输入地址',
            },
            rules: [{
              required: true,
              errorMessage: '请输入地址',
            }]
          },
        ]
      }
    },
    {
      name: '',
      children: {
        type: 'group',
        props: {
          class: 'form-block',
        },
        propNestType: 'nest', 
        items: [
          {
            label: '申请理由',
            name: 'claim_reason',
            type: 'textarea',
            defaultValue: '',
            params: {
              placeholder: '请输入申请理由',
            },
            rules: [{
              required: true,
              errorMessage: '请输入申请理由',
            }]
          }
        ]
      }
    },
  ]
}

function formModelInit() {
  return new ContributeItem();
}

async function submit() {
  if (!formRef.value)
    return;
  try {
    const data = await formRef.value.submitForm<ContributeItem>();
    if (!data)
      return;
    loading.value = true;
    await ContributeApi.contribute(data);
    uni.showModal({
      title: '提交成功',
      content: '感谢您的投稿，我们将尽快审核并通知您结果。',
    });
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="scss">
</style>