Bit_Wise_World/src/views/user/LanguageSwitch.vue

<template>
  <div class="page-container">
    <van-nav-bar
      :title="$t('common.confirm')"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
      class="custom-nav"
    />

    <div class="content-body">
      <div
        v-for="item in langList"
        :key="item.code"
        class="lang-card"
        :class="{ 'active': currentLang === item.code }"
        @click="onSelectLang(item)"
      >
        <div class="flag-icon">{{ item.flagEmoji }}</div>
        <div class="text-info">
          <div class="native-name">{{ item.native }}</div>
          <div class="english-name">{{ item.english }}</div>
        </div>
        <div class="checkbox-area">
          <div v-if="currentLang === item.code" class="check-box">
            <van-icon name="success" color="#fff" size="14" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { showLoadingToast, closeToast, Icon as VanIcon } from 'vant';
import { loadLanguageAsync } from '@/locales/index.js';

const router = useRouter();
const { locale } = useI18n();
const currentLang = ref(locale.value);

const langList = [
  { code: 'en-US', native: 'English', english: 'English', flagEmoji: '🇺🇸' },
  { code: 'de-DE', native: 'Deutsch', english: 'German', flagEmoji: '🇩🇪' },
  { code: 'es-ES', native: 'Español', english: 'Spanish', flagEmoji: '🇪🇸' },
  { code: 'fr-FR', native: 'Français', english: 'French', flagEmoji: '🇫🇷' },
  { code: 'pt-PT', native: 'Português', english: 'Portuguese', flagEmoji: '🇵🇹' },
  { code: 'id-ID', native: 'Bahasa Indonesia', english: 'Indonesian', flagEmoji: '🇮🇩' },
  { code: 'ru-RU', native: 'Русский', english: 'Russian', flagEmoji: '🇷🇺' },
  { code: 'zh-CN', native: '简体中文', english: 'Chinese Simplified', flagEmoji: '🇨🇳' },
];

const onSelectLang = async (item) => {
  const langCode = item.code;
  if (langCode === currentLang.value) return;

  showLoadingToast({
    message: 'Switching...',
    forbidClick: true,
    duration: 0,
  });

  try {
    await loadLanguageAsync(langCode);
    currentLang.value = langCode;
    closeToast();
    setTimeout(() => {
      // router.back();
      }, 200);
  } catch (error) {
    closeToast();
  }
};
</script>

<style scoped lang="less">
.page-container { min-height: 100vh; background-color: #f7f8fa; }
.content-body { padding: 16px; }
.lang-card {
  background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px;
  display: flex; align-items: center; border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); transition: all 0.2s;
  &:active { background-color: #f2f3f5; }
  &.active { border-color: #ee0a24; background-color: #fffbfb; }
}
.flag-icon { font-size: 24px; margin-right: 16px; }
.text-info { flex: 1; display: flex; flex-direction: column;
  .native-name { font-size: 16px; font-weight: 600; color: #323233; margin-bottom: 2px; }
  .english-name { font-size: 12px; color: #969799; }
}
.checkbox-area { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.check-box { width: 22px; height: 22px; background-color: #ee0a24; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; }
:deep(.custom-nav) { --van-nav-bar-icon-color: #333; --van-nav-bar-title-text-color: #333; }
</style>