activity/src/view/fenghui/index.vue

<template>
    <div class="fenghui">
        <!-- <div class="swith">
            <div class="title" @click="showLange = true">
                {{ langObjT[langType] }}
                <van-icon name="arrow-down" />
            </div>
            <van-popup v-model:show="showLange" destroy-on-close round position="bottom">
                <van-picker :model-value="[langType]" :columns="langObj" @cancel="showLange = false"
                    @confirm="langChange" />
            </van-popup>
        </div> -->
        <van-image style="width: 100%;" :src="soundbyteJpg" />
        <br />
        <van-form @submit="onSubmit">
            <div class="submit">
                <div class="introduce">
                    <h4 class="text" v-text="lang[langType].forumTopic"> </h4>
                    <p class="text" v-text="lang[langType].forumTopicContent"></p>
                    <h4 class="text" v-text="lang[langType].wrestleMania"></h4>
                    <p class="text" v-text="lang[langType].wrestleManiaContent"></p>
                    <h4 class="text" v-text="lang[langType].venue"></h4>
                    <p class="text" v-text="lang[langType].venueContent"></p>
                    <h4 class="text" v-text="lang[langType].organization"></h4>
                    <div class="text" v-text="lang[langType].organizationSub1"></div>
                    <div class="text" v-text="lang[langType].organizationSub2"></div>
                    <h4 class="text" v-text="lang[langType].scale"></h4>
                    <div class="text" style="text-indent: 2em;" v-text="lang[langType].scaleContent"></div>
                </div>
                <van-cell-group inset v-if="showForm">
                    <!-- <h4 class="title" v-text="lang[langType].basicInformation"></h4> -->
                    <h4 class="text" v-text="lang[langType].signUp"></h4>
                    <!-- 姓名 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].nameContent }]" required
                        v-model="from.name" :placeholder="lang[langType].nameContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].name"></span>
                        </template>
                    </van-field>

                    <!-- 拼音 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].pinyinContent }]"
                        v-model="from.pinyin" required :placeholder="lang[langType].pinyinContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].pinyin"></span>
                        </template>
                    </van-field>

                    <!-- 性别 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].genderContent }]"
                        v-model="from.gender" required :placeholder="lang[langType].genderContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].gender"></span>
                        </template>
                    </van-field>

                    <!-- 照片 -->
                    <van-field label-width="7em" size="large" :placeholder="lang[langType].photoContent" required
                        :rules="[{ required: true, trigger: 'onChange', message: lang[langType].photoContent }]"
                        v-model="from.fileUrl">
                        <template #label>
                            <span class="label" v-html="lang[langType].photo"></span>
                        </template>
                        <template #input>
                            <van-uploader :preview-full-image="false" accept="image/*" v-model="photo" :max-count="1"
                                :max-size="524288000" @oversize="filesize" :after-read="beforeRead" result-type="file">
                            </van-uploader>
                            <p style="font-size: 12px;" v-text="lang[langType].photoSubContent"> </p>
                        </template>
                    </van-field>

                    <!-- 手机号 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].genderContent }]"
                        v-model="from.contact" :label="lang[langType].contact" type="number" required
                        :placeholder="lang[langType].contactContent" />

                    <!-- 邮箱 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].emailContent }]" required
                        v-model="from.email" :placeholder="lang[langType].emailContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].email"></span>
                        </template>
                    </van-field>

                    <!-- 生日 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].birthdayContent }]"
                        is-link readonly @click="showBirthday = true" v-model="from.birthday" required
                        :placeholder="lang[langType].birthdayContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].birthday"></span>
                        </template>
                    </van-field>
                    <van-popup v-model:show="showBirthday" destroy-on-close round position="bottom">
                        <van-date-picker @confirm="packerConfirm" :title="lang[langType].birthday"
                            @cancal="showBirthday = false" :min-date="new Date(1970, 0, 1)" :max-date="new Date()" />
                    </van-popup>

                    <!-- 工作单位 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].workUnit }]" required
                        v-model="from.workUnit" :label="lang[langType].company"
                        :placeholder="lang[langType].companyContent" />


                    <!-- 国家/地区 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].CountryOrRegionContent }]"
                        v-model="from.CountryOrRegion" :label="lang[langType].CountryOrRegion" required
                        :placeholder="lang[langType].CountryOrRegionContent" />

                    <!-- 省市 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].provinceCityContent }]"
                        v-model="from.provinceCity" required :placeholder="lang[langType].provinceCityContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].provinceCity"></span>
                        </template>
                    </van-field>

                    <!-- 单位类型 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].unitTypeContent }]"
                        v-model="from.unitType" :label="lang[langType].unitType" required
                        :placeholder="lang[langType].unitTypeContent" />

                    <!-- jobLevel 职务级别 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].jobLevelContent }]"
                        v-model="from.jobLevel" :label="lang[langType].jobLevel" required
                        :placeholder="lang[langType].jobLevelContent" />

                    <!-- title 称谓 -->
                    <van-field label-width="7em" size="large" required
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].titleContent }]"
                        v-model="from.title" :placeholder="lang[langType].titleContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].title"></span>
                        </template>
                    </van-field>

                    <!-- otherTitle 其他称谓 -->
                    <van-field label-width="7em" size="large" required
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].otherTitleContent }]"
                        v-model="from.otherTitle" :label="lang[langType].otherTitle"
                        :placeholder="lang[langType].otherTitleContent" />

                    <!-- chineseName 中文名 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].chineseNameContent }]"
                        v-model="from.chineseName" :label="lang[langType].chineseName" required
                        :placeholder="lang[langType].chineseNameContent" />

                    <!-- 身份证 -->
                    <!-- <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].idCardContent }]"
                        v-model="from.idCard" :label="lang[langType].idCard" required
                        :placeholder="lang[langType].idCardContent" /> -->

                    <!-- 证件类型 -->
                    <van-field label-width="7em" size="large" v-model="from.cardTypeName" is-link readonly
                        :label="lang[langType].conferenceType" :placeholder="lang[langType].conferenceTypeContent"
                        @click="showCardType = true" required />
                    <van-popup v-model:show="showCardType" destroy-on-close round position="bottom">
                        <van-picker :model-value="from.cardType" :columns="cardTypeList" @cancel="showCardType = false"
                            @confirm="onConfirm" />
                    </van-popup>

                    <!-- 证件 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].passportContent }]"
                        v-model="from.passport" :label="lang[langType].passport" required
                        :placeholder="lang[langType].passportContent" />

                    <!-- 宗教 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].beliefContent }]"
                        v-model="from.belief" :label="lang[langType].belief" required
                        :placeholder="lang[langType].beliefContent" />

                    <!-- 外交职衔 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].diplomaticRankContent }]"
                        v-model="from.diplomaticRank" :label="lang[langType].diplomaticRank" required
                        :placeholder="lang[langType].diplomaticRankContent" />

                    <!-- 主要成就 -->
                    <van-field label-width="7em" size="large" v-model="from.mainAchievements"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].mainAchievementsContent }]"
                        :label="lang[langType].mainAchievements" required
                        :placeholder="lang[langType].mainAchievementsContent" />

                    <!-- 职务 -->
                    <van-field label-width="7em" size="large" v-model="from.career"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].careerContent }]" required
                        :placeholder="lang[langType].careerContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].career"></span>
                        </template>
                    </van-field>
                    <div style="background-color: #F7F7F7;height: 10px;"></div>
                    <!-- 固话 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].fixedLineContent }]"
                        v-model="from.fixedLine" :label="lang[langType].fixedLine" type="number" required
                        :placeholder="lang[langType].fixedLineContent" />

                    <!-- 传真 -->
                    <van-field label-width="7em" size="large"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].faxContent }]"
                        v-model="from.fax" type="number" required :placeholder="lang[langType].faxContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].fax"></span>
                        </template>
                    </van-field>

                    <!-- 办公地址 -->
                    <van-field label-width="7em" size="large" v-model="from.officeAddress" rows="3" autosize required
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].officeAddressContent }]"
                        :label="lang[langType].officeAddress" type="textarea"
                        :placeholder="lang[langType].officeAddressContent" />

                    <!-- 饮食要求 -->
                    <van-field label-width="7em" size="large" v-model="from.catering" rows="3" autosize
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].cateringContent }]"
                        :label="lang[langType].catering" type="textarea" required
                        :placeholder="lang[langType].cateringContent" />

                    <!-- 过敏源 -->
                    <van-field label-width="7em" size="large" v-model="from.allergen" rows="3" autosize
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].allergenContent }]"
                        :label="lang[langType].allergen" type="textarea" required
                        :placeholder="lang[langType].allergenContent" />

                    <!-- 紧急联系人 -->
                    <van-field label-width="7em" size="large" v-model="from.emergencyContact"
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].emergencyContactContent }]"
                        :label="lang[langType].emergencyContact" required
                        :placeholder="lang[langType].emergencyContactContent" />

                    <!-- 紧急联系人电话 -->
                    <van-field label-width="7em" size="large" v-model="from.emergencyContactPhone" required
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].emergencyContactPhoneContent }]"
                        :label="lang[langType].emergencyContactPhone"
                        :placeholder="lang[langType].emergencyContactPhoneContent" />

                    <!-- 接受采访意向  -->
                    <van-field label-width="7em" size="large" v-model="from.interview" :label="lang[langType].interview"
                        required
                        :rules="[{ required: true, trigger: 'onBlur', message: lang[langType].interviewContent }]"
                        :placeholder="lang[langType].interviewContent">
                        <template #input>
                            <van-radio-group v-model="from.interview" direction="horizontal">
                                <van-radio name="同意">同意</van-radio>
                                <van-radio name="拒绝">拒绝</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <!-- 媒体类别 -->
                    <van-field label-width="7em" size="large" v-model="from.media" :label="lang[langType].media"
                        :placeholder="lang[langType].mediaContent" />
                    <div style="background-color: #F7F7F7;height: 10px;"></div>

                    <!-- 抵达中国航班 -->
                    <van-field label-width="7em" size="large" v-model="from.flight" :label="lang[langType].flight"
                        :placeholder="lang[langType].flightContent" />

                    <!-- 抵达中国地点 -->
                    <van-field label-width="7em" size="large" v-model="from.arrivalLocation"
                        :label="lang[langType].arrivalLocation" :placeholder="lang[langType].arrivalLocationContent" />

                    <!-- 抵达中国时间 -->
                    <van-field label-width="7em" size="large" v-model="from.arrivalTime" is-link readonly
                        @click="showArrivalTime = true" :label="lang[langType].arrivalTime"
                        :placeholder="lang[langType].arrivalTimeContent" />
                    <van-popup v-model:show="showArrivalTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].arrivalTime" :columns="dateTimeColumns"
                            @confirm="handleConfirm" @calcan="showArrivalTime = false" />
                    </van-popup>

                    <!-- 中转交通方式 -->
                    <van-field label-width="7em" size="large" v-model="from.transfer" :label="lang[langType].transfer"
                        :placeholder="lang[langType].transferContent" />

                    <!--  中转时间 -->
                    <van-field label-width="7em" size="large" v-model="from.transferTime"
                        @click="showTransferTime = true" is-link readonly :label="lang[langType].transferTime"
                        :placeholder="lang[langType].transferTimeContent" />
                    <van-popup v-model:show="showTransferTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].arrivalTime" :columns="dateTimeColumns"
                            @confirm="transferTimeConfirm" @calcan="showTransferTime = false" />
                    </van-popup>


                    <!--  抵达西安交通方式 -->
                    <van-field label-width="7em" size="large" v-model="from.reach" :label="lang[langType].reach"
                        :placeholder="lang[langType].reachContent" />

                    <!--  抵达西安交通车次 -->
                    <van-field label-width="7em" size="large" v-model="from.reachTrainNumber"
                        :label="lang[langType].reachTrainNumber"
                        :placeholder="lang[langType].reachTrainNumberContent" />

                    <!--  抵达西安地点 -->
                    <van-field label-width="7em" size="large" v-model="from.reachLocation"
                        :label="lang[langType].reachLocation" :placeholder="lang[langType].reachLocationContent" />

                    <!--  抵达西安时间 -->
                    <van-field label-width="7em" size="large" v-model="from.reachTime" is-link readonly
                        @click="showReachTime = true" :label="lang[langType].reachTime"
                        :placeholder="lang[langType].reachTimeContent" />
                    <van-popup v-model:show="showReachTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].reachTime" :columns="dateTimeColumns"
                            @confirm="reachTimeConfirm" @calcan="showReachTime = false" />
                    </van-popup>

                    <!-- 接站地点 -->
                    <van-field label-width="7em" size="large" v-model="from.pickUpLocation"
                        :label="lang[langType].pickUpLocation" :placeholder="lang[langType].pickUpLocationContent" />

                    <!-- 离开交通方式 -->
                    <van-field label-width="7em" size="large" v-model="from.leavingTransportationMode"
                        :label="lang[langType].leavingTransportationMode"
                        :placeholder="lang[langType].leavingTransportationModeContent" />

                    <!--  离开车次 -->
                    <van-field label-width="7em" size="large" v-model="from.leavingTrainNumber"
                        :label="lang[langType].leavingTrainNumber"
                        :placeholder="lang[langType].leavingTrainNumberContent" />

                    <!--  离开地点 -->
                    <van-field label-width="7em" size="large" v-model="from.leavingLocation"
                        :label="lang[langType].leavingLocation" :placeholder="lang[langType].leavingLocationContent" />

                    <!--  离开时间 -->
                    <van-field label-width="7em" size="large" v-model="from.leavingTime" is-link readonly
                        @click="showLeavingTime = true" :label="lang[langType].leavingTime"
                        :placeholder="lang[langType].leavingTimeContent" />
                    <van-popup v-model:show="showLeavingTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].leavingTime" :columns="dateTimeColumns"
                            @confirm="leavingTimeConfirm" @calcan="showLeavingTime = false" />
                    </van-popup>

                    <!--  入住时间 -->
                    <van-field label-width="7em" size="large" v-model="from.checkInTime" is-link readonly
                        @click="showCheckInTime = true" :label="lang[langType].checkInTime"
                        :placeholder="lang[langType].checkInTimeContent" />
                    <van-popup v-model:show="showCheckInTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].checkInTime" :columns="dateTimeColumns"
                            @confirm="checkInTimeConfirm" @calcan="showCheckInTime = false" />
                    </van-popup>

                    <!--  离店时间 -->
                    <van-field label-width="7em" size="large" v-model="from.checkOutTime" is-link readonly
                        @click="showCheckOutTime = true" :label="lang[langType].checkOutTime"
                        :placeholder="lang[langType].checkOutTimeContent" />
                    <van-popup v-model:show="showCheckOutTime" destroy-on-close round position="bottom">
                        <van-picker :title="lang[langType].checkOutTime" :columns="dateTimeColumns"
                            @confirm="checkOutTimeConfirm" @calcan="showCheckOutTime = false" />
                    </van-popup>
                    <!-- <br /> -->
                    <!-- <h4 class="title" v-text="lang[langType].conference"></h4> -->
                    <!-- <br /> -->
                    <!-- <h4 class="title" v-text="lang[langType].orther"></h4> -->
                    <van-field label-width="7em" size="large" v-model="from.message" rows="3" autosize
                        type="textarea"
                        :placeholder="lang[langType].ortherNotesContent">
                        <template #label>
                            <span class="label" v-html="lang[langType].ortherNotes"></span>
                        </template>
                    </van-field>
                </van-cell-group>
            </div>

            <br />
            <van-button class="btn_bottom" block type="primary" native-type="submit">
                {{ lang[langType].signUp }}
            </van-button>
            <div style="text-align: center;line-height: 2.5em;font-size: 12px;" v-text="lang[langType].copyright"></div>
        </van-form>
    </div>
