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 />
        <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>
        <br />
        <van-form @submit="onSubmit">
            <div class="submit">
                <van-cell-group inset>
                    <h4 class="title" v-text="lang[langType].basicInformation"></h4>
                    <van-field label-width="7em" v-model="from.name" :label="lang[langType].name"
                        :placeholder="lang[langType].nameContent" />
                    <van-field label-width="7em" v-model="from.idCard" :label="lang[langType].idCard"
                        :placeholder="lang[langType].idCardContent" />
                    <van-field label-width="7em" v-model="from.nationality" :label="lang[langType].nationality"
                        :placeholder="lang[langType].nationalityContent" />
                    <van-field label-width="7em" v-model="from.company" :label="lang[langType].company"
                        :placeholder="lang[langType].companyContent" />
                    <van-field label-width="7em" v-model="from.career" :label="lang[langType].career"
                        :placeholder="lang[langType].careerContent" />
                    <van-field label-width="7em" v-model="from.contact" :label="lang[langType].contact"
                        :placeholder="lang[langType].contactContent" />
                    <van-field label-width="7em" :placeholder="lang[langType].photoContent"
                        :label="lang[langType].photo">
                        <template #input>
                            <van-uploader accept="image/*" v-model="from.photo" :max-count="1" :max-size="524288000"
                                @oversize="filesize" :after-read="beforeRead" result-type="file">
                                <template #preview-cover>
                                    <van-icon color="#000" size="40" @click="previewClick" name="play-circle-o play" />
                                </template>
                            </van-uploader>
                            <p style="font-size: 12px;" v-text="lang[langType].photoSubContent"> </p>
                        </template>
                    </van-field>
                    <br />
                    <h4 class="title" v-text="lang[langType].conference"></h4>
                    <van-field label-width="7em" v-model="from.cardTypeName" is-link readonly
                        :label="lang[langType].conferenceType" :placeholder="lang[langType].conferenceTypeContent"
                        @click="showCardType = true" />
                    <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>
                    <br />
                    <h4 class="title" v-text="lang[langType].orther"></h4>
                    <van-field label-width="7em" v-model="from.message" rows="3" autosize :label="lang[langType].notes" type="textarea"
                        :placeholder="lang[langType].ortherNotesContent" />
                </van-cell-group>
            </div>
            <div class="btn_bottom" native-type="submit" v-text="lang[langType].submit" @click="onSubmit"> </div>
            <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 } from 'vue';
import { showToast } from 'vant';
import axios from 'axios';
import config from '@/config/index.js';
import soundbyteJpg from '../../assets/img/2025lameifenghui.png';

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

import langpkg from './lang.js';
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('zh');
const preview = ref('');
const showLange = ref(false);
const showCardType = ref(false);
const cardTypeList = ref([])
const isFile = () => {
    return from.photo && from.photo.length;
};
const langChange = ({ selectedValues }) => {
    langType.value = selectedValues[0];
    showLange.value = false;
};


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

onBeforeUpdate(() => { });

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

const filesize = () => showToast(lang[langType].fileSize);
const previewClick = () => {
    let getUrl = null;
    const file = from.photo[0].file;
    if (window.createObjectURL != undefined) {
        //basic
        getUrl = window.createObjectURL(file);
    } else if (window.URL != undefined) {
        //window.URL 标准定义
        getUrl = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        //window.webkitURL是webkit的内核
        //webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
    }
    preview.value = getUrl;
};

// 选择证件类型
const onConfirm = ({ selectedValues, selectedOptions }) => {
    showCardType.value = false;
    from.cardType = selectedValues;
    from.cardTypeName = selectedOptions[0].text;
};

const beforeRead = () => {
    if (!isFile) showToast(lang[langType].changePhono);
    const oriData = new FormData();
    oriData.append('file', from.photo[0].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[langType].upFileError);
                from.photoUrl = ''
                return
            }
            showToast(lang[langType].upFileSusscess);
            from.photoUrl = res.data.data
        })
    return true;
};

// 选择权限范围
const onSubmit = () => {
    if (!isFile) showToast(lang[langType].selectFile);
    saveData({
        "name": from.name,
        "photo": from.photoUrl,
        "nationality": from.nationality,
        "passportOrId": from.idCard,
        "contact": from.contact,
        "position": from.career,
        "company": from.company,
        "participationType": from.cardType.join(','),
        "remarks": from.message
    }).then(() => {
        showToast(lang[langType].registration);
        // 清空表单内容
        from.name = '';
        from.idCard = '';
        from.nationality = '';
        from.company = '';
        from.career = '';
        from.photoUrl = ''
        from.contact = '';
        from.cardType = [];
        from.photo = [];
        from.message = '';
    }).catch(() => {
        showToast(lang[langType].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;

    .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.5em;
        font-size: 14px;
        color: #3D3D3D;
    }

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

        h4 {
            color: #031280;
        }
    }


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

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

    .van-uploader__preview-cover {
        background-color: #000;
    }

    .btn_bottom {
        color: #ffffff;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: linear-gradient(270deg, #1D19BC 0%, #1C4CD5 100%);
    }

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