Uni-app原生Tabbar使用多语言设置

Uni-app原生Tabbar使用多语言设置

第一步： app.vue

<script>
	import { useStore, i18n, storage } from "./cool";
	import { useWarehouseStore } from './hooks/warehouse'
	const { t } = i18n.global;

	export default {
		methods: {
			inittranslate() {
				console.log(7878778);
				uni.setTabBarItem({ index: 0, text: t('goods') })
				uni.setTabBarItem({ index: 1, text: t('kjhm.nav') })
				uni.setTabBarItem({ index: 2, text: t('order.nav') })
				uni.setTabBarItem({ index: 3, text: t('user.nav') })
			}
		},
		onLaunch: function () {
			const { dict, user } = useStore();
			const warehouseStore = useWarehouseStore();


			// 获取字典
			// dict.refresh();

			this.inittranslate()
			if (user.token) {
				// 获取仓库
				warehouseStore.refresh();

				// 获取登录用户信息
				user.get();
			}

			console.log("App Launch");
		},
		onShow: function () {
			console.log("App Show");
		},
		onHide: function () {
			console.log("App Hide");
		},
		created: function () {
			console.log(9999999);
			uni.setTabBarBadge({ //显示数字
				index: 1,//tabbar下标
				text: storage.get('carts').length//数字
			})
			uni.$on('languageChange', () => {
				this.inittranslate()
			})
		},
	};
</script>

<style lang="scss">
	@import "/@/ui/index.scss";
	@import "/@/static/common.scss";
	@import "/@/static/index.scss";
	@import "colorui/main.css";
	@import "colorui/icon.css";
</style>

第2步：quotation.js

 watch(cartList, (value: IQuotationGoodsType[]) => {
        storage.set(cartCacheKey, value)
        uni.setTabBarBadge({ //显示数字
            index: 1,//tabbar下标
            text: cartList.value.length.toString()//数字
        })
    }, {
        deep: true
    })

第3步：set.vue

function setUserLocal() {
		user.setLocale(
			user.locale == 'es' ? 'zh-CN' : 'es'
		)
		console.log(user.locale)
		service.request({
			url: '/i18n/update/alias',
			method: 'GET',
			params: {
				alias: user.locale
			}
		}).then((res) => {
			user.logout()
			uni.$emit('languageChange')
			showTips('切换成功')
		})

	}

第4步：cl-popup.vue

// 打开
		function open() {
			// 层级
			zIndex.value = props.zIndex + id++;
			if (!props.showTabbar) {
				uni.hideTabBar()
			}
			if (!visible.value) {
				// 显示内容
				visible.value = true;

				emit("update:modelValue", true);
				emit("open");

				clearTimeout(timer);

				timer = setTimeout(() => {
					// 开始动画
					status.value = true;

					// 等待动画结束
					timer = setTimeout(() => {
						emit("opened");
					}, 350);
				}, 50);
			}
		}
// 关闭
		function close() {
			if (status.value) {
				const done = () => {
					// 关闭动画
					status.value = false;
					emit("close");
					uni.showTabBar()

					clearTimeout(timer);

					timer = setTimeout(() => {
						// 隐藏内容
						visible.value = false;
						emit("update:modelValue", false);
						emit("closed");
					}, 300);
				};

				done();
			}
		}