</template>
<script setup>
// import { onMounted, reactive } from "vue";
import { ref, reactive, onBeforeUpdate, computed } from 'vue';
import { showToast } from 'vant';
import axios from 'axios';
import config from '@/config/index.js';
import soundbyteJpg from '../../assets/img/2025lameifenghui.png';

import { saveData } from '@/api/2025.js';

import langpkg from './lang.js';

let arrivalTime = []
const dateTimeColumns = computed(() => {
    const now = new Date();
    const years = Array.from({ length: Number(now.getFullYear()) + 1 - 1970 }, (_, i) => {
        const t = 1970 + i + ''
        return {
            text: t,
            value: t
        }
    }).reverse();
    const months = Array.from({ length: 12 }, (_, i) => {
        const m = (i + 1).toString().padStart(2, '0')
        return {
            text: m,
            value: m
        }
    });

    // 动态计算当前选中年月对应的天数
    const daysInMonth = new Date(
        parseInt(arrivalTime[0] || '0'),
        parseInt(arrivalTime[1] || '0'),
        0
    ).getDate();
    const days = Array.from({ length: daysInMonth }, (_, i) => {
        const d = (i + 1).toString().padStart(2, '0')
        return {
            text: d,
            value: d
        }
    });

    const hours = Array.from({ length: 24 }, (_, i) => {
        const h = i.toString().padStart(2, '0')
        return {
            text: h,
            value: h
        }
    });
    const minutes = Array.from({ length: 60 }, (_, i) => {
        const m = i.toString().padStart(2, '0')
        return {
            text: m,
            value: m
        }
    });
    const seconds = Array.from({ length: 60 }, (_, i) => {
        const s = i.toString().padStart(2, '0')
        return {
            text: s,
            value: s
        }
    });
    return [years, months, days, hours, minutes, seconds];
});
/** const langObj = [
    { text: '中文', value: 'zh' },
    { text: 'English', value: 'en' },
]
const langObjT = {
    zh: '中文',
    en: 'English',
} */

