多租户商城-商户小程序端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

99 lines
1.8 KiB

<!-- 语言列表 -->
<template>
<view class="container">
<view class="locale-list">
<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
<text class="text">{{item.text}}</text>
<text class="icon-check" v-if="item.code == applicationLocale"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
applicationLocale: ''
}
},
computed:{
locales() {
return [
// {
// text: this.$t('locale.auto'),
// code: 'auto'
// },
{
text: this.$t('navbar.english'),
code: 'en'
},
{
text: this.$t('navbar.chinese'),
code: 'zh-Hans'
}
]
}
},
onLoad() {
this.applicationLocale = uni.getLocale();
uni.onLocaleChange((e) => {
this.applicationLocale = e.locale;
})
},
methods: {
onLocaleChange(e) {
uni.setLocale(e.code);
this.$i18n.locale = e.code;
}
}
}
</script>
<style lang="scss">
.container {
padding: 0 24rpx;
.locale-setting {
font-size: 16px;
font-weight: bold;
margin-top: 25px;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #f0f0f0;
}
.list-item {
font-size: 14px;
padding: 10px 0;
}
.list-item .v {
margin-left: 5px;
}
.locale-item {
display: flex;
flex-direction: row;
padding: 10px 0;
}
.locale-item .text {
flex: 1;
}
.icon-check {
margin-right: 5px;
border: 2px solid #007aff;
border-left: 0;
border-top: 0;
height: 12px;
width: 6px;
transform-origin: center;
/* #ifndef APP-NVUE */
transition: all 0.3s;
/* #endif */
transform: rotate(45deg);
}
}
</style>