<template>
|
<view class="language-switch">
|
<view class="current-lang" @tap="showLanguagePopup">
|
<text class="iconfont icon-language"></text>
|
<text>{{ currentLanguageLabel }}</text>
|
</view>
|
|
<!-- 语言选择弹窗 -->
|
<uni-popup ref="popupRef" type="bottom">
|
<view class="lang-popup">
|
<view class="popup-header">
|
<text class="title">{{ $t('common.language.select') }}</text>
|
<text class="close" @tap="closePopup">×</text>
|
</view>
|
<view class="lang-list">
|
<view
|
class="lang-item"
|
v-for="lang in languages"
|
:key="lang.value"
|
:class="{ active: currentLang === lang.value }"
|
@tap="selectLanguage(lang.value)"
|
>
|
<text>{{ lang.label }}</text>
|
<text class="iconfont icon-check" v-if="currentLang === lang.value"></text>
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
import { getStoredLanguage, setLanguage } from '@/locale'
|
|
const popupRef = ref(null)
|
const currentLang = ref(getStoredLanguage())
|
const languages = [
|
{ label: '简体中文', value: 'zh-Hans' },
|
{ label: '繁體中文', value: 'zh-Hant' },
|
{ label: 'Português', value: 'pt' }
|
]
|
|
const currentLanguageLabel = computed(() => {
|
const lang = languages.find(l => l.value === currentLang.value)
|
return lang ? lang.label : ''
|
})
|
|
const showLanguagePopup = () => {
|
popupRef.value?.open()
|
}
|
|
const closePopup = () => {
|
popupRef.value?.close()
|
}
|
|
const selectLanguage = (lang) => {
|
if (currentLang.value !== lang) {
|
currentLang.value = lang
|
setLanguage(lang)
|
// 刷新页面应用新语言
|
uni.reLaunch({
|
url: '/pages/index/index'
|
})
|
}
|
closePopup()
|
}
|
</script>
|
|
<style lang="scss">
|
.language-switch {
|
.current-lang {
|
display: flex;
|
align-items: center;
|
height: 72rpx;
|
padding: 10rpx 20rpx;
|
background: #F5F6FA;
|
border-radius: 36rpx;
|
|
.icon-language {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 10rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.lang-popup {
|
background: #fff;
|
border-radius: 24rpx 24rpx 0 0;
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.close {
|
font-size: 40rpx;
|
color: #999;
|
padding: 0 20rpx;
|
}
|
}
|
|
.lang-list {
|
.lang-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
|
text {
|
font-size: 30rpx;
|
color: #333;
|
}
|
|
&.active {
|
color: #0066CC;
|
|
text {
|
color: #0066CC;
|
}
|
}
|
|
.icon-check {
|
width: 32rpx;
|
height: 32rpx;
|
}
|
}
|
}
|
}
|
</style>
|
