ceres-uniapp-v2.0/pages_category_page2/userModule/language.vue

<!-- 语言列表 -->
<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>