// import en from './en.json';
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */

const lang = ref(langpkg);
const langType = ref(localStorage.getItem('langType') || 'zh');
// const showLange = ref(false);
const showCardType = ref(false);
const showArrivalTime = ref(false);
const showTransferTime = ref(false);
const showReachTime = ref(false);
const showLeavingTime = ref(false);
const showBirthday = ref(false);
const showCheckInTime = ref(false);
const showCheckOutTime = ref(false);

// 展示表单
const showForm = ref(false);

const cardTypeList = ref([
    { text: '身份证', value: '身份证' },
    { text: '护照', value: '护照' },
    { text: '港澳居民通行证', value: '港澳居民通行证' },
    { text: '台湾居民通行证', value: '台湾居民通行证' },
])
const photo = ref([])
const isFile = () => {
    return photo.value && photo.value.length;
};
// const langChange = ({ selectedValues }) => {
//     langType.value = selectedValues[0];
//     localStorage.setItem('langType', selectedValues[0]);
//     showLange.value = false;
// };

const from = reactive({
    name: '',
    idCard: '',
    career: '',
    contact: '',
    photoUrl: [],
    cardType: [],
    photo: [],
    birthday: '',
    message: '',
    arrivalTime: ''
});

onBeforeUpdate(() => { });

// getJoinType().then((res) => {
//     cardTypeList.value = res.map((item) => {
//         return {
//             text: item.dictLabel,
//             value: item.dictValue,
//         }
//     })
// })

