feat: 使用新的头部组件，对接语言切换功能并调整布局

src/locales/ar.json

@@ -219,5 +219,14 @@
   "kyc": "KYC",
   "passport_id_card": "جواز السفر/بطاقة الهوية:({current}/3)",
   "transfer_coins": "تحويل العملات",
-  "plus_coins": "+{amount} عملات"
+  "plus_coins": "+{amount} عملات",
+
+  "enter_contact_number": "يرجى إدخال رقم الاتصال الخاص بك",
+  "enter_other_description": "يرجى إدخال وصف آخر",
+  "passport_id_card_title": "جواز السفر/بطاقة الهوية",
+  "submit": "إرسال",
+  "unsupported_file_type": "نوع الملف غير مدعوم",
+  "max_images_warning": "يمكنك تحميل 3 صور كحد أقصى",
+  "upload_failed": "فشل التحميل",
+  "please_enter_contact_number": "يرجى إدخال رقم الاتصال"
 }

src/locales/en.json

@@ -219,5 +219,14 @@
   "kyc": "KYC",
   "passport_id_card": "Passport/ID card:({current}/3)",
   "transfer_coins": "Transfer Coins",
-  "plus_coins": "+{amount} Coins"
+  "plus_coins": "+{amount} Coins",
+
+  "enter_contact_number": "Please enter your contact number",
+  "enter_other_description": "Please enter other description",
+  "passport_id_card_title": "Passport/ID card",
+  "submit": "Submit",
+  "unsupported_file_type": "Unsupported file type",
+  "max_images_warning": "You can upload up to 3 pictures at most",
+  "upload_failed": "Upload failed",
+  "please_enter_contact_number": "Please enter contact number"
 }

src/locales/zh.json

@@ -219,5 +219,14 @@
   "kyc": "KYC",
   "passport_id_card": "护照/身份证:({current}/3)",
   "transfer_coins": "转账金币",
-  "plus_coins": "+{amount} 金币"
+  "plus_coins": "+{amount} 金币",
+
+  "enter_contact_number": "请输入您的联系电话",
+  "enter_other_description": "请输入其他说明",
+  "passport_id_card_title": "护照/身份证",
+  "submit": "提交",
+  "unsupported_file_type": "不支持的文件类型",
+  "max_images_warning": "最多只能上传3张图片",
+  "upload_failed": "上传失败",
+  "please_enter_contact_number": "请输入联系电话"
 }

src/views/BDCenter/availableIncome.vue

@@ -19,10 +19,10 @@
           "
         >
           <div style="font-weight: 600">{{ t('available_salaries') }}</div>
-          <div style="display: flex; align-items: center" @click="showDetails">
+          <!-- <div style="display: flex; align-items: center" @click="showDetails">
             <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>
         <div
           style="

src/views/Wallet/CashOut/KYC.vue

@@ -2,14 +2,15 @@
   <div class="fullPage">
     <GeneralHeader
       style="width: 100%"
-      title="KYC"
+      :title="t('kyc')"
-      color="color: rgba(0, 0, 0, 0.80)"
+      :showLanguageList="true"
+      color="black"
       backImg="/src/assets/icon/arrowBackBlack.png"
     />
 
     <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px">
       <!-- 银行卡号 -->
-      <div style="font-weight: 600">Contact number</div>
+      <div style="font-weight: 600">{{ t('contact_number') }}</div>
       <div
         style="
           border-radius: 8px;
@@ -21,13 +22,13 @@
         <input
           type="text"
           v-model="cardNum"
-          placeholder="Please enter your bank card number"
+          :placeholder="t('enter_contact_number')"
           style="width: 100%; border: none; outline: none"
         />
       </div>
 
       <!-- 申请信息 -->
-      <div style="font-weight: 600">Other description</div>
+      <div style="font-weight: 600">{{ t('other_description') }}</div>
       <div
         style="
           padding: 12px 12px 20px;
@@ -41,7 +42,7 @@
           v-model="description"
           rows="5"
           maxlength="100"
-          placeholder="Please enter other description"
+          :placeholder="t('enter_other_description')"
           @input="updateCount"
           style="width: 100%; border: none; outline: none; resize: none"
         ></textarea>
@@ -59,7 +60,7 @@
       </div>
 
       <!-- 上传图片 -->
-      <div style="font-weight: 600">Passport/lD card:</div>
+      <div style="font-weight: 600">{{ t('passport_id_card_title') }}:</div>
       <div style="display: flex; align-items: center">
         <div style="position: relative">
           <img
@@ -79,7 +80,7 @@
           alt=""
           style="display: block; width: 5vw; aspect-ratio: 1/1; object-fit: cover"
         />
-        <div v-for="(imgUrl, index) in previewUrls" style="position: relative">
+        <div v-for="(imgUrl, index) in previewUrls" :key="index" style="position: relative">
           <img
             :src="imgUrl"
             alt=""
@@ -118,7 +119,7 @@
           "
           @click="Submit"
         >
-          Submit
+          {{ t('submit') }}
         </div>
       </div>
     </div>
@@ -126,15 +127,21 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import { ref, onMounted, computed } from 'vue'
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
 import { useRouter } from 'vue-router'
 import { uploadImg } from '@/api/upload.js'
+import { setDocumentDirection } from '@/locales/i18n'
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
 const cardNum = ref('')
 const description = ref('')
 const count = computed(() => description.value.length)
@@ -143,6 +150,11 @@ const previewUrls = ref([]) //预览图
 const tempFiles = ref([]) //用于提交图片的临时文件列表
 const resImgUrls = ref([]) //用于提交申请的文件数组
 
+// 更新字符计数
+const updateCount = () => {
+  // 这个函数在模板中已经通过 @input 调用
+}
+
 // 点击上传图片
 // 处理文件选择
 const handleFileChange = (e) => {
@@ -160,6 +172,7 @@ const handleFileChange = (e) => {
     const file = fileList[0]
     if (!file.type || !file.type.startsWith('image/')) {
       console.error(`不支持的文件类型: ${file.type || '未知'}`)
+      showError(t('unsupported_file_type'))
       return
     }
 
@@ -174,7 +187,7 @@ const handleFileChange = (e) => {
     tempFiles.value.push(file)
     // uploadImgUrl()
   } else {
-    showWarning('you can upload up to 3 pictures at most')
+    showWarning(t('max_images_warning'))
   }
 }
 
@@ -194,13 +207,18 @@ const uploadImgUrl = async () => {
         resImgUrls.value.push(res.body)
       }
     } catch (error) {
-      showError(error.errorMsg)
+      showError(error.response?.errorMsg || t('upload_failed'))
     }
   }
 }
 
 // 提交申请
 const Submit = async () => {
+  if (!cardNum.value) {
+    showError(t('please_enter_contact_number'))
+    return
+  }
+
   await uploadImgUrl()
   let data = {
     amount: 10,
@@ -210,6 +228,7 @@ const Submit = async () => {
   }
   setApplyInfo(data)
   router.go(-1)
+  showSuccess(t('application_submitted'))
 }
 </script>
 
@@ -267,4 +286,10 @@ textarea::-webkit-scrollbar {
     font-size: 32px;
   }
 }
+
+/* RTL支持 */
+[dir='rtl'] .word-count {
+  right: auto;
+  left: 4px;
+}
 </style>