activity/src/view/fenghui/form2.vue

<!-- 工作人员 -->
<template>
    <div>
        <van-nav-bar fixed :border="false">
            <template #left>
                <van-icon name="arrow-left" color="#3D3D3D" @click="onClickLeft" />
            </template>
            <template #title>
                <p class="navTitle" v-text="lang[langType].signUpWK"></p>
            </template>
        </van-nav-bar>
        <div class="form">
            <van-form ref="form" @submit="onSubmit" label-width="8em">
                <!-- 姓名 -->
                <van-field size="large" input-align="right"
                    :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].nameContent }]" required
                    v-model="formData.name" :placeholder="lang[langType].nameContent">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].name"></span>
                    </template>
                </van-field>

                <!-- 手机号 -->
                <van-field size="large" input-align="right"
                    :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].contactContent }]"
                    v-model="formData.contact" type="number" required :placeholder="lang[langType].contactContent">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].contact"></span>
                    </template>
                </van-field>

                <!-- 照片 -->
                <van-field size="large" input-align="right" :placeholder="lang[langType].photoContent" required
                    :rules="[{ required: true, trigger: 'onChange', message: lang[langType].photoContent }]"
                    v-model="formData.photoUrl">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].photo"></span>
                    </template>
                    <template #input>
                        <van-uploader :preview-full-image="false" accept="image/*" v-model="photo"
                            :before-delete="beforeDelete" :max-count="1" :max-size="524288000" @oversize="filesize"
                            :after-read="beforeRead" result-type="file">
                        </van-uploader>
                        <p class="upFileSubtitle" v-text="lang[langType].photoSubContent"> </p>
                    </template>
                </van-field>

                <!-- 证件 -->
                <van-field size="large" input-align="right"
                    :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].IDcardNumberContent }]"
                    v-model="formData.passport" required :placeholder="lang[langType].IDcardNumberContent">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].IDcardNumber"></span>
                    </template>
                </van-field>

                <!-- 身份类别  -->
                <van-field size="large" v-model="formData.identityType" required label-align="top"
                    :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].identityTypeContent }]"
                    :placeholder="lang[langType].identityTypeContent">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].identityType"></span>
                    </template>
                    <template #input>
                        <van-radio-group checked-color="#3F5AC8" style="justify-content: flex-end;width: 100%;"
                            v-model="formData.identityType" :direction="langType === 'zh' ? 'horizontal' : 'vertical'">
                            <van-radio style="flex: 1;margin-top: 10px; margin-bottom: 5px; " name="媒体">{{
                                lang[langType].media }}</van-radio>
                            <van-radio style="flex: 1;margin-top: 10px; margin-bottom: 5px; " name="工作人员">{{
                                lang[langType].staff }}</van-radio>
                            <van-radio style="flex: 1;margin-top: 10px; margin-bottom: 5px; " name="志愿者">{{
                                lang[langType].volunteer }}</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <!-- 单位类型 -->
                <van-field size="large " input-align="right" v-model="formData.unitTypeName" clickable
                    :rules="[{ required: true, trigger: 'onChange', message: lang[langType].workGroupTextContent }]"
                    right-icon="calendar-o" readonly :placeholder="lang[langType].workGroupTextContent"
                    @click="showUnitType = true" required>
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].workGroupText"></span>
                    </template>
                </van-field>
                <van-popup v-model:show="showUnitType" destroy-on-close round position="bottom">
                    <van-picker :confirm-button-text="lang[langType].confirm"
                        :cancel-button-text="lang[langType].cancel" :columns="unitTypeList"
                        @cancel="showUnitType = false" @confirm="onUnitTypeConfirm" />
                </van-popup>

                <!-- 工作单位 -->
                <van-field size="large" input-align="right" v-model="formData.workUnit"
                    :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].companyContent }]" required
                    :placeholder="lang[langType].companyBContent">
                    <template #label>
                        <span :class="langType === 'zh' ? 'label' : ''" v-html="lang[langType].companyB"></span>
                    </template>
                </van-field>
                <br />
                <van-button
                    :loading="loading"
                    style="background: linear-gradient(270deg, #1D19BC 0%, #1C4CD5 100%);margin: 0 auto;width: calc(100% - 40px);"
                    block type="primary" native-type="submit">
                    {{ lang[langType].submit }}
                </van-button>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { defineProps, defineEmits, defineExpose, reactive, ref, computed } from 'vue';
import { showToast, showDialog } from 'vant';
import { saveData, uploadImage } from '@/api/2025.js';
import lang from './lang.js';
const props = defineProps(['langType', 'verificationCode', 'subData']);

const emits = defineEmits(['closeComponent']);

const loading = ref(false);
const formData = reactive({})
const unitTypeList = computed(() => lang[props.langType].workGroup)
const showUnitType = ref(false)
const form = ref(null); // 引入子组件的实例，用于调用子组件的方法
const photo = ref([]);

const reset = () => {
    form.value.resetValidation();
}

const onClickLeft = () => {
    emits('closeComponent');
};

const onUnitTypeConfirm = (values) => {
    showUnitType.value = false;
    formData.unitType = values.selectedOptions[0].value;
    formData.unitTypeName = values.selectedOptions[0].text;
}

// 上传
const beforeDelete = (index) => {
    photo.value.splice(index, 1);
    formData.photoUrl = '';
    return false;
}
const filesize = () => showToast(lang[props.langType].fileSize);
const beforeRead = (file) => {
    if (!file) showToast(lang[props.langType].photoContent);
    uploadImage(file).then(res => {
        showToast(lang[props.langType].upFileSusscess);
        formData.photoUrl = res
        photo.value = [
            {
                url: res,
                file: file.file,
            }
        ]
    }).catch((res) => {
        showToast(res.msg || lang[props.langType].upFileError);
    })
    return false;
};

const onSubmit = () => {
    if (loading.value) return
    loading.value = true
    saveData({
        name: formData.name, // 姓名
        code: props.verificationCode, // 邀请码
        photo: formData.photoUrl, // 照片
        phone: formData.contact, // 手机号
        idCard: formData.passport, // 证件号
        workUnit: formData.workUnit, // 工作单位
        workGroup: formData.unitType, // 单位类型
        identityType: formData.identityType, // 身份类别
        userType: '工作人员'
    }).then((res) => {
        if (!isNaN(res.code) && res.code !== 0) {
            showToast(res.msg || lang[props.langType].networkError);
            return;
        }
        // 清空表单内容 from
        // Object.keys(from).forEach((key) => {
        //     from[key] = '';
        // });
        loading.value = false
        showDialog({
            message: lang[props.langType].registration,
        })
    }).catch((res) => {
        loading.value = false
        showToast(res.msg || lang[props.langType].networkError);
    });
}
defineExpose({ reset })
</script>
<style lang="scss"></style>