国际化

src/views/index/index.vue

@@ -6,7 +6,7 @@
 
     <van-tabbar route v-model="active" active-color="#F9BF3A">
       <van-tabbar-item v-for="tabBar in tabBarList" :key="tabBar.name" :replace="tabBar.replace" :to="tabBar.to">
-        <span>{{ tabBar.text }}</span>
+        <span>{{ $t(tabBar.text) }}</span>
         <template #icon="props">
           <van-icon :color="props.active ? '' : 'rgb(229, 229, 229)'" :name="props.active ? tabBar.active : tabBar.inactive" />
         </template>
@@ -16,16 +16,16 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
-import JGap from "@/components/JGap/JGap.vue";
+import { reactive, ref } from 'vue';
 import {getAssetsImages} from "@/utils";
-import {useBackgroundHook} from "@/hooks/useBackgroundHook";
+import { useI18n } from 'vue-i18n';
 
-const tabBarList = [
+const { t } = useI18n()
+const tabBarList = reactive([
   {
     to: '/home',
     name: 'home',
-    text: '首页',
+    text: 'app.home',
     replace: true,
     active: getAssetsImages('tabBar/home-active.png'),
     inactive: getAssetsImages('tabBar/home-inactive.png')
@@ -33,7 +33,7 @@ const tabBarList = [
   {
     to: '/serveList',
     name: 'serveList',
-    text: '钱包',
+    text: 'app.serveList',
     replace: true,
     active: getAssetsImages('tabBar/artificer-active.png'),
     inactive: getAssetsImages('tabBar/artificer-inactive.png')
@@ -41,7 +41,7 @@ const tabBarList = [
   {
     to: '/message',
     name: 'message',
-    text: '客服',
+    text: 'app.message',
     replace: true,
     active: 'chat',
     inactive: 'chat'
@@ -49,17 +49,15 @@ const tabBarList = [
   {
     to: '/my',
     name: 'my',
-    text: '我的',
+    text: 'app.my',
     replace: true,
     active: getAssetsImages('tabBar/my-active.png'),
     inactive: getAssetsImages('tabBar/my-inactive.png')
   }
-]
+])
 
 const active = ref(0)
 
-// const {setBodyBackground} = useBackgroundHook()
-// setBodyBackground()
 </script>