From c73d2671608d2921d64010e579d3c77748e84d3e Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 31 Oct 2025 21:43:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ar.json                    |  15 +++-
 src/locales/en.json                    |  15 +++-
 src/locales/zh.json                    |  15 +++-
 src/views/BDCenter/availableIncome.vue | 103 ++++++++++++++++---------
 src/views/BDCenter/incomeDetails.vue   |  46 +++++++++--
 5 files changed, 150 insertions(+), 44 deletions(-)

diff --git a/src/locales/ar.json b/src/locales/ar.json
index e76f3f9..b69dbc9 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -206,5 +206,18 @@
   "unknown_user": "مستخدم غير معروف",
   "approved_application": "تمت الموافقة على طلب {name}",
   "rejected_application": "تم رفض طلب {name}",
-  "operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى"
+  "operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى",
+
+  "cash_out": "سحب نقدي",
+  "complete_information": "إكمال المعلومات",
+  "contact_number": "رقم الاتصال",
+  "other_description": "وصف آخر",
+  "cash_withdrawal_tips": "يتطلب سحب النقود مراجعة. يرجى الانتظار بصبر حتى وصول النقد بعد اجتياز المراجعة.",
+  "receive": "استلام",
+  "rejection": "مرفوض",
+
+  "kyc": "KYC",
+  "passport_id_card": "جواز السفر/بطاقة الهوية:({current}/3)",
+  "transfer_coins": "تحويل العملات",
+  "plus_coins": "+{amount} عملات"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 29f22a5..4b5edd3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -206,5 +206,18 @@
   "unknown_user": "Unknown User",
   "approved_application": "Approved {name}'s application",
   "rejected_application": "Rejected {name}'s application",
-  "operation_failed": "Operation failed, please try again"
+  "operation_failed": "Operation failed, please try again",
+
+  "cash_out": "Cash out",
+  "complete_information": "Complete information",
+  "contact_number": "Contact number",
+  "other_description": "Other description",
+  "cash_withdrawal_tips": "Cash withdrawals require review. Please wait patiently for the cash to arrive after the review is passed.",
+  "receive": "Receive",
+  "rejection": "Rejection",
+
+  "kyc": "KYC",
+  "passport_id_card": "Passport/ID card:({current}/3)",
+  "transfer_coins": "Transfer Coins",
+  "plus_coins": "+{amount} Coins"
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 523edef..01c1123 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -206,5 +206,18 @@
   "unknown_user": "未知用户",
   "approved_application": "已批准 {name} 的申请",
   "rejected_application": "已拒绝 {name} 的申请",
-  "operation_failed": "操作失败，请重试"
+  "operation_failed": "操作失败，请重试",
+
+  "cash_out": "提现",
+  "complete_information": "完善信息",
+  "contact_number": "联系电话",
+  "other_description": "其他说明",
+  "cash_withdrawal_tips": "提现需要审核，请审核通过后耐心等待到账。",
+  "receive": "确认",
+  "rejection": "已拒绝",
+
+  "kyc": "KYC",
+  "passport_id_card": "护照/身份证:({current}/3)",
+  "transfer_coins": "转账金币",
+  "plus_coins": "+{amount} 金币"
 }
diff --git a/src/views/BDCenter/availableIncome.vue b/src/views/BDCenter/availableIncome.vue
index 69a45db..d5258f1 100644
--- a/src/views/BDCenter/availableIncome.vue
+++ b/src/views/BDCenter/availableIncome.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="transfer gradient-background-circles">
-    <MobileHeader title="Available income" />
+    <GeneralHeader
+      :title="t('available_salaries')"
+      :showLanguageList="true"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
 
     <div class="content">
       <!-- 信息部分 -->
@@ -13,10 +18,10 @@
             margin-bottom: 10px;
           "
         >
-          <div style="font-weight: 600">Available income</div>
+          <div style="font-weight: 600">{{ t('available_salaries') }}</div>
           <div style="display: flex; align-items: center" @click="showDetails">
-            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
-            <img src="../../assets/icon/arrow.png" alt="" width="16px" />
+            <div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
+            <img src="../../assets/icon/arrow.png" alt="" width="16px" class="flipImg" />
           </div>
         </div>
         <div
@@ -28,7 +33,7 @@
             box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
           "
         >
-          <span v-if="loading" class="loading-text">Loading...</span>
+          <span v-if="loading" class="loading-text">{{ t('loading') }}...</span>
           <span v-else style="font-weight: 700; color: #333; font-size: 1.1em"
             >${{ availableIncome }}</span
           >
@@ -63,7 +68,7 @@
             boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
           }"
         >
-          {{ action.name }}
+          {{ t(action.name.toLowerCase()) }}
         </button>
       </div>
 
