<template>
|
<view class="language-switch">
|
<picker
|
:value="currentIndex"
|
:range="languages"
|
range-key="label"
|
@change="handleChange"
|
>
|
<view class="picker">
|
<text class="current">{{ languages[currentIndex].label }}</text>
|
<text class="iconfont icon-arrow-down"></text>
|
</view>
|
</picker>
|
</view>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { setLanguage } from '@/i18n'
|
|
const { locale } = useI18n()
|
|
const languages = [
|
{ value: 'zh-Hans', label: '简体中文' },
|
{ value: 'zh-Hant', label: '繁體中文' },
|
{ value: 'pt', label: 'Português' }
|
]
|
|
const currentIndex = computed(() => {
|
return languages.findIndex(lang => lang.value === locale.value)
|
})
|
|
const handleChange = (e) => {
|
const selected = languages[e.detail.value]
|
setLanguage(selected.value)
|
}
|
</script>
|
|
<style lang="scss">
|
.language-switch {
|
.picker {
|
display: flex;
|
align-items: center;
|
padding: 10rpx 20rpx;
|
background: rgba(255, 255, 255, 0.1);
|
border-radius: $radius-xl;
|
|
.current {
|
font-size: 26rpx;
|
color: #fff;
|
margin-right: 8rpx;
|
}
|
|
.icon-arrow-down {
|
font-size: 24rpx;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
</style>
|
