113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<template>
|
|
<page-meta>
|
|
<navigation-bar :title="$tt('navBar.language')" title-align="center" background-color="#007AFF" />
|
|
</page-meta>
|
|
<view class="container">
|
|
<u-radio-group v-model="applicationLocale">
|
|
<view class="group-wrap">
|
|
<u-cell-group :border="false">
|
|
<view class="cell-wrap" v-for="(item, index) in locales" :key="index">
|
|
<u-cell :border="false">
|
|
<view slot="title" class="slot-title">
|
|
<text class="cell-text">{{item.text}}</text>
|
|
</view>
|
|
<view slot="value">
|
|
<u-radio shape="circle" :name="item.code" iconSize="16"
|
|
@change="changeLanuage(item)"></u-radio>
|
|
</view>
|
|
</u-cell>
|
|
</view>
|
|
</u-cell-group>
|
|
</view>
|
|
</u-radio-group>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
systemLocale: '',
|
|
applicationLocale: 'en-US',
|
|
};
|
|
},
|
|
computed: {
|
|
locales() {
|
|
return [{
|
|
text: this.$tt('locale.en-US'),
|
|
code: 'en-US'
|
|
},
|
|
{
|
|
text: this.$tt('locale.zh-CN'),
|
|
code: 'zh-CN'
|
|
},
|
|
]
|
|
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.loadSelectedLanguage();
|
|
},
|
|
methods: {
|
|
//切换语言
|
|
changeLanuage(e) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: this.$tt('common.operation')
|
|
});
|
|
this.$i18n.locale = e.code;
|
|
uni.setLocale(e.code);
|
|
wx.setStorageSync('language', e.code)
|
|
},
|
|
loadSelectedLanguage() {
|
|
// 获取之前保存的语言设置
|
|
const selectedLanguage = wx.getStorageSync('language');
|
|
// 如果获取到了，使用该语言设置
|
|
if (selectedLanguage) {
|
|
this.applicationLocale = selectedLanguage;
|
|
} else {
|
|
// 如果没有获取到，使用默认设置
|
|
this.applicationLocale = 'zh-CN'; // 默认设置为中文
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
background: #eef3f7;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
/* .container {
|
|
padding: 20px;
|
|
} */
|
|
|
|
.container {
|
|
.group-wrap {
|
|
width: 100%;
|
|
margin: 20rpx 20rpx;
|
|
|
|
.cell-wrap {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.slot-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.cell-text {
|
|
font-size: 28rpx;
|
|
margin-left: 20rpx
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |