shop-uniapp-240426/components/base/languageUpdate.vue

<template>
	<view class="language" :style="{color: color}"
	>
		<u-action-sheet :actions="list"
		@close="languageShow = false"
		@select="selectLnaguage"
		:safeAreaInsetBottom="true"
		:show="languageShow"></u-action-sheet>
		<text @click="languageShow = true">{{ $t('language') }}</text>
		<view class="icon" @click="languageShow = true">
			<u-icon name="arrow-up" style="margin-bottom: -5px;" :color="color" size="12"></u-icon>
			<u-icon name="arrow-down" style="margin-bottom: -5px;" :color="color" size="12"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name:"languageUpdate",
		props : {
			color : {
				default : '#000'
			}
		},
		data() {
			return {
				languageShow : false,
				list: [
					// {
					// 	name:'中文简体',
					// 	key : "zh-Hans"
					// },
					// {
					// 	name:'中文繁體',
					// 	key : "zh-hk"
					// },
					{
						name:'English',
						key : "en"
					},
					{
						name:'Indonesian',
						key : "vi-ydnxy"
					},
					// {
					// 	name : 'Tiếng Việt',
					// 	key : "vi-VN"
					// },
					{
						name: this.$t('language.cancel')
					}
				],
			};
		},
		methods : {
			selectLnaguage(res){
				//#ifdef  H5
				this.$router.go(0); //刷新页面，不然validate.js不好国际化
				//#endif
				//#ifdef  APP-PLUS
				uni.navigateTo({
					url: '/pages/home/home' // 要刷新的页面路径
				});
				//#endif
				
				if(!res.key){
					return
				}
				
				this.curLanguage = res.key;
				// this.$store.commit('changeLanguage', res.key.code);
				uni.setStorage({
					key: 'language',
					data: res.key
				})
				this.$i18n.locale = res.key
				uni.setLocale(res.key) //切换语言环境必须在this.$i18n.locale之后，否则app端会有意想不到的bug
			}
		}
	}
</script>

<style lang="scss" scoped>
.language{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	height: 100%;
	.icon{
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
	}
}
</style>