@@ -130,14 +135,14 @@
               opacity: !selectedExchangeOption ? 0.6 : 1,
             }"
           >
-            Exchange
+            {{ t('exchange') }}
           </button>
         </div>
       </div>
 
       <!-- Transfer转账对象 -->
       <div v-if="activeAction === 'Transfer'">
-        <div style="font-weight: 600; margin-bottom: 10px">Transfer to others</div>
+        <div style="font-weight: 600; margin-bottom: 10px">{{ t('transfer_to_others') }}</div>
         <div
           style="
             background-color: white;
@@ -202,7 +207,7 @@
                 "
                 @click="searchPayee"
               >
-                Change
+                {{ t('change') }}
               </button>
             </div>
             <!-- 身份 -->
@@ -240,7 +245,7 @@
               "
               @click="searchPayee"
             >
-              Search
+              {{ t('search') }}
             </div>
           </div>
         </div>
@@ -308,7 +313,7 @@
               opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1,
             }"
           >
-            Transfer
+            {{ t('transfer') }}
           </button>
         </div>
       </div>
@@ -320,7 +325,7 @@
         <div>
           <!-- 标题 -->
           <div style="display: flex; align-items: center; margin-bottom: 10px">
-            <div style="font-weight: 600">KYC</div>
+            <div style="font-weight: 600">{{ t('kyc') }}</div>
           </div>
           <!-- 银行卡信息 -->
           <div
@@ -338,17 +343,17 @@
               style="display: flex; justify-content: space-between; align-items: center"
               @click="gotoKYC"
             >
-              <span style="font-weight: 510; font-size: 1em">Complete information</span>
-              <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+              <span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
+              <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" class="flipImg" />
             </div>
 
             <!-- 获取到银行卡信息 -->
             <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
               <!-- 图片 -->
               <div style="display: flex; justify-content: space-between; align-items: center">
-                <span style="font-weight: 510; font-size: 1em"
-                  >Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span
-                >
+                <span style="font-weight: 510; font-size: 1em">{{
+                  t('passport_id_card', { current: bankCardInfo.cardImages.length })
+                }}</span>
                 <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" />
               </div>
               <div style="display: flex; align-items: center; gap: 4px">
@@ -361,13 +366,13 @@
               </div>
 
               <!-- 卡号 -->
-              <div style="font-weight: 500">Contact number:</div>
+              <div style="font-weight: 500">{{ t('contact_number') }}:</div>
               <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
                 {{ bankCardInfo.contactNumber }}
               </div>
 
               <!-- 备注信息 -->
-              <div style="font-weight: 500">Other description:</div>
+              <div style="font-weight: 500">{{ t('other_description') }}:</div>
               <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
                 {{ bankCardInfo.description }}
               </div>
@@ -394,7 +399,7 @@
             }"
             @click="CashOut"
           >
-            Cash out
+            {{ t('cash_out') }}
           </div>
         </div>
       </div>
@@ -426,10 +431,9 @@
           "
           @click.stop
         >
-          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Tips</div>
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('tips') }}</div>
           <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
-            Cash withdrawals require review. Pleasewait patiently for the cash to arrive afterthe
-            review is passed.
+            {{ t('cash_withdrawal_tips') }}
           </div>
           <div
             style="
@@ -450,7 +454,7 @@
             "
             @click="Receive"
           >
-            Receive
+            {{ t('receive') }}
           </div>
         </div>
       </div>
@@ -459,9 +463,10 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n'
 import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import MobileHeader from '@/components/MobileHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 import {
   getBankBalance,
   userBankTransfer,
@@ -474,9 +479,14 @@ import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
 import maskLayer from '@/components/MaskLayer.vue'
 import { withdrawApply } from '@/api/bdCenter.js'
 import { getUserId } from '@/utils/userStore.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const availableIncome = ref('')
 const selectedCoin = ref(null)
 const selectedExchangeOption = ref(null)
@@ -564,7 +574,7 @@ const fetchBankBalance = async () => {
   } catch (error) {
     console.error('Failed to fetch bank balance:', error)
     availableIncome.value = '-'
-    showError(error.response.errorMsg)
+    showError(error.response?.errorMsg || t('failed_to_load_balance'))
   } finally {
     loading.value = false
   }
