feat: 配置语言翻译功能

src/components/GeneralHeader.vue

@@ -162,14 +162,7 @@ const handleLanguageChange = (item) => {
 const isInAppEnvironment = ref(false)
 
 // 定义首页路由列表
-const homeRoutes = [
-  '/host-center',
-  '/agency-center',
-  '/coin-seller',
-  '/invitation-to-register',
-  '/lottery',
-  '/',
-]
+const homeRoutes = ['/host-center', '/coin-seller', '/invitation-to-register', '/lottery', '/']
 
 // 计算是否为首页
 const isCurrentlyHomePage = computed(() => {

src/components/team/TeamBillMore.vue

@@ -13,7 +13,9 @@
   >
     <!-- 标题 -->
     <div style="display: flex; justify-content: center; align-items: center">
-      <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">Member income</div>
+      <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
+        {{ t('team_member') }}
+      </div>
     </div>
 
     <!-- 日期和类型 -->
@@ -52,7 +54,7 @@
           type="text"
           name=""
           id=""
-          placeholder="Please enter the host lD"
+          :placeholder="t('enter_host_id')"
           style="
             width: 100%;
             outline: none;
@@ -64,13 +66,13 @@
           v-model="targetUserId"
         />
       </div>
-      <div style="font-weight: 600">Cancel</div>
+      <div style="font-weight: 600" @click="$emit('close')">{{ t('cancel') }}</div>
     </div>
 
     <!-- 加载成员 -->
     <div v-if="loading" class="loading-container">
       <div class="loading-spinner"></div>
-      <p>Loading members...</p>
+      <p>{{ t('loading') }}...</p>
     </div>
 
     <!-- 成员列表 -->
@@ -142,7 +144,7 @@
                 white-space: nowrap;
               "
             >
-              {{ member.memberProfile?.userNickname || 'Unknown User' }}
+              {{ member.memberProfile?.userNickname || t('unknown_user') }}
             </div>
             <div
               style="
@@ -209,7 +211,7 @@
                 font-size: 0.9em;
               "
             >
-              Time (Days):{{ Math.floor(member.target.onlineTime / 60 / 2, 0) }}
+              {{ t('time_days') }}:{{ Math.floor(member.target.onlineTime / 60 / 2, 0) }}
             </div>
           </div>
         </div>
@@ -218,15 +220,24 @@
 
     <div v-else class="empty-state">
       <div class="empty-icon">👥</div>
-      <p>No members data available</p>
+      <p>{{ t('no_data_available') }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { formatBillStatus, getTeamReleasePolicy } from '../../api/teamBill.js'
 import { getTeamId } from '../../utils/userStore.js'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
+defineEmits(['close'])
 
 const props = defineProps({
   billData: {
@@ -305,17 +316,29 @@ const getTargetLevel = (giftValue) => {
 // 格式化Target显示
 const formatTargetDisplay = (giftValue) => {
   if (loadingPolicy.value) {
-    return 'Loading...'
+    return t('loading') + '...'
   }
 
   const level = getTargetLevel(giftValue)
-  return `Target: ${level}`
+  return `${t('target')}: ${level}`
 }
 
 // 格式化状态文本
 const getStatusText = (status) => {
   const statusInfo = formatBillStatus(status)
-  return statusInfo.text
+  // 使用翻译键而不是直接文本
+  switch (statusInfo.textKey) {
+    case 'Completed':
+      return t('completed')
+    case 'Pending':
+      return t('pending')
+    case 'Out of account':
+      return t('out_of_account')
+    case 'In Progress':
+      return t('in_progress')
+    default:
+      return statusInfo.textKey
+  }
 }
 
 // 获取状态样式类
@@ -370,19 +393,19 @@ watch(
     console.log('status:', status)
 
     let newStatus = getStatusText(status)
-    if (newStatus == 'In Progress') {
+    if (newStatus == t('in_progress')) {
       boxShadow.value = '0 0 1px 0 #6085FF'
       color.value = 'rgba(61, 115, 255, 1)'
     }
-    if (newStatus == 'Pending') {
+    if (newStatus == t('pending')) {
       boxShadow.value = '0 0 1px 0 #FF6062'
       color.value = 'rgba(255, 61, 64, 1)'
     }
-    if (newStatus == 'Completed') {
+    if (newStatus == t('completed')) {
       boxShadow.value = '0 0 1px 0 #60FF65'
       color.value = 'rgba(61, 255, 84, 1)'
     }
-    if (newStatus == 'Out Of Account') {
+    if (newStatus == t('out_of_account')) {
       boxShadow.value = '0 0 1px 0 #6A6161'
       color.value = 'rgba(174, 174, 174, 1)'
     }

src/views/TeamBillView.vue

@@ -3,7 +3,6 @@
     <!-- 使用 GeneralHeader 替换 MobileHeader -->
     <GeneralHeader
       :title="t('team_bill')"
-      :isHomePage="false"
       :showLanguageList="true"
       color="black"
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
@@ -69,7 +68,7 @@
           <workReportBox
             v-for="bill in billList"
             :key="bill.id"
-            :type="getStatusText(bill.status)"
+            :type="bill.status"
             :date="bill.date"
             :target="bill.target"
             :salary="bill.salary"
@@ -187,6 +186,17 @@ const loadingPolicy = ref(false)
 const billList = ref([])
 const selectedBillMembers = ref([])
 
+// 格式化状态
+const formatStatus = (status) => {
+  const statusMap = {
+    SETTLED: 'Completed',
+    UNPAID: 'In Progress',
+    HANG_UP: 'Out of account',
+    PAY_OUT: 'Completed',
+  }
+  return statusMap[status] || status
+}
+
 // 获取团队账单列表
 const fetchTeamBill = async (teamId) => {
   try {
@@ -202,6 +212,7 @@ const fetchTeamBill = async (teamId) => {
           .toString()
           .substring(4, 6)}`,
         target: getTargetLevel(bill.target?.acceptGiftValue), // 使用政策数据计算等级
+        status: formatStatus(bill.status),
         salary:
           formatSalaryValue(
             userIdentity.body?.agent
@@ -300,7 +311,19 @@ const fetchBillWorkMembers = async (billId) => {
 // 格式化状态文本
 const getStatusText = (status) => {
   const statusInfo = formatBillStatus(status)
-  return statusInfo.textKey // 使用翻译键而不是直接文本
+  // 使用翻译键而不是直接文本
+  switch (statusInfo.textKey) {
+    case 'Completed':
+      return t('completed')
+    case 'Pending':
+      return t('pending')
+    case 'Out of account':
+      return t('out_of_account')
+    case 'In Progress':
+      return t('in_progress')
+    default:
+      return statusInfo.textKey
+  }
 }
 
 // 获取状态样式类