gypsy-crm-frontend-vu/components/LanguageDropdown.vue

<template>
  <cwg-dropdown :menu-list="customMenuList" @menuClick="handleMenuClick">
    <view class="pc-header-btn">
      <cwg-icon name="cwg-lang" color="#141d22" />
    </view>
  </cwg-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { localesList, LANG_MAP } from '@/locale/index'
import { lang } from '@/composables/config'

const { t, locale } = useI18n()

const currentLang = computed(() => lang.value || locale.value)
const currentLabel = computed(() => t(`language.${currentLang.value}`))
const currentFlag = computed(() => getFlagSrc(currentLang.value))

const customMenuList = computed(() =>
  localesList.map((code) => ({
    label: t(`language.${code}`),
    type: code
  })),
)

function handleMenuClick({ value }: { value: any }) {
  const type = value?.type ?? value
  if (!type) return
  locale.value = type
  lang.value = type
  const localeValue = LANG_MAP[type] || 'zh-Hans'
  uni.setLocale(localeValue)
}

function getFlagSrc(code: string) {
  switch (code) {
    case 'en':
      return '/static/flag-en.png'
    case 'cn':
      return '/static/flag-cn.png'
    case 'zhHant':
      return '/static/flag-zhHant.png'
    case 'es':
      return '/static/flag-es.png'
    default:
      return '/static/flag-en.png'
  }
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";
:deep(.cwg-dropdown-menu-container .menu .menu-item) {
  min-height: px2rpx(36);
}

:deep(.cwg-dropdown) {
  overflow: visible !important;
}
</style>