meishidaQS/pages/user/duoyuyan.vue

<template>
	<view class="contentV">
		<customNav :shownav="true" title="Ngôn ngữ/语言"  tinColor="#40AE36" jiantou="0"></customNav>
		<view class="itemView" @click="yuyanxuanze(3)">
			<text class="textstye">Tiếng Việt</text>
		</view>
		<view class="itemView" @click="yuyanxuanze(2)">
			<text class="textstye">繁體中文</text>
		</view>
		<view class="itemView" @click="yuyanxuanze(1)">
			<text class="textstye">简体中文</text>
		</view>
		<!-- <view class="itemView" @click="yuyanxuanze(4)">
			<text class="textstye">{{$t('locale.en')}}</text>
		</view> -->
	</view>
</template>

<script>
	import {
		changeLanguages,
	} from '@/pages/api/basic';
	export default {
		data() {
			return {
				index:0,
				systemLocale: '',
				applicationLocale: '',
				isAndroid:false
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
			  this.applicationLocale = e.locale;
			})
		},
		methods: {
			yuyanxuanze(index){
				var code='zh-Hans';
				var note=this.$t('index.language-change-confirm');
				var okbt='';
				var cancl='';
				switch(index){
					case 0:
					code='zh-Hans';
					break;
					case 1:
					code='zh-Hans';
					note='应用此设置将重启App';
					okbt='确定';
					cancl='取消';
					break;
					case 2:
					code='zh-Hant';
					note='應用此設置將重啟App';
					okbt='確定';
					cancl='取消';
					break;
					case 3:
					code='yuenan';
					note='Áp dụng cài đặt này sẽ khởi động lại Ứng dụng';
					okbt='Chắc chắn';
					cancl='Hủy bỏ';
					break;
					case 4:
					code='en';
					break;
					case 5:
					code='zh-Hans';
					break;
				}
				
				if (this.isAndroid) {
				  uni.showModal({
				    content: note,
					confirmText:okbt,
					cancelText:cancl,
				    success: (res) => {
				      if (res.confirm) {
						uni.setStorageSync('language',code);
				        uni.setLocale(code);
				      }
				    }
				  })
				} else {
					uni.setStorageSync('language',code);
				    uni.setLocale(code);
				    this.$i18n.locale = code;
					if(code=='yuenan'){
						code='vi';
					}
					if(code=='zh-Hans'){
						code='zh-CN';
					}
					if(code=='zh-Hant'){
						code='zh-TW';
					}
					//console.log("changeLanguages");
					this.$http.get(`${changeLanguages}`, {
						lang:code
					},false)
					.then( r => {
						//console.log(r)
					})
					.catch(err => {
						console.log(err)
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 600);
				    
				}
			},
		}
	}
</script>

<style>
	
	.contentV{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.itemView{
		display:flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		height: 130rpx;
		width: 90%;
		border: 2rpx dotted darkgray;
		background-color: aliceblue;
	}
	.textstye{
		font-size: 40rpx;
		margin-left: 30rpx;
		height: 130rpx;
		line-height:130rpx;
	}

</style>