const filesize = () => showToast(lang.value[langType.value].fileSize);

const packerConfirm = (values) => {
    showBirthday.value = false;
    from.birthday = values.selectedValues.join('-');
}
const handleConfirm = ({ selectedValues }) => {
    showArrivalTime.value = false;
    arrivalTime = selectedValues;
    from.arrivalTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
const transferTimeConfirm = ({ selectedValues }) => {
    showTransferTime.value = false;
    from.transferTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
const reachTimeConfirm = ({ selectedValues }) => {
    showReachTime.value = false;
    from.reachTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
const leavingTimeConfirm = ({ selectedValues }) => {
    showLeavingTime.value = false;
    from.leavingTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
const checkInTimeConfirm = ({ selectedValues }) => {
    showCheckInTime.value = false;
    from.checkInTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
const checkOutTimeConfirm = ({ selectedValues }) => {
    showCheckOutTime.value = false;
    from.checkOutTime = selectedValues.slice(0, 3).join('-') + ' ' + selectedValues.slice(3).join(':');
}
// 选择证件类型
const onConfirm = ({ selectedValues, selectedOptions }) => {
    showCardType.value = false;
    from.cardType = selectedValues;
    from.cardTypeName = selectedOptions[0].text;
};

const beforeRead = () => {
    if (!isFile()) showToast(lang.value[langType.value].changePhono);
    const item = photo.value[0]
    const oriData = new FormData();
    oriData.append('file', item.file);
    axios({
        method: 'post',
        url: config.base.Url2025 + 'dev/file/uploadDynamicReturnUrl',
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        data: oriData,
    }).then(res => {
        if (res.status !== 200 || res.data.code !== 0) {
            showToast(lang.value[langType.value].upFileError);
            from.photoUrl = []
            return
        }
        showToast(lang.value[langType.value].upFileSusscess);
        from.photoUrl = [{ url: res.data.data }]
        photo.value = [
            {
                url: res.data.data,
                file: item.file,
            }
        ]
    })
    return false;
};

// 选择权限范围
const onSubmit = () => {
    if (!showForm.value) {
        showForm.value = true;
        return;
    }
    if (!isFile()) showToast(lang.value[langType.value].selectFile);
    saveData({
        name: from.name,
        photo: from.photoUrl[0].url,
        namePinyin: from.pinyin,
        gender: from.gender,
        phone: from.contact,
        email: from.email,
        birthday: from.birthday,
        workUnit: from.workUnit,
        countryRegion: from.CountryOrRegion,
        provinceCity: from.provinceCity,
        unitType: from.unitType,
        jobLevel: from.jobLevel,
        title: from.title,
        otherTitle: from.otherTitle,
        chineseName: from.chineseName,
        idCard: from.idCard,
        passportNumber: from.passport,
        religion: from.belief,
        diplomaticRank: from.diplomaticRank,
        majorAchievements: from.mainAchievements,
        position: from.career,
        telephone: from.fixedLine,
        fax: from.fax,
        officeAddress: from.officeAddress,
        dietaryRequirements: from.catering,
        allergen: from.allergies,
        emergencyContact: from.emergencyContact,
        emergencyContactPhone: from.emergencyContactPhone,
        interviewIntention: from.interview,
        mediaCategory: from.media,
        arrivalFlightChina: from.flight,
        arrivalLocationChina: from.arrivalLocation,
        arrivalTimeChina: from.arrivalTime,
        transferMode: from.transfer,
        transferTime: from.transferTime,
        arrivalModeXian: from.reach,
        arrivalNumberXian: from.reachTrainNumber,
        arrivalLocationXian: from.reachLocation,
        arrivalTimeXian: from.reachTime,
        pickupLocation: from.pickUpLocation,
        departureMode: from.leavingTransportationMode,
        departureNumber: from.leavingTrainNumber,
        departureLocation: from.leavingLocation,
        departureTime: from.leavingTime,
        checkInTime: from.checkInTime,
        checkOutTime: from.checkOutTime,
        remarks: from.message,
        cardType: from.cardType,
    }).then(() => {
        showToast(lang.value[langType.value].registration);
        // 清空表单内容 from
        Object.keys(from).forEach((key) => {
            from[key] = '';
        });
    }).catch(() => {
        showToast(lang.value[langType.value].registrationError);
    });
};
</script>
<style lang="scss">
.fenghui {
    overflow-x: hidden;
    width: 100vw;
    max-width: 750px;
    margin: 0 auto;
    min-height: 100vh;
    // background: linear-gradient(270deg, #1C4DD6 0%, #1D18BC 100%);
    font-weight: 400;
    position: relative;
    font-family: Source Han Serif CN !important;

    .swith {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 999;
        color: #fff;

        .title {
            cursor: pointer;
        }
    }

    input {
        text-align: right;
    }

    .text {
        padding: 8px 8px 0 8px;
        text-align: justify;
        line-height: 1.8em;
        font-size: 16px;
        color: #3D3D3D;
    }

    .label {
        width: 5em;
    }

    h4 {
        color: #031280 !important;
    }

    .introduce {
        background-color: #FAFAFA;
        padding-bottom: 10px;
        overflow: hidden;

    }


    .van-hairline--bottom:after {
        border-bottom-width: 0px;
    }

    .van-button__text {
        font-size: 15px;
        font-weight: 400;
        color: #031280;
    }

    .icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn_bottom {
        color: #ffffff;
        text-align: center;
        background: linear-gradient(270deg, #1D19BC 0%, #1C4CD5 100%);
        width: calc(100% - 80px);
        margin: 0 auto;

        .van-button__text {
            color: #ffffff;
        }
    }

    .submit {
        .title {
            padding: 0 16px;
        }

        .van-cell-group,
        .van-cell {
            margin: 0%;
        }

        .van-field__body input {

            &::placeholder,
            &::-webkit-input-placeholder,
            &:-moz-placeholder,
            &::-moz-placeholder,
            &:-ms-input-placeholder {
                color: rgba(255, 255, 255, 0.6);
            }

        }
    }
}
</style>