feat(提现相关页面): 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -230,5 +230,8 @@
   "upload_failed": "فشل التحميل",
   "please_enter_contact_number": "يرجى إدخال رقم الاتصال",
 
-  "invite_user_to_become_bd": "دعوة المستخدم ليصبح BD"
+  "invite_user_to_become_bd": "دعوة المستخدم ليصبح BD",
+
+  "under_review": "قيد المراجعة",
+  "approved": "موافق عليه"
 }

src/locales/en.json

@@ -230,5 +230,8 @@
   "upload_failed": "Upload failed",
   "please_enter_contact_number": "Please enter contact number",
 
-  "invite_user_to_become_bd": "Invite User To Become BD"
+  "invite_user_to_become_bd": "Invite User To Become BD",
+
+  "under_review": "Under review",
+  "approved": "Approved"
 }

src/locales/zh.json

@@ -230,5 +230,8 @@
   "upload_failed": "上传失败",
   "please_enter_contact_number": "请输入联系电话",
 
-  "invite_user_to_become_bd": "邀请用户成为BD"
+  "invite_user_to_become_bd": "邀请用户成为BD",
+
+  "under_review": "审核中",
+  "approved": "已批准"
 }

src/views/Wallet/CashOut/CashOut.vue

@@ -1,12 +1,15 @@
+// src/views/Wallet/CashOut/CashOut.vue
 <template>
   <div class="fullPage">
     <GeneralHeader
       style="width: 100%"
-      title="Cash out"
+      :title="t('cash_out')"
-      color="color: rgba(0, 0, 0, 0.80)"
+      color="rgba(0, 0, 0, 0.80)"
       :backImg="imgUrl"
+      :showLanguageList="true"
     />
 
+    <!-- 其余内容保持不变 -->
     <div style="padding: 16px">
       <!-- 信息部分 -->
       <div>
@@ -18,10 +21,10 @@
             margin-bottom: 10px;
           "
         >
-          <div style="font-weight: 600">Information</div>
+          <div style="font-weight: 600">{{ t('information') }}</div>
           <div style="display: flex; align-items: center" @click="lookDetails">
-            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
+            <div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
-            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+            <img class="flipImg" src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
           </div>
         </div>
         <div
@@ -33,7 +36,7 @@
             box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
           "
         >
-          <span style="font-weight: 510; font-size: 0.8em">Withdrawable amount: </span>
+          <span style="font-weight: 510; font-size: 0.8em">{{ t('available_salaries') }} </span>
           <span style="font-weight: 700; color: #333">{{
             currentAmount.availableAmount || 0
           }}</span>
@@ -62,18 +65,19 @@
             style="display: flex; justify-content: space-between; align-items: center"
             @click="gotoKYC"
           >
-            <span style="font-weight: 510; font-size: 1em">Complete information</span>
+            <span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
-            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+            <img class="flipImg" src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
           </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"
+              <span style="font-weight: 510; font-size: 1em">{{
-                >Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span
+                t('passport_id_card', { current: bankCardInfo.cardImages.length })
-              >
+              }}</span>
               <img
+                class="flipImg"
                 src="../../../assets/icon/arrow.png"
                 alt=""
                 style="width: 6vw"
@@ -90,13 +94,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>
@@ -123,7 +127,7 @@
           }"
           @click="CashOut"
         >
-          Cash out
+          {{ t('cash_out') }}
         </div>
       </div>
     </div>
@@ -152,14 +156,12 @@
             gap: 8px;
           "
         >
-          <div style="font-weight: 800; font-size: 1.2em">Tips</div>
+          <div style="font-weight: 800; font-size: 1.2em">{{ t('tips') }}</div>
           <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9em">
-            Please fill in the information carefully. You can only withdraw cash after the
+            {{ t('cash_withdrawal_tips') }}
-            information is completed.
           </div>
           <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
-            *lf there is a problem with the card number and the transfer cannot be made, it will
+            *{{ t('cash_withdrawal_tips') }}
-            result in the review being.
           </div>
           <div style="display: flex; justify-content: center; align-items: center">
             <div
@@ -176,7 +178,7 @@
               "
               @click="Receive"
             >
-              Receive
+              {{ t('receive') }}
             </div>
           </div>
         </div>
@@ -186,6 +188,7 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import {
@@ -195,9 +198,15 @@ import {
 import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
 import { ref, onMounted, computed, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { setDocumentDirection } from '@/locales/i18n'
+
+const { t, locale } = useI18n()
 const router = useRouter()
 const route = useRoute()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const activityId = route.query.activityId || ''
 const imgUrl = new URL('../../../assets/icon/arrowBackBlack.png', import.meta.url).href
 
@@ -303,4 +312,9 @@ onUnmounted(() => {
     font-size: 32px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
 </style>

src/views/Wallet/CashOut/Details.vue

@@ -1,6 +1,12 @@
+// src/views/Wallet/CashOut/Details.vue
 <template>
   <div class="fullPage">
-    <GeneralHeader style="width: 100%" title="Details" color="color: rgba(0, 0, 0, 0.80)" />
+    <GeneralHeader
+      style="width: 100%"
+      :title="t('details')"
+      color="rgba(0, 0, 0, 0.80)"
+      :showLanguageList="true"
+    />
 
     <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
       <div
@@ -16,7 +22,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">
@@ -48,22 +54,29 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { setDocumentDirection } from '@/locales/i18n'
 import {
   withdrawRecords, //获取可提现金额
 } from '@/api/lottery'
 
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const records = ref([])
 
 const showStatus = (item) => {
   if (item.status == 0) {
-    return 'Under review'
+    return t('under_review')
   } else if (item.status == 1) {
-    return 'Approved'
+    return t('approved')
   } else if (item.status == 2) {
-    return 'Rejection'
+    return t('rejection')
   }
 }
 
@@ -121,4 +134,9 @@ onMounted(() => {
     font-size: 32px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
 </style>