@@ -620,12 +630,12 @@ const selectExchangeOption = (option) => {
 
 const transfer = async () => {
   if (!selectedCoin.value) {
-    showError('Please select an amount first')
+    showError(t('please_select_amount'))
     return
   }
 
   if (!selectedPayee.id) {
-    showError('Please select a payee first')
+    showError(t('please_select_payee'))
     return
   }
 
@@ -640,21 +650,23 @@ const transfer = async () => {
   try {
     const response = await userBankTransfer(transferData)
     if (response.status) {
-      showSuccess(`Successfully transferred $${selectedCoinData.price} to ${selectedPayee.name}`)
+      showSuccess(
+        t('transfer_success', { price: selectedCoinData.price, name: selectedPayee.name })
+      )
       selectedCoin.value = null
       await fetchBankBalance()
     } else {
-      showError(`Failed to transfer $${selectedCoinData.price}`)
+      showError(t('transfer_failed', { price: selectedCoinData.price }))
     }
   } catch (error) {
     console.error('Transfer failed:', error)
-    showError(error.response.errorMsg)
+    showError(error.response?.errorMsg || t('transfer_error'))
   }
 }
 
 const handleExchange = async () => {
   if (!selectedExchangeOption.value) {
-    showError('Please select an amount first')
+    showError(t('please_select_coin_amount'))
     return
   }
 
@@ -671,7 +683,7 @@ const handleExchange = async () => {
     })
 
     if (response.status === true || response.errorCode === 0) {
-      showSuccess(`Successfully exchanged`)
+      showSuccess(t('exchange_success', { price: selectedOption.cash }))
 
       // 刷新银行余额
       await fetchBankBalance()
@@ -680,7 +692,7 @@ const handleExchange = async () => {
     selectedExchangeOption.value = null
   } catch (error) {
     console.error('Exchange failed:', error)
-    showError(error.response.errorMsg)
+    showError(error.response?.errorMsg || t('exchange_error_occurred'))
   }
 }
 
@@ -694,7 +706,7 @@ const Receive = async () => {
     maskLayerShow.value = false
   } catch (error) {
     maskLayerShow.value = false
-    showError(error.response.errorMsg)
+    showError(error.response?.errorMsg || t('something_went_wrong'))
   }
 }
 
@@ -722,6 +734,13 @@ onUnmounted(() => {
 
 .transfer {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #ffffff;
+  background-image: url(../../assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
 }
 
 .content {
@@ -753,4 +772,18 @@ onUnmounted(() => {
     font-size: 16px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
 </style>
diff --git a/src/views/BDCenter/incomeDetails.vue b/src/views/BDCenter/incomeDetails.vue
index adb605c..5c6d121 100644
--- a/src/views/BDCenter/incomeDetails.vue
+++ b/src/views/BDCenter/incomeDetails.vue
@@ -2,8 +2,9 @@
   <div class="fullPage">
     <GeneralHeader
       style="width: 100%"
-      title="Details"
-      color="color: rgba(0, 0, 0, 0.80)"
+      :title="t('salary_details')"
+      :showLanguageList="true"
+      color="black"
       backImg="/src/assets/icon/arrowBackBlack.png"
     />
 
@@ -23,7 +24,7 @@
         "
       >
         <div style="display: flex; justify-content: space-between; align-items: center">
-          <div style="font-weight: 600">Cash Out</div>
+          <div style="font-weight: 600">{{ t('cash_out') }}</div>
           <div style="font-weight: 600">${{ record.amount }}</div>
         </div>
         <div style="display: flex; justify-content: space-between; align-items: center">
@@ -46,7 +47,7 @@
                   : 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
             }"
           >
-            {{ record.status }}
+            {{ getStatusText(record.status) }}
           </div>
         </div>
       </div>
@@ -63,7 +64,7 @@
           gap: 8px;
         "
       >
-        <div style="font-weight: 700">Transfer</div>
+        <div style="font-weight: 700">{{ t('transfer') }}</div>
         <div
           style="
             padding: 12px;
@@ -101,7 +102,9 @@
             </div>
           </div>
 
-          <div style="font-weight: 600; font-size: 0.9em">+10000 Coins</div>
+          <div style="font-weight: 600; font-size: 0.9em">
+            {{ t('plus_coins', { amount: '10000' }) }}
+          </div>
         </div>
 
         <!-- 其他记录 -->
@@ -138,8 +141,15 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import { ref, onMounted } from 'vue'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
 // Cash Out 记录数据
 const cashOutRecords = ref([
@@ -185,6 +195,20 @@ const otherRecords = ref([
   },
 ])
 
+// 获取状态文本翻译
+const getStatusText = (status) => {
+  switch (status) {
+    case 'Under review':
+      return t('pending')
+    case 'Approved':
+      return t('success')
+    case 'Rejection':
+      return t('rejection')
+    default:
+      return status
+  }
+}
+
 const defaultAvatarUrl = (e) => {
   console.log('头像资源出错')
   e.target.onerror = null //防止循环
@@ -235,4 +259,14 @@ onMounted(() => {
     font-size: 32px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
 </style>