activity/src/view/fenghui/index.vue

<template>
    <div :class="{ fenghui: true, en: langSelect === 'en' }">
        <div class="languageList">
            <div @click="() => langChange({ selectedValues: [item.value] })"
                :class="{ languageItem: true, 'languageItem-act': langSelect === item.value }" v-for="item in langObj"
                v-text="item.text" :key="item.value"></div>
        </div>
        <div class="swith" v-show="componentId" :style="componentId !== '' ? 'position: fixed; color: #000000' : ''">
            <div class="title" @click="showLange = true">
                {{ langObjT[langSelect] }}
                <van-icon name="arrow-down" />
            </div>
            <van-popup v-model:show="showLange" destroy-on-close round position="bottom">
                <van-picker :confirm-button-text="lang[langSelect].confirm"
                    :cancel-button-text="lang[langSelect].cancel" :model-value="[langSelect]" :columns="langObj"
                    @cancel="showLange = false" @confirm="langChange" />
            </van-popup>
        </div>
        <Introduction v-if="!componentId" :langType="langSelect" @saveData="saveData" />
        <!-- 动态组件 -->
        <Fore25 ref="fore25" v-if="componentId === 'fore25'" :verificationCode="verificationCode" :langType="langSelect"
            @closeComponent="closeComponent" />
        <Chin25 ref="chin25" v-if="componentId === 'chin25'" :verificationCode="verificationCode" :langType="langSelect"
            @closeComponent="closeComponent" />
        <Work25 ref="work25" v-if="componentId === 'work25'" :verificationCode="verificationCode" :langType="langSelect"
            @closeComponent="closeComponent" />

        <Fore25-recurrence ref="fore25Recurrence" v-if="componentId === 'fore25Recurrence'" :subData="subData"
            :verificationCode="verificationCode" :langType="langSelect" @closeComponent="closeComponent" />
        <Chin25-recurrence ref="chin25Recurrence" v-if="componentId === 'chin25Recurrence'" :subData="subData"
            :verificationCode="verificationCode" :langType="langSelect" @closeComponent="closeComponent" />
        <Work25-recurrence ref="work25Recurrence" v-if="componentId === 'work25Recurrence'" :subData="subData"
            :verificationCode="verificationCode" :langType="langSelect" @closeComponent="closeComponent" />
    </div>
</template>
<script setup>
// import { ref, reactive, computed } from 'vue';
import { ref } from 'vue';
import Introduction from './introduction.vue';
import Fore25 from './form.vue';
import Chin25 from './form1.vue';
import Work25 from './form2.vue';
import Fore25Recurrence from './formRecurrence.vue';
import Chin25Recurrence from './form1Recurrence.vue';
import Work25Recurrence from './form2Recurrence.vue';
import lang from './lang';
const langSelect = ref(localStorage.getItem('langSelect') || 'zh');
const componentId = ref('');
const verificationCode = ref('');
const showLange = ref(false);
const fore25 = ref(null); // 引入子组件的实例，用于调用子组件的方法
const chin25 = ref(null); // 引入子组件的实例，用于调用子组件的方法
const work25 = ref(null); // 引入子组件的实例，用于调用子组件的方法
const fore25Recurrence = ref(null); // 引入子组件的实例，用于调用子组件的方法
const chin25Recurrence = ref(null); // 引入子组件的实例，用于调用子组件的方法
const work25Recurrence = ref(null); // 引入子组件的实例，用于调用子组件的方法

let langDefaute = true;
let langDefauteType = langSelect.value;

const subData = ref({})

const langObj = [
    { text: '中文', value: 'zh' },
    { text: 'English', value: 'en' },
    // { text: 'Español', value: 'es' },
]
const langObjT = {
    zh: '中文',
    en: 'English',
    es: 'Español',
}
const saveData = (code, verification, data) => {
    if (code !== undefined) {
        componentId.value = code;
        if (langDefaute) {
            // 语言初始状态，需要判定是否是外国人的界面，是的话，需要设置英语 
            const langList = ['fore25', 'fore25Recurrence']
            langSelect.value = langList.includes(componentId.value) && langDefauteType !== undefined ? 'en' : langDefauteType
        }
    }
    if (verification !== undefined) verificationCode.value = verification;
    if (data !== undefined) subData.value = data;
}

const closeComponent = () => {
    componentId.value = '';
    if (langDefaute) langSelect.value = langDefauteType
}

const langChange = ({ selectedValues }) => {
    langSelect.value = selectedValues[0];
    langDefaute = false;
    localStorage.setItem('langSelect', selectedValues[0]);
    switch (componentId.value) {
        case 'fore25':
            fore25.value.reset(); // 调用子组件的方法
            break;
        case 'chin25':
            chin25.value.reset(); // 调用子组件的方法
            break;
        case 'work25':
            work25.value.reset(); // 调用子组件的方法
            break;
        case 'fore25Recurrence':
            fore25Recurrence.value.reset(); // 调用子组件的方法
            break;
        case 'chin25Recurrence':
            chin25Recurrence.value.reset(); // 调用子组件的方法
            break;
        case 'work25Recurrence':
            work25Recurrence.value.reset(); // 调用子组件的方法
            break;
    }
    showLange.value = false;
};

</script>
<style lang="scss">
// 引入自定义字体
@font-face {
    font-family: 'Source Han Sans CN';
    src: url('https://cxzx.smcic.net/topic/tool/pkg/SourceHanSerifCN.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 16px;
}

.fenghui {
    overflow-x: hidden;
    width: 100vw;
    max-width: 750px;
    margin: 0 auto;
    min-height: 100vh;
    font-weight: 400;
    position: relative;
    font-family: Source Han Sans CN;
    text-align: left;

    .van-nav-bar__title {
        margin: 0;
    }

    .languageList {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 0.875rem;
        color: #cbc9d6;
        text-align: center;
        position: absolute;
        width: 100%;
        z-index: 1;


        .languageItem {
            flex: 1;
            position: relative;
            height: 2em;

            &-act {
                color: #fff;

                &::after {
                    content: '';
                    position: absolute;
                    width: 90%;
                    height: 1px;
                    background: #fff;
                    bottom: 0;
                    left: 5%
                }
            }
        }
    }

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

        .title {
            cursor: pointer;
        }
    }

    .upFileSubtitle {
        font-size: 0.875rem;
        color: #cbc9d6;
    }


    .form {
        font-size: 0.875rem !important;
        font-weight: 400;
        padding: 46px 0 11px 0;

        .van-cell {
            font-size: 1rem;
        }

        .van-nav-bar {
            .van-icon {
                color: #3D3D3D
            }
        }

        .van-field__label--top {
            width: 100% !important;
        }

        .van-radio-group--horizontal {
            padding: 0 16px;
        }

        .label {
            min-width: 4em;
            display: inline-block;
            text-align: justify;
            -moz-text-align-last: justify;
            text-align-last: justify;
        }

        .van-cell--“large” {
            padding: 16px 20px;
        }
    }
}

.en {
    font-family: Arial Hebrew;
    ;
}
</style>