activity/src/view/fenghui/index.vue

<template>
    <div class="fenghui">
        <div class="swith" :style="componentId !== '' ? '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 :model-value="[langSelect]" :columns="langObj" @cancel="showLange = false"
                    @confirm="langChange" />
            </van-popup>
        </div>
        <Introduction v-if="!componentId" :langType="langSelect" @checkVerificationCode="checkVerificationCode" />
        <!-- 动态组件 -->
        <Fore25 ref="fore25" v-if="componentId === 'fore25'" :langType="langSelect" @closeComponent="closeComponent" />
        <Chin25 ref="chin25" v-if="componentId === 'chin25'" :langType="langSelect" @closeComponent="closeComponent" />
        <Work25 ref="work25" v-if="componentId === 'work25'" :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';
const langSelect = ref(localStorage.getItem('langSelect') || 'zh');
const componentId = ref('');
const showLange = ref(false);
const fore25 = ref(null); // 引入子组件的实例，用于调用子组件的方法
const chin25 = ref(null); // 引入子组件的实例，用于调用子组件的方法
const work25 = ref(null); // 引入子组件的实例，用于调用子组件的方法

const langObj = [
    { text: '中文', value: 'zh' },
    { text: 'English', value: 'en' },
]
const langObjT = {
    zh: 'English',
    en: '中文',
}
const checkVerificationCode = (code) => {
    componentId.value = code;
}

const closeComponent = () => {
    componentId.value = '';
}

const langChange = ({ selectedValues }) => {
    langSelect.value = selectedValues[0];
    localStorage.setItem('langSelect', selectedValues[0]);
    // const cardTypeList = ref(lang.value[langSelect.value].cardTypeList)
    // const countryOrRegionList = ref(lang.value[langSelect.value].countryOrRegionList)
    if (componentId.value === 'fore25') {
        fore25.value.reset(); // 调用子组件的方法 
    } else if (componentId.value === 'chin25') {
        chin25.value.reset(); // 调用子组件的方法 
    } else if (componentId.value === 'work25') {
        work25.value.reset(); // 调用子组件的方法
    }
    showLange.value = false;
};

</script>
<style lang="scss">
.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 !important;
    text-align: left;

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

        .title {
            cursor: pointer;
        }
    